Difference Between Arrow Function and Regular Function

In this blog, we will learn about the difference between arrow function and normal/regular function.

What is Arrow function

The arrow function is introduced in ES6 which is a more concise syntax for writing function expressions. It is also known as fat arrow function. It allows us to create a function in a cleaner way as compared to a regular function.

What is a Regular function

Regular function is created using function declarations. Both regular and arrow function works in a similar manner but still, there are some differences between them. let's see the differences below 👇

1.)Syntax

The developer will get the same result as regular functions by writing a few lines of code using arrow functions.

//ES5 (Regular function)
function add(x,y){  return x+y;}
or 
var add=function(x,y){  return x+y;}


//ES6 (Arrow function)
const add=(x,y)=>{return x+y;}
or
const add=(x,y)=>x+y;

As we can see in the above example of the arrow function, curly brackets are not required if there is only one expression present.

2.)Use of this keyword

In regular function, the value of this is dynamic. This means that the value of this depends on how the function is invoked.

Arrow functions don't have their own 'this', and they don’t redefine the value of 'this' within the function. The value of 'this' of an arrow function always equals 'this' value from the outer function .This means that 'this' is lexically bound in arrow function.

Wait !! let's understand with an example.

const printName={
  firstName:"Manpreet",
  thisInArrowFun:()=>{
    console.log(this.firstName);   //no 'this' binding here
  },
  thisInRegularFun(){
    console.log(this.firstName);  //'this' binding works here
  }
}

printName.thisInArrowFun();     //undefined
printName.thisInRegularFun();  //Manpreet

As above stated, the value of 'this' inside an arrow function always refers to the outer context.

var firstName="John";
const printName={
  firstName:"Manpreet",
  thisInArrowFun:()=>{
    console.log(this.firstName);
  },
  thisInRegularFun(){
    console.log(this.firstName);
  }
}

printName.thisInArrowFun();     //John
printName.thisInRegularFun();  //Manpreet

3.)Constructors

The regular function can be used as constructors, using new keyword.

function student(name){
  console.log(name)
}

const studentData=new student("Manpreet");
//Manpreet

But arrow function will give us TypeError. That means , arrow function can never be used as constructor.

const student=(name)=>{
  console.log(name)
}

const studentData=new student("Manpreet");

//TypeError: student is not a constructor.

4.)Argument binding

In regular function, we can get a list of arguments by using argument keyword.

function fun(a,b){
  console.log(arguments);
}
fun(2,4);

//[Arguments] {'0':2,'1':4}

The arrow function does not have any arguments binding. But we can access a list of arguments by using a rest operator (...).

const fun=(...args)=>{
  console.log(...args);
}
fun(2,4);

//2 4

5.)No duplicate named parameters

In Regular function, we can pass duplicate parameters without using 'use strict'.

It is valid in JavaScript: ✅

function add(a,a){
  return a+a;
}
console.log(add(2,2));

But it will not work with 'use strict:❌

'use strict';
function add(a,a){
  return a+a;
}
console.log(add(2,2));

In the case of arrow function, it will not work whether in strict or non-strict mode. That means the arrow function can never have duplicate named parameters.

const add=(a,a)=>{
  return a+a;
}
console.log(add(2,2));

// Uncaught SyntaxError: Duplicate parameter name not allowed in this context

Conclusion

• In regular function 'this' value is dynamic and it depends on how the function is invoked whereas in arrow function it is equals to 'this' of the outer context.

• In arrow function , we can't pass duplicate parameters.

Thank you for reading !!!