Arrow functions

I’m pretty impressed with Arrow functions in ECMAScript6. An Arrow function is very simple when compared to traditional function expressions.

Arrow functions are always anonymous and does bind its own this, arguments, super and new.target properties.

So, we can simply say Arrow functions are shorter functions and non-binding of this.

Lets begin with exploring shorter functions.

To experiment shorter functions, we shall start creating a traditional function and then later we shall replace it with Arrow functions.

var fruits = ['mango', 'jack fruit', 'banana'];
var a = fruits.map(function (f) { return f.length });

console.log(`using traditional function ${a}`);

In the above code, I have created an array with my favorite fruits name (we call these combination of fruits as mukkani in South India which means three fruits).

Using map function, we have returned the length of each item and stored the final array in variable a. This is the traditional function expression we used to write earlier.

Now, lets rewrite the same functionality with Arrow functions.

var fruits = ['mango', 'jack fruit', 'banana'];

// using traditional function
var a = fruits.map(function(f) { return f.length });

// using arrow function
var b = fruits.map(f => f.length);

console.log(`using traditional function ${a}`);
console.log(`using arrow function ${b}`);

In the above code, we have removed the return and the keyword function, and added => between arguments and expression. We have stored the Arrow function results in variable b.

To make sure both the ways are returning same set of results, we have write the values in console. The console writing may looks little bit different than our usual, because I have used template literals in this example. Click here to know more about template literals.

Output:
using traditional function 5,10,6
using arrow function 5,10,6

 

this binding

In ES5, we will bind() or var self = this; to make functions to create their own “this”. We used to store parent this in a variable and use that during the callback.

Let create a timer with native this,

function MyTimer() {
 this.seconds = 0;
 setInterval(function() {
 this.seconds++;
 }, 1000); 
}

var myCounter= new MyTimer();
setTimeout(function() {
 console.log(myCounter.seconds);
}, 1200);

It will return the timer seconds first after that it will always return 0 (this.seconds in MyTimer function it won’t bind with this.seconds++ inside the setInterval function ).

In ES5, to bind the value we have to follow the technique of assigning the this of parent to inside the function like follows:

function MyTimer() {
 this.seconds = 0;
 var self = this;
 setInterval(function() {
 self.seconds++;
 }, 1000); 
}

var myCounter= new MyTimer();
setTimeout(function() {
 console.log(myCounter.seconds);
}, 1200);

After using the self variable, we can able to use the incremented value inside the setInterval function.

Lets rewrite same in ES6,

function MyTimer() {
 this.seconds = 0;
 setInterval(() => this.seconds++, 1000);
}

var myCounter = new MyTimer();
setTimeout(() => console.log(myCounter.seconds), 1200);

The seconds variable is properly binded now.

Happy coding 🙂

Advertisements

One thought on “Arrow functions

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