Difference between ES6 Arrow functions and Regular functions in JavaScript

Arrow functions vs Regular functions

ES6 introduced a new way of writing simple and concise functions. The arrow functions expression explained in ES6 Arrow Functions in JavaScript blog.

Arrow function very useful for developers, yes it helps to make the coding is faster. Arrow functions are commonly used wherever an anonymous function expression is required like callback functions.

According to MDN, arrow function described as below

An arrow functions expression is a syntactically compact alternative to a regular expression, although without its own bindings to the de>this, de>arguments, de>super, or de>new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

If you confessed with above MDN statement, don’t worry the arrow function differences are listed below and explained with simple examples.

Shorter function expression
No ownthisKeyword bindings
No argumentsbindings
No duplicate named parameters
Using constructor & new keyword

Shorter function expression

Compare to regular functions the arrow functions expression are shorter and simple.

// Regular function
function Hello(name) {
  return name;
}

// Arrow function
const hello = name => name;

Wow! arrow function converted three line expression to single line.

The arrow functions have own limitations, we can’t use the arrow functions on some cases.

No own “this" Keyword bindings

this keyword value is based on current execution context in JavaScript. It also has some differences between strict mode and non-strict mode.

Refer the MDN doc for full details. Here i explained this keyword behavior on both regular function and arrow function.

// regular function
console.log(this); // Output - [object Window] in browser

var Person = {
  fullName: "King",
  age: "21",
  hello : function() {
    return "Hello " + this.fullName+ " your age is " + this.age;
  }
};
console.log(Person.hello()); // Output - Hello King your age is 21

Above example this keyword is an object and reference of current context object.

Now hello function is converted to arrow function

// Arrow function
console.log(this); // Output - [object Window] in browser

var Person = {
  fullName: "King",
  age: "21",
  hello : () =>{
    return "Hello " + this.fullName+ " your age is " + this.age;
  }
};
console.log(Person.hello()); // Output - Hello undefined your age is undefined

this is undefined because arrow function don’t have own this.

No "arguments" bindings

Regular function support own argument binding. Below example argument not passed for age function. But it return the function arguments.

// Regular function
var arguments = {0 : 10,1 : 20,2 : 30};
var Person = {
  age: function(){
    return arguments;
  }
};

Person.age(25,26,27);// Output - [object Arguments]{0: 25,1: 26,2: 27}

The arrow function don’t have own arguments binding, it access and return the closest var arguments object.

// Arrow function
var arguments = {0 : 10,1 : 20,2 : 30};
var Person = {
  age:() => {
    return arguments;
  }
};

Person.age(25,26,27);// Output - [object object]{0: 10,1: 20,2: 30}

If there is no closest object means the result is “ReferenceError: arguments is not defined”

// Arrow function
var person = {
  age:() => {
    return arguments;
  }
};

person.age(25,26,27);
// Output - ReferenceError: arguments is not defined

No duplicate named parameters

The duplicate name parameters is valid in regular functions on non-strict mode

// Regular function
function Sum(n, n){
  return n;
}

But strict mode the duplicate named parameters is not valid both regular and arrow function.

'use strict';

// Regular function
function Sum(n, n){
  return n;
}
// Output - Uncaught SyntaxError: Duplicate parameter name not allowed in this context

// Arrow function
(n, n) => {
  return n;
}
// Output - Uncaught SyntaxError: Duplicate parameter name not allowed in this context

Using constructor & new keyword

In Java we using new keyword to create instance of Class. But in JavaScript new keyword used to create an instance object of constructor function. If function that are called with new keyword, that function usually called contractor function.

Yes, the regular function called with new keyword means that function is contractor.

// Regular function
function Hello(name) {
  this.name = name;
}
var myName = new Hello("John"); 
console.log(myName.name); // Output - John

Now we try new keyword with arrow function

// Arrow function with new keyword
const hello =(name) => name;

const myName = new hello("John"); 
console.log(myName); 
// Output - TypeError: hello is not a constructor

So the arrow function not constructible and only callable. Hence arrow function can’t be used as constructors. No constructor and no new keyword for arrow functions.

// Arrow function without new keyword
const hello =(name) => name;

const myName = hello("John"); 
console.log(myName); // Output - John

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

https://stackoverflow.com/questions/38072740/es6-arrow-function-no-duplicate-named-arguments

Summarize