Arrow function in Javascript

In this chapter, you will learn about what is arrow function in Javascript and how they are special from a regular function. The arrow functions been introduced in ES6 and also called as a fat function. Now let us see the advantages and limitations of arrow function

Advantages:

Provides a more concise syntax for writing function expressions
They share the surrounding this keyword
Simply use this keyword of the function they are written in
Have a lexical this variable
Can be used as a shorthand function

Limitations:

Does not have its own bindings to this, in other words, don’t have their own this instance
Should not be used as methods.
Does not have arguments
Not suitable for the call, apply and bind methods
Can not be used as constructors
Can not use yield, within its body

Syntax:
The arrow function can be defined as follows

var employeeFullName = (firstName, lastName) => {
    console.log('Employee Full Name : '+ firstName + ' '+ lastName);
}
employeeFullName('Stark','Mickel');

// output
// Employee Full Name : Stark Mickel

Now let’s see the below code snippet which contains a regular function and prints the employee details. You can notice that the details method is accessing the person properties from the keyword this.

var person = {
    name: 'Stark',
    dep: 'IT',
    salary: 5000,
    phoneNumber: 9988000,
    details: function() {
        console.log('*********** The details of employee ***********');
        console.log('Employee name : '+this.name);
        console.log('Employee dep : '+this.dep);
        console.log('Employee salary : '+this.salary);
        console.log('Employee phone number  : '+this.phoneNumber);
    }
};

person.details();

// Output
// *********** The details of employee ***********
// Employee name : Stark
// Employee dep : IT
// Employee salary : 5000
// Employee phone number  : 9988000

Now, let’s take the same code snippet and add function expressions. As we can see in the below code snippet the variables are undefined.

var person = {
    name: 'Stark',
    dep: 'IT',
    salary: 5000,
    phoneNumber: 9988000,
    details: function() {
        console.log('*********** The details of employee ***********');
        console.log('Employee name : '+this.name);
        var employeeDep = function () {
            console.log('Employee dep : '+this.dep);
        };
        var employeeSalary = function () {
            console.log('Employee salary : '+this.salary);
        };
        var employeePhone = function () {
            console.log('Employee phone number  : '+this.phoneNumber);
        };
        employeeDep();
        employeeSalary();
        employeePhone();
    }
};

person.details();

// Output
// *********** The details of employee ***********
// Employee name : Stark
// Employee dep : undefined
// Employee salary : undefined
// Employee phone number  : undefined

Now how can we solve the above problem? we can solve the above issue with the self instance as follows.

var person = {
    name: 'Stark',
    dep: 'IT',
    salary: 5000,
    phoneNumber: 9988000,
    details: function() {
        console.log('*********** The details of employee ***********');
        console.log('Employee name : '+this.name);
        var self =this;
        var employeeDep = function () {
            console.log('Employee dep : '+self.dep);
        };
        var employeeSalary = function () {
            console.log('Employee salary : '+self.salary);
        };
        var employeePhone = function () {
            console.log('Employee phone number  : '+self.phoneNumber);
        };
        employeeDep();
        employeeSalary();
        employeePhone();
    }
};

person.details();

// Output
// *********** The details of employee ***********
// Employee name : Stark
// Employee dep : IT
// Employee salary : 5000
// Employee phone number  : 9988000

Now we will move to the arrow function. Let us change the regular function to arrow function in the same example.
After changing the regular function into the arrow function we got the same output. So if you remember the point “The more advantage of an arrow function is that they share the surrounding this keyword”.

var person = {
    name: 'Stark',
    dep: 'IT',
    salary: 5000,
    phoneNumber: 9988000,
    details: function() {
        console.log('*********** The details of employee ***********');
        console.log('Employee name : '+this.name);
        var employeeDep = () => {
            console.log('Employee dep : '+this.dep);
        };
        var employeeSalary = () => {
            console.log('Employee salary : '+this.salary);
        };
        var employeePhone = () => {
            console.log('Employee phone number  : '+this.phoneNumber);
        };
        employeeDep();
        employeeSalary();
        employeePhone();
    }
};

person.details();

// Output
// *********** The details of employee ***********
// Employee name : Stark
// Employee dep : IT
// Employee salary : 5000
// Employee phone number  : 9988000

As we can observe in the above code snippet, we are not assigning this instance to self, instead, we are using this instance itself. So this shows that the arrow functions can share the surrounding this keyword. Now we will go further in-depth to understand how arrow function can use the lexical environment. Now create an employee object

function employee(name, dep) {
    this.name = name;
    this.dep = dep;
}
employee.prototype.task = function(task) {
    var listTask = task.map(function(item){
        console.log(this.name+' has the task '+item);
    });
}
let taskList = ['JIRA-123','JIRA-124','JIRA-125'];
new employee('Stark','IT').task(taskList);

// output
// has the task JIRA-123
// has the task JIRA-124
// has the task JIRA-125

As we can see in the above code snippet, we cant access the name property of an employee object inside the map function. Because its the inner new function and it doesn’t point to this instance. Now we can solve the above problem by using the bind() method, for more details on bind go though

function employee(name, dep) {
    this.name = name;
    this.dep = dep;
}
employee.prototype.task = function(task) {
    var listTask = task.map(function(item){
        console.log(this.name+' has the task '+item);
    }.bind(this));
}
let taskList = ['JIRA-123','JIRA-124','JIRA-125'];
new employee('Stark','IT').task(taskList);

// output
// Stark has the task JIRA-123
// Stark has the task JIRA-124
// Stark has the task JIRA-125

Now the power of arrow function comes here and makes it very simple. Let us change the task function to arrow function. As we can see in the below example “they can use lexical environment this variable”, arrow function solved the issue in one line, that’s the reason they are called as shorthand functions.

function employee(name, dep) {
    this.name = name;
    this.dep = dep;
}
employee.prototype.task = function(task) {
    var listTask = task.map((item) => {
        console.log(this.name+' has the task '+item);
    });
}
let taskList = ['JIRA-123','JIRA-124','JIRA-125'];
new employee('Stark','IT').task(taskList);

// output
// Stark has the task JIRA-123
// Stark has the task JIRA-124
// Stark has the task JIRA-125

Arrow function in Javascript

Arrow function in Javascript

One thought on “Arrow function in Javascript”