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}`
    );
  }
}
Advertisements

About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

A Good Blog is Hard to Find

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: