Arrow Functions in Javascript

Arrow functions are fun!

Arrow functions were introduced in ES6, and look like this (=>). When I first saw the arrow, I was confused as to what value it provides. What was wrong with the old way? Am I a bad JS developer if I don’t use arrow functions? I thought that maybe it was just a style thing, to make code more concise. And this was partly true! Arrow functions also do a bunch of other things though too, as we’ll see below.

The power of pointing

When I see an arrow in real life, my first instinct is to turn my head towards the direction its pointing. Generally, this has a reward of more information. Sometimes an arrow points to a fork in the road, or a good restaurant. In JS, the arrow isn’t too far off as an analogy. We look at the sign (arguments in this case), and “turn our heads” to get rewarded with more information. An arrow function is a clear syntactical representation of a function. It also makes it way more clear that functions are considered as first class objects in Javascript.

Back up, what’s a first class object?

A first class object is:

  • Treated like any other variable
  • it can be returned or used as an argument
  • It can be saved into data structures

Why is it more clear? It’s not obvious that the following example is a first class object:

It makes sense that this function does something, but did you know you can also use it as a variable? Instead of just invoking phoneHome using phoneHome() we can simply pass it around our program as we would a variable using phoneHome.

With arrow functions, this link becomes a lot clearer. For example, here is the same function as above:

This is much clearer that our function can operate like any other variable type.

This or that?

The main thing to know about arrow functions is that they inherit the context of the outer scope (wut?). They don’t maintain their own context, they refer to their parent for that information. Back in ye olden days of JS, each function created it’s own this. Basically, this means that each function had it’s own idea of context. Say we want to make a Kindle class in Java. It would probably look something along the lines of this:

What we’ve done above is assigned a class (Kindle) and gave it three attributes/properties (name, books, batteryLife). We then gave it a function readBook(Book book). In JS we could make something similar:

The problem here is that our function readBook creates it’s own this, causing it to ignore the one we defined in our Kindle object! We can use arrow functions to defeat this problem, simply by writing readBook(book) {} as const readBook = (book) => {}.

So when you’re making a new object, try to use the old method of Javascript functions. Arrows are best suited for non method functions a fancy term for functions that don’t maintain their own dynamic context. And we want our objects to do exactly that! If I made a Person() class, I’d want const Bram = new Person() and const Ethan = new Person() to operate under two separate contexts. If you want to use a different context or if you want to create your own, using ye olde fashioned way is your best bet.

Basically, arrow functions boil down to two rules:
1. Don’t use them as constructors, it won’t go well because our this. is bound, meaning that our object will use the context from whatever called it
2. Arrow functions are great for functional programming paradigms! Try them for mapping and reducing!

Follow for more kewl coding stuff

Stay up to Date with the Newsletter

I send out a Sunday newsletter about books that have inspired me, thoughts from the current week and articles about efficiency, code, and personal development. Sign up below to recieve my three top mental models for free in your inbox: