Arrow functions in Javascript

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

There are 3 subtle differences in regular functions and arrow functions in JavaScript.

• No own this binding

  Arrow functions do not have their own value. The value of this inside an arrow function is always inherited from the enclosing scope.

Example

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

Output

This will give the output −

100
150
150

See that the arrow function changed this object outside its scope. The regular function just made the changes within its own.

• Arrow functions do not have a arguments array In JS arguments array in functions is a special object that can be used to get all the arguments passed to the function. Similar to this, arrow functions do not have their own binding to a arguments object, they are bound to arguments of enclosing scope.
• Arrow functions are callable but not constructible If a function is constructible, it can be called with new, i.e. new User(). If a function is callable, it can be called without new (i.e. normal function call).

Functions created through function declarations / expressions are both constructible and callable.

Arrow functions (and methods) are only callable. class constructors are only constructible.

If you are trying to call a non-callable function or to construct a nonconstructive function, you will get a runtime error.

Example

let arrowFunc = () => {}
new arrowFunc()

Output

This code gives the error −

arrowFunc is not a constructor