Arrow function (Lambda expression) in Brief

What is Arrow function?

Arrow function expression defines the succinct syntax for writing the function expressions in JavaScript, which has been introduced in the ES6. It will not bind its own this, while using it within the functions and it has in-built return type attribute.

Syntax:

(parameters) => {stuffs}

Example:

Following is the simple demonstration about the usage of Arrow functions to make the code more compact.

var marks = [68, 83, 72, 56, 88];
var sum1 = marks.reduce(function (total, mark){
    return total + mark;
});
console.log(sum1);// Output: 367

var sum2 = marks.reduce((total, mark) => {
    return total + mark;
});
console.log(sum2);// Output: 367

var sum3 = marks.reduce((total, mark) => total + mark);
console.log(sum3);// Output: 367

Fiddle Demo

Advantage of Arrow function:

Example with JavaScript object constructor

In the following example the student () constructor has setTimeout () method for updating the “totalMark” attribute of “student ()”. Here the “this” defined by setTimeout () method is refers to the Window object. Hence it will not match with the “this” defined by the student () constructor. So the “totalMark” attribute of student () constructor cannot be changed in setTimeout () method as expected and it results in TypeError.

var s = new student();
function student() {
    this.student1 = { "name": "Smith", "totalMark": 375 };
    //To change the "Total Mark"
    setTimeout(function () {
        var newTotal = 395;
        if (this.student1.name == "Smith")//Uncaught TypeError: Cannot read property 'name' of undefined
            this.student1.totalMark = newTotal;
    }, 500);
}

To overcome this issue in ES6, Arrow function expression can be used with that setTimeout () method as stated in the following code snippets.

var s = new student();
function student() {
    this.student1 = {"name":"Smith", "totalMark":375};
    //To change the "Total Mark"
    setTimeout(() => {
        var newTotal = 395;
        if (this.student1.name == "Smith")
            this.student1.totalMark = newTotal;
        console.log(this.student1);//{name:"Smith",totalMark:395}
    }, 500);
}

 

Disadvantage of Arrow function:

In the following example, while using the Arrow function inside the marks () function prototype for total () method, it will change the context of “this” to Window object. Hence it leads to unexpected output or error.

var marks = function() {
    this.mark1 = 80;
    this.mark2 = 60;
};

marks.prototype = {
    total: () => this.mark1 + this.mark2 //Here "this" refers to Window object. It does not represents the "this" of marks()
}
var m = new marks();
console.log(m.total()); //NaN

So in this case, writing the function expression in normal way is preferable as like as following code snippets. Here in total () method, “this” will be referred to marks () object constructor and it works as usual without exception.

var marks = function () {
    this.mark1 = 80;
    this.mark2 = 60;
};

marks.prototype = {
    total: function () {
        return this.mark1 + this.mark2;
    }
}
var m = new marks();
console.log(m.total()); // 140;

 

Note:

For Arrow function line break is not acceptable as shown below. It will throw Syntax error.

var sum = ()
=> {return true}; //As arrow symbol at starting position

 

Advertisements

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