Skip to content

Arrow function

The ES6 JavaScript update has introduced arrow functions, which is another way to declare and use functions. Here are the benefits they bring:

  • More concise
  • this is picked up from surroundings
  • implicit return

Sample code

  • Concision and implicit return
1
2
function double(x) { return x * 2; } // Traditional way
console.log(double(2)) // 4

1
2
const double = x => x * 2; // Same function written as an arrow function with implicit return
console.log(double(2)) // 4
  • this reference

In an arrow function, this is equal to the this value of the enclosing execution context. Basically, with arrow functions, you don't have to do the "that = this" trick before calling a function inside a function anymore.

1
2
3
4
5
6
7
function myFunc() {
  this.myVar = 0;
  setTimeout(() => {
    this.myVar++;
    console.log(this.myVar) // 1
  }, 0);
}

Detailed explanation

Concision

Arrow functions are more concise than traditional functions in many ways. Let's review all the possible cases:

  • Implicit VS Explicit return

An explicit return is a function where the return keyword is used in its body.

1
2
3
  function double(x) {
    return x * 2; // this function explicitly returns x * 2, *return* keyword is used
  }

In the traditional way of writing functions, the return was always explicit. But with arrow functions, you can do implicit return which means that you don't need to use the keyword return to return a value.

1
2
3
  const double = (x) => {
    return x * 2; // Explicit return here
  }

Since this function only returns something (no instructions before the return keyword) we can do an implicit return.

1
  const double = (x) => x * 2; // Correct, returns x*2

To do so, we only need to remove the brackets and the return keyword. That's why it's called an implicit return, the return keyword is not there, but this function will indeed return x * 2.

Note: If your function does not return a value (with side effects), it doesn't do an explicit nor an implicit return.

Besides, if you want to implicitly return an object you must have parentheses around it since it will conflict with the block braces:

1
2
const getPerson = () => ({ name: "Nick", age: 24 })
console.log(getPerson()) // { name: "Nick", age: 24 } -- object implicitly returned by arrow function
  • Only one argument

If your function only takes one parameter, you can omit the parentheses around it. If we take back the above double code:

1
  const double = (x) => x * 2; // this arrow function only takes one parameter

Parentheses around the parameter can be avoided:

1
  const double = x => x * 2; // this arrow function only takes one parameter
  • No arguments

When there is no argument provided to an arrow function, you need to provide parentheses, or it won't be valid syntax.

1
2
3
4
  () => { // parentheses are provided, everything is fine
    const x = 2;
    return x;
  }

1
2
3
4
  => { // No parentheses, this won't work!
    const x = 2;
    return x;
  }

this reference

To understand this subtlety introduced with arrow functions, you must know how this behaves in JavaScript.

In an arrow function, this is equal to the this value of the enclosing execution context. What it means is that an arrow function doesn't create a new this, it grabs it from its surrounding instead.

Without arrow function, if you wanted to access a variable from this in a function inside a function, you had to use the that = this or self = this trick.

For instance, using setTimeout function inside myFunc:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function myFunc() {
  this.myVar = 0;
  var that = this; // that = this trick
  setTimeout(
    function() { // A new *this* is created in this function scope
      that.myVar++;
      console.log(that.myVar) // 1

      console.log(this.myVar) // undefined -- see function declaration above
    },
    0
  );
}

But with arrow function, this is taken from its surrounding:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function myFunc() {
  this.myVar = 0;
  setTimeout(
    () => { // this taken from surrounding, meaning myFunc here
      this.myVar++;
      console.log(this.myVar) // 1
    },
    0
  );
}

Useful resources