Arrow functions in JavaScript

Arrow functions were introduced in ES6. It behaves differently from the traditional functions of Javascript.

Syntax

const functionName = (parameters) => {
    //function body
}
const getName = (age) => {
    let name = 'Bobby';
    return `${name} is ${age}`;
}

let name = getName(23);
console.log(name); // Bobby is 23

Shorthand Syntax

If the arrow function has only one statement, you can skip the curly braces and the return keyword.

const getName = (age) => `Bobby is ${age}`;

let name = getName(23);
console.log(name); // Bobby is 23

If the arrow function has only one parameter, you can skip the parentheses as well.

const getName = age => {
    let name = 'Bobby';
    return `${name} is ${age}`;
}

let name = getName(23);
console.log(name); // Bobby is 23

If the arrow function has only one statement and if it is returning an object literal, use parentheses to wrap that object literal otherwise it will not work as expected.

const fun = () => {name : 'Bobby'} // undefined

const fun = () => ({name : 'Bobby'}) // { name: 'Bobby' }

Rest Parameters

We can use the rest parameter inside an arrow function.

const quantity = "100";
const names = [ "Iron", "Gold", "Aluminium" ];

const estimate = (quantity, ...names) => {
   console.log(quantity); //100
   console.log(names); //(6) ['Iron', 'Gold', 'Aluminium', 'Iron', 'Gold', 'Aluminium']
}; 
estimate(quantity, ...names, ...names);

Default Parameters

We can define default Parameters inside the arrow function.

const quantity = 100;

const estimate = (quantity, price = 1) => {
   console.log(quantity * price);
}; 
estimate(quantity); //100

estimate(quantity, 20); //2000

Destructuring

Destructuring with parameters is also supported inside the arrow function.

let myFun = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
myFun(); // 6

No this of its own

Value of this keyword is determined by the containing function in which the arrow function is defined. this keyword inside an arrow function refers to the this of containing or parent function.

// Adding a default property to the global object, which is window in browers. 
window.default = 100

var increment = {
  default: 1,
  start: function(){
     setTimeout(function(){
        console.log(this.default + 1);
     }, 1000);
   }
}

increment.start() // 101

In the above, we have a traditional function an object method, and the traditional function inside an object method refers to the global object i.e., the window object in browsers. That is why it is increasing the default value of the window object rather than the increment object.

// Adding a default property to the global object, which is window in browers. 
window.default = 100

var increment = {
  default: 1,
  start: function(){
     setTimeout(() => {
        console.log(this.default + 1);
     }, 1000);
   }
}

increment.start() // 2

In the above, we have an arrow function and an object method, and the arrow function refers to the this of containing function i.e., the increment object in the above code. That is why it is increasing the default value of the increment object rather than the window object.

this using call(), apply(), or bind()

We cannot change the value of this using call(), apply(), or bind inside an arrow function.

var increment = {
  base: 1,
  add: function(a) {
    let f = v => v + this.base;
    return f(a);
  },
  addAgain: function(a){
    let f = v => v + this.base;
    return f.call({base: 10}, a);
  }
}

console.log(increment.add(10)); //11
console.log(increment.addAgain(12)); //13
// {base:10} is ignored.

No constructors

We cannot use arrow functions with new keyword as constructor, Doing so will result in an error.

 const abc = () => `Hello Prashant`;
 let x = new abc();
 //abc is not a constructor

No arguments binding

Arrow functions don’t have arguments object.

// Argument object inside Tradional Function
function myFun(a, b, c){
    console.log(arguments) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    console.log(arguments[2]) // 3
}
myFun(1, 2, 3)

// Argument object inside Arrow Function
const myFun2 = (a, b, c) => {
    console.log(arguments)
}
myFun2(1, 2, 3) // Uncaught ReferenceError: arguments is not defined

No prototype property

The prototype property does not exist for the arrow function in javascript.

 let args = ['Bobby', 'Sadhwani'];
 // Arrow Function
 const myFun = (...args) => args[0];
 console.log(myFun.prototype); //undefined

 // Tradional Function
 function myFun2(...args){
     args[0]
 };
 console.log(myFun2.prototype); 
 /*
 {constructor: ƒ}
 constructor : ƒ myFun2(...args)
 [[Prototype]] : Object
 */

Unique parameters

Unlike traditional Javascript functions where we can use duplicate parameters in unstrict mode. In arrow functions we cannot use duplicate parameters at all.

 function myFun(a, a, a){
  console.log(a);
 }
 myFun(12, 10, 23); //23

 const myFun2 = (a, a, a) => {
   console.log(a);
 }
 myFun2(12, 10, 23); //SyntaxError: Duplicate parameter name not allowed in this context

No yield keyword

We cannot use arrow functions as a generator function. Because the yield keyword may not be used inside the arrow function.Except when permitted within functions further nested with it.

Final Words

And that’s it for this blog.

I hope you’ve found this blog a good referencing resource and thank you for reading.

If this blog was helpful, please do like, comment and share. Thanks, see you in the next blog.✌️