ES2015 Lesson 1: Arrow Functions


Arrow Functions

Welcome to the first lesson of ES6 in Practice! This lesson will be dual in a sense that you can decide whether you prefer watching the video version, the text version, or both. If you like this video, subscribe to my YouTube channel, and receive updates on a regular basis.

We will first describe the fat arrow syntax. Then we will discover the main advantage of arrow functions: context binding.

Fat Arrow Syntax

Let’s write an ES5 function to sum two numbers.

Using fat arrows ( => ), we will rewrite the same function in two steps.

Step 1: replace the function keyword with a fat arrow.

Step 2: if the return value of the function can be described by one expression, and the function body has no side-effects, then we can omit the braces and the return keyword.

If a function has only one argument, parentheses are not needed on the left of the fat arrow:

Use cases of fat arrows: syntactic sugar, more compact way of writing functions.

Context binding

In ES5, function scope often requires us to bind the context to a function. Context binding is usually performed in one of the following two ways:

  1. by defining a self = this variable,
  2. by using the bind function.

In our first example, we will attempt to animate a ball using the setInterval method.

The animation failed, because inside the function argument of setInterval, based on the rule of function scoping, the value of this is different.

In order to access and modify the variables in the scope of the ball object, we have to make the context of the ball accessible inside the function argument. Our first solution looks like this:

This solution is still a bit awkward, as we have to maintain the self and this references. It is very easy to make a mistake and use this instead of self somewhere in your code. Therefore, in ES5, best practices suggest using the bind method:

The bind method binds the context of the setInterval function argument to this.

In ES6, arrow functions come with automatic context binding. The lexical value of this isn’t shadowed by the scope of the arrow function. Therefore, you save yourself thinking about context binding.

Let’s rewrite the above example in ES6:

Use case: Whenever you want to use the lexical value of this coming from outside the scope of the function, use arrow functions.

Don’t forget that the equivalence transformation for fat arrows is the following:

The same holds for blocks:

In constructor functions and prototype extensions, it does not make sense to use fat arrows. This is why we kept the Ball constructor a regular function.

We will introduce the class syntax later to provide an alternative for construction functions and prototype extensions.

Exercises

At the end of the lessons, you will find some exercises. Solve them on your own, then scroll to the end of the article for a link to access the solutions.


Exercise 1: Write an arrow function that returns the string 'Hello World!'.


Exercise 2: Write an arrow function that expects an array of integers, and returns the sum of the elements of the array. Use the built-in method reduce on the array argument.


Exercise 3: Rewrite the following code by using arrow functions wherever it makes sense to use them:


Check your solutions by clicking here.