Chapter 2: Arrow function
By: Pooja Kedar
Tags: Arrow Functions, JavaScript, React, ES6

This is a second lesson in the ES6 Step by step guide, If you want to explore all the features introduced in ES6, I would recommend to start from here. In this lesson we will deep dive into most useful feature in modern javascript Arrow functions.

Photo by Jens Johnsson on Unsplash

Arrow function is shorthand for the traditional function, but it is limited and can’t be used in all situations. Having said that, it is one of the most widely used feature of ES6 especially in array methods like map, reduce and filter. Below example illustrates simple arrow function to add two number.

const add = (a,b) => {

return a + b

}

From above example it could be understood, because of it’s arrow like syntax => it is called as Arrow function. If we are performing single operation like above then arrow function can be written in single line like below with no blocks and return statement.

const add = (a,b) => a+b

Handling of “this” (i.e. execution context)

Arrow function is not just syntactical sugar, the main difference between arrow function and regular function is the handling of “this”. As most of us know “this” could be confusing and lead to erroneous behaviour. So how does arrow function helps? In arrow function there is no binding of this. What? when we call normal function “this” represents the object that has called the function on the other hand in arrow function “this” always represents the object that has defined the arrow function that means arrow function does not define it’s own execution context. This is the reason we don’t need to use call, apply and bind methods on arrow function. Let’s take an example to understand.

var num = 1000;

const myContext = {

num: 200

}

function regularFunc(a,b,c){

return this.num + a + b + c

}

regularFunc(10,20,30) // it will return 1060

When we call regularFunc with no context it will have global context but what if we bind this function with context

var newRegularFunc = regularFunc.bind(myContext)

newRegularFunc(10,20,30) // it will return 260

In above case when we bind the function it will create new function with the context of provided object. Now when call the function getting different output as num is 200 in myContext object. What if try same with arrow function.

var num = 1000;

const myContext = {

num: 200

}

const arrowFunc = (a,b,c) => this.num + a + b + c

arrowFunc(10,20,30) // It will return 1060

Above arrow function is having global context hence this.num will have 1000 value

var newArrowFunc = arrowFunc.bind(myContext)

newArrowFunc(10,20,30) // It will return 1060

Now we are binding the arrow function to create new function with new context but as we discussed earlier context of arrow function can’t be updated. It will have global context, hence newArrowFunc will also return the same.

Arrow functions are very handy when it comes to class methods. As in React class components if we want to access the variables declare in class context we need to use either apply, call or bind methods to provide class context to methods, but with arrow function this is not the case. As arrow functions do not have their own execution context there is no need to bind the function hence can we be used directly.

Constructors and Methods

As mentioned in the start arrow functions have some limitation. One of the limitation of arrow function is we can’t use it as constructor and not to be used as method of object.

Let’s take an example to understand above. In below example it can be observed regular function can be used as constructor to create new instance.

function Animal(name, species){

this.name = name

this.species = species

} const dog = new Animal('Tom', 'Dog')

console.log(dog.name) // Tom

console.log(dog.species) // Dog

But if we try to use arrow function as constructor it will throw TypeError as arrow functions can’t be used as constructor.

const Animal = (name, species) => {

this.name = name;

this.species = species

} const dog = new Animal('Tom', 'Dog')

// Uncaught TypeError: Animal is not a constructor

Arrow functions should not be used as object methods, In below example when used normal function as method we get expected output.

const dog = {

name: ‘Tom’,

species: ‘Dog’,

getInfo: function(){

return `${this.name} is ${this.species}`

}

}

dog.getInfo() // Tom is Dog

But in case of arrow function we will not get desired output. It is because arrow function inherits context from the enclosing lexical scope which is global scope here.

const dog = {

name: ‘Tom’,

species: ‘Dog’,

getInfo: () => {

return `${this.name} is ${this.species}`

}

}

dog.getInfo() // undefined is undefined

In Summary

Arrow functions could be use in all cases especially with array methods, React class component methods, a short form to regular function but should not be used as object method, constructor method or prototype method.