Today I’m going to describe a new syntactic sugar which ES6 brings us soon. It’s called arrow functions (also known as a fat arrow function) which is a shorter syntax compared to function expressions and lexically binds this value.

REMEMBER — Arrow functions are always anonymous.


Syntactic sugar

How does it look? It’s a signature:

([param] [, param]) => {
statements
}
param => expression
(param1, param2) => { block }

.. and it could be translated to:

    () => { … }       // no argument
x => { … } // one argument
(x, y) => { … } // several arguments
x => { return x * x } // block
x => x * x // expression, same as above

Lambda expressions in JavaScript! Cool!

So instead of writing:

[3, 4, 5].map(function (n) {
return n * n;
});

.. you can write something like this:

[3, 4, 5].map(n => n * n);

Awesome. Isn’t it? There is more!


Fixed “this” = lexical “this”

The value of this inside of the function is determined by where the arrow function is defined not where it is used.

No more bind, call and apply! No more:

var self = this;

It solves a major pain point (from my point of view) and has the added bonus of improving performance through JavaScript engine optimizations.

// ES5function FancyObject() {
var self = this;

self.name = 'FancyObject';
setTimeout(function () {
self.name = 'Hello World!';
}, 1000);
}
// ES6function FancyObject() {
this.name = 'FancyObject';
setTimeout(() => {
this.name = 'Hello World!'; // properly refers to FancyObject
}, 1000);
}

The same function

  • typeof returns function
  • instanceof returns Function

Limitations

  • It’s cannot be used as a constructor and will throw an error when used with new.
  • Fixed this means that you cannot change the value of this inside of the function. It remains the same value throughout the entire lifecycle of the function.
  • Regular functions can be named.
  • Functions declarations are hoisted (can be used before they are declared).



Whole series is also available as an ebook. I published it on leanpub.com

Future is bright!

ECMAScript 2015

Let’s talk about ES6

Maciej Rzepiński

Written by

Leader & Software Engineer at Wolters Kluwer

ECMAScript 2015

Let’s talk about ES6

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade