Fat arrow functions in ES6

ES6 comes with a syntactic enhancement of declaring functions using the => operator. It’s commonly called the fat arrow operator. In fact it’s not only syntactic sugar that saves us a number of characters. Instead, it helps us avoid the “TypeError: Cannot read property ‘propertyName’ of undefined” error.

Here’s a traditional JavaScript function:

let adder = function(a, b) {
  return a + b
}

That should be straightforward I suppose. We can call this function as follows:

adder(1,2)

With the fat arrow notation we can get rid of the function keyword as follows:

let adderFatArrow = (a, b) => {
  return a + b
}

The function name “adderFatArrow” is followed by the equality sign as normal. Then we have the parameters list followed by the fat arrow function and finally the function body.

In case we have a single return statement we can remove the curly braces and the return statement:

let adderFatArrow = (a, b) => a + b

If the function has a single parameter then we can remove the parenthesis:

let doubler = x => x * 2

In case the function has no input parameters then we need to use empty parenthesis as follows:

let saySomething = () => console.log('something')

An extra benefit of fat arrow functions is that they help avoid the error mentioned in the beginning of this post. Here’s an example:

let clients = {
  names: ['John', 'Mary', 'Jane', 'Peter'],
  customer: 'Goodness LTD',
  toString: function() {
    return this.names.map(function(name) {
      return `${name} belongs to customer ${this.customer}`
    });
  }
}

clients.toString()

We’ll get the following error message:

TypeError: Cannot read property ‘customer’ of undefined

The this keyword won’t refer to the clients object in the map function, it will be undefined. To resolve this developers have reverted to the self = this technique:

let clients = {
  names: ['John', 'Mary', 'Jane', 'Peter'],
  customer: 'Goodness LTD',
  toString: function() {
    let self = this
    return this.names.map(function(name) {
      return `${name} belongs to customer ${self.customer}`
    });
  }
}

We can now get rid of this using a fat arrow function solution:

let clients = {
  names: ['John', 'Mary', 'Jane', 'Peter'],
  customer: 'Goodness LTD',
  toString: function() {
    return this.names.map(name => 
      `${name} belongs to customer ${this.customer}`
    );
  }
}

clients.toString() will now work as expected and intended.

BTW using the enhanced object literals in ES6 we can make the above code even shorter by simplifying the toString function declaration:

let clients = {
  names: ['John', 'Mary', 'Jane', 'Peter'],
  customer: 'Goodness LTD',
  toString() {
    return this.names.map(name => 
      `${name} belongs to customer ${this.customer}`
    );
  }
}