JavaScript: `this` in Arrow Function and Regular Function

Function declaration function() {} is used in ES5 JavaScript. In ES6 JavaScript there is another way to declare function () => {} termed as arrow function.

Aside from syntactic difference, the most significant difference is the usage of this in a function. The regular function declaration in ES5 creates its own this in its own context. This can be suboptimal in some cases. For example:

let book = {
    title: 'ES5 vs ES6',
    author: 'John Doe',
    friends: ['peter', 'erin', 'scott'],
    desc: function(){
        return this.friends.map(function (friend) {
            return `${friend} like the book '${this.title}', which was written by ${this.author}`; 
        });
    }
};

console.log(book.desc());

The code will output:

[
  "peter like the book 'undefined', which was written by undefined",
  "erin like the book 'undefined', which was written by undefined",
  "scott like the book 'undefined', which was written by undefined"
]

We can circumvent this by binding this, passing this as argument to the function, or create a variable with the value of this in the function.

Example binding this:

let book = {
    title: 'ES5 vs ES6',
    author: 'John Doe',
    friends: ['peter', 'erin', 'scott'],
    desc: function(){
        return this.friends.map(function (friend) {
            return `${friend} like the book '${this.title}', which was written by ${this.author}`; 
        }.bind(this));
    }
};

console.log(book.desc());

Example on passing this as argument:

let book = {
    title: 'ES5 vs ES6',
    author: 'John Doe',
    friends: ['peter', 'erin', 'scott'],
    desc: function(){
        return this.friends.map(function (friend) {
            return `${friend} like the book '${this.title}', which was written by ${this.author}`; 
        }, this);
    }
};

console.log(book.desc());

Example this on a variable:

let book = {
    title: 'ES5 vs ES6',
    author: 'John Doe',
    friends: ['peter', 'erin', 'scott'],
    desc: function(){
        const book = this;
        return this.friends.map(function (friend) {
            return `${friend} like the book '${book.title}', which was written by ${book.author}`; 
        });
    }
};

console.log(book.desc());

They will output this:

[
  "peter like the book 'ES5 vs ES6', which was written by John Doe",
  "erin like the book 'ES5 vs ES6', which was written by John Doe",
  "scott like the book 'ES5 vs ES6', which was written by John Doe"
]

With arrow function in ES6 we don’t need to define this, for example:

let book = {
    title: 'ES5 vs ES6',
    author: 'John Doe',
    friends: ['peter', 'erin', 'scott'],
    desc: function(){
        return this.friends.map( (friend) => {
            return `${friend} like the book '${book.title}', which was written by ${book.author}`; 
        });
    }
};

console.log(book.desc());

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.