Arrow Functions

As the name suggests they are a brand new syntax for creating functions. They are perhaps the most widely used ES-6 features and make our code much cleaner.

In this article, we’ll explore the shorter syntax of arrow functions and compare them to their equivalent function expressions.

ES-5 Functions

A function expression is an anonymous function object that we set equal to a variable after its evaluation. Anonymous because the function has no name. The syntax consists of the function keyword, followed by zero or more parameters, and concludes with the function statements.

An example of ES-5 function to square a number:

const square = function(x){
return x*x;
console.log(square(7))//49

Arrow Functions

They provide a much shorter syntax as compared to the regular ES-5 functions. The syntax of the arrow function consists of zero or more parameters, an arrow => and then concludes with the function statements.

The same example is done through the arrow function:

const squareArrow = (x) => {
return x*x;
console.log(squareArrow(8))//64

Function declaration and Function expression both are possible using the ES-5 function, while the arrow function works only with function expression syntax.

//Named ES-5 function(Function Statement)
function square(x){
return x*x;
console.log(square(7))//49

With arrow function, there is no way to define a named arrow function

Arrow Function expression syntax-The Real Difference :

const squareArrow = (x) => x*x;
console.log(squareArrow(8))//64
//For one parameter arrow function can be further reduced
const squareArrow = x => x*x;

Advance differences between Arrow Functions and ES-5 functions

argument object are no longer bound with arrow functions. The arguments object is an Array-like object coresponding to the arguments passed to a function.

ES-5 Functions

const add = function(a,b) {
console.log(arguments);//Prints all arguments [55,10,20]
return a + b;//65
};
console.log(add(55,10,20));

Arrow functions

const add = (a,b) => {
console.log(arguments);//Reference Error: Arguments is not defined
return a + b;//65
};
console.log(add(55,10,20));

As we can see we have no longer access to the arguments object in the arrow function so if you want to use the arguments object stick with ES-5 functions.

this keyword is no longer bound with arrow functions

ES-5 Functions

const user = { 
name:'Adam',
cities:['New York','Dublin'],
printPlacesLived: function(){
//this is bound to user object
console.log(this.name);//Adam
console.log(this.cities);//['New York','Dublin']
this.cities.forEach((function(city){
console.log(this.name + 'has lived in' + city);
//Error:Cannot read property of 'name' of undefined
//Reason:this keyword is no longer bound with user object in the anonymous function and gets set equal to undefined
});
}};
user.printPlacesLived();

There has a been lot of workaround to avoid this. One of them is to use a new variable and set this equal to it so that it is accessible within the anonymous function too.

With ES-6 arrow functions, they no longer bind their own this value, instead, they use the value of context they were created in.

Arrow functions

const user = {
name:'Adam',
cities:['New York','Dublin'],
printPlacesLived: function(){
this.cities.forEach((city) => {
console.log(this.name + 'has lived in' + city);
//Adam has lived in New York
//Adam has lived in Dublin
});
}};
user.printPlacesLived();

The fact that the arrow function doesn’t bind the this keyword is actually really useful.

Now there are places where you don’t want to use arrow functions for the exact same reason. A good example is the printPlacesLived method switching it to an arrow function.

const user = {
name:'Adam',
cities:['New York','Dublin'],
printPlacesLived: () => {
this.cities.forEach((city) => {
console.log(this.name + 'has lived in' + city);
//Error:Cannot read property 'cities' of undefined
});
}};
user.printPlacesLived();

The getPlacesLived arrow function does not bind its own this value so it is no longer equal to the user object. It goes up to the parent scope(global scope) in which this is undefined.

So to avoid this there is a new Method Definition syntax in ES-6

It looks like:

const user = {
name:'Adam',
cities:['New York','Dublin'],
printPlacesLived() {
this.cities.forEach((city) => {
console.log(this.name + 'has lived in' + city);
});
}};
user.printPlacesLived();

This new syntax has all the characteristics of an ES-5 function. We have access to arguments object and to our this binding.

Hope I made things clear regarding the arrow function syntax

Thanks for reading!

© 2021 Asim Ansari | Software Engineer at Simpplr