Difference between arrow function and normal function…

Regular function vs Arrow functions

An arrow function is also known as fat arrow function. It is a new feature introduced in ES6 that is a more concise syntax for writing function expressions. Both regular JavaScript functions and arrow functions work in a similar manner but there are some differences between them. Let's see the differences below: -

  • Syntax
  • Arguments binding
  • Use of this keyword
  • Using a new keyword

A programmer can get the same result as regular functions by writing a few lines of code using arrow functions.

Curly brackets are not required if only one expression is present.

// Regular function ES5:
var add = function(a, b) { return a + b;};
// Arrow function ES6
let add = (a, b) => { return a + b};
//or
let add = (a, b) => a + b;

arguments object inside the regular functions contains the list of arguments.

// Object with Regular functionlet showData = {
showArg: function(){
console.log(arguments);
}
}
showData.showArg(1,2,3); // output {0:1,1:2,2:3}

The arrow function, on the opposite, doesn’t define arguments i.e. they do not have arguments binding.

// Object with Arrow functionlet showData = {
showArg: ()=>console.log(arguments);
}
showData.showArg(1,2,3);
// Uncaught ReferenceError: arguments is not defined

But you can easily access the arrow function arguments using a rest parameter ...args.

// using rest parameterslet showData = {
showArg: (...args)=>console.log(args);
}
myFunc.showArgs(1, 2, 3, 4); // [1, 2, 3, 4]

Inside of a regular JavaScript function, this value is dynamic. The dynamic context means that the value of this depends on how the function is invoked.

let name ={ 
fullName:'abc',
printInRegular: function(){
console.log(`My Name is ${this.fullName}`);
},
printInArrow:()=>console.log(`My Name is ${this.fullName}`)
}
name.printInRegular(); // My Name is abc
name.printInArrow(); // My Name is undefined

The behavior of this inside of an arrow, function differs considerably from the regular function’s this behavior as an arrow function does not have its own “this” keyword.

The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function which means No matter how or where being executed, this value inside of an arrow function always equals this value from the outer function.

const myObject = {
myMethod(items) {
console.log(this); // logs myObject
const callback = () => {
console.log(this); // this takes value from myMethod(outer func)
};
items.forEach(callback);
}
};

myObject.myMethod([1, 2, 3]);

Regular functions are constructible and callable. They can be called using the new keyword.

function Car(color) {
this.color = color;
}

const redCar = new Car('red');
redCar instanceof Car; // => true

But, the arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions.

const Car = (color) => {
this.color = color;
};

const redCar = new Car('red'); // TypeError: Car is not a constructor

Summary

this value inside a regular function is dynamic and depends on how the function is invoked. But this inside the arrow function is bound lexically and equals to this of the outer function. Fat arrow methods always bind this value to the class instance.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store