Efficient User

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 do 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.

Let’s 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 this 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, let’s 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 the same set of results, we have written the values in the console. The console writing may look 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 a 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.

Let’s 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 🙂