Arrow functions in Javascript Explained!

WTF is an arrow function in javascript?

In this blog, let us understand the arrow function in javascript. We will also differentiate between regular function and arrow function.

What exactly is an Arrow Function?

Arrow function was introduced in ES6. It is an alternate way to write a shorter syntax than a regular function.

Regular function

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

Arrow function

const add = (a, b) => a + b;
console.log(add(2, 3));

How to write an arrow function?

Basic Syntax:

const arrowFunction = (param1, param2, ...paramN) => {
  //function body
};
console.log(add(2, 3));

Where:

• arrowFunction: Name of the function
• param1, param2, ...paramN: Arrow function parameters.

If the arrow function has only a single parameter, we can ignore the parenthesis.

const print = (a) => console.log(a);
print();

If the arrow function has no parameters, the parenthesis cannot be ignored.

const print = () => console.log("Parenthesis cannot be ignored");
print();

The implicit Return

The body of a regular function is contained within a block using curly brackets {}, and the code execution ends when it encounters the return keyword.

function add(a, b) {
  return a + b;
}

While Arrow Function introduced Implicit Return which allows omission of the curly brackets {} and the return keyword.

const add = (a, b) => a + b;

Things to remember when using Implicit Return

1. Curly brackets {} wrapped around the function body no longer return implicitly and requires the return statement. This means if the function is wrapped within curly brackets {}, then we'll have to add the return keyword. A snippet is given below:

const add = (a, b) => {
  return a + b;
};

2. If the function is supposed to return an object literals then, you'll have to use parenthesis so that the curly brackets of the Object literals are not mistaken for the opening of a function.

const objLiterals = () => ({ name: "Pratap" });

3. If your arrow function contains more than one statement all the statements have to be wrapped in a curly bracket {} and then use the return keyword.

Arrow function VS Regular Function

The argument object

In regular function, arguments keywords can access the arguments object.

function add(a, b, c) {
  console.log(arguments);
}

add(1, 2, 3); //[Arguments] { '0': 1, '1': 2, '2': 3 }

Whereas Arrow functions do not have an arguments binding.

const add = (a, b, c) => {
  console.log(arguments); // referenceError: arguments is not defined
};

Duplicate Parameters

In regular function, we can pass duplicate parameters, but in arrow function, we can never pass duplicate parameters.

function add(a, a) {
  //This works
}

const add1 = (a, a) => {
  // This does not works
};

Hoisting

In a regular function, the function gets hoisted at the top. The function can be called before defining it.

add();
function add(a, a) {
  //This works
}

While in the arrow function, the function gets hoisted exactly where it was hoisted. So if you try to call the function before its initialization, it will throw a referenceError.

add();
const add = (a, a) => {};
//

The binding of this keyword

const vehicle = {
  name: "i10",
  year: "2021",
  regularFunction: function () {
    console.log(`The vehicle ${this.name} was bought on ${this.year}`);
  },
  arrowFunction: () => {
    console.log(`The vehicle ${this.name} was bought on ${this.year}`);
  },
};

this in regularFunction() method refers to the vehicle object itself whereas in arrowFunction() method this refers to what this points in the outer function.

As this part is a bit confusing, I'll try to prepare a youtube tutorial related to the arrow function.

To sum it up

This is it from this article. If you'd like to know more about arrow function and regular function, please drop a comment.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Please don't hesitate to drop a comment here if I miss anything. Also, let me know if I can make the post better.