ES6 Arrow Function

Arrow functions are introduced in ES6, which provides you a more accurate way to write the functions in JavaScript. They allow us to write smaller function syntax. Arrow functions make your code more readable and structured.

Arrow functions are anonymous functions (the functions without a name and not bound with an identifier). They don't return any value and can declare without the function keyword. Arrow functions cannot be used as the constructors. The context within the arrow functions is lexically or statically defined. They are also called as Lambda Functions in different languages.

Arrow functions do not include any prototype property, and they cannot be used with the new keyword.

Syntax for defining the arrow function

There are three parts to an Arrow Function or Lambda Function:

• Parameters: Any function may optionally have the parameters.
• Fat arrow notation/lambda notation: It is the notation for the arrow (=>).
• Statements: It represents the instruction set of the function.

Let us try to understand it with an example.

In the following example, we are defining three functions that show Function Expression, Anonymous Function, and Arrow Function.

Output

It is a Function Expression
It is an Anonymous Function
It is an Arrow Function

Syntactic Variations

There are some syntactic variations for the arrow functions that are as follows:

• Optional parentheses for the single parameter

Output

140

• Optional braces for single statement and the empty braces if there is not any parameter required.

Output

Hello World

Arrow Function with Parameters

If you require to pass more than one parameter by using an arrow function, then you have to pass them within the parentheses.

For example

Output

100 200 300

Arrow function with default parameters

In ES6, the function allows the initialization of parameters with default values, if there is no value passed to it, or it is undefined. You can see the illustration for the same in the following code:

For example

var show = (a, b=200) => {
    console.log(a + " " + b);
}
show(100);

In the above function, the value of b is set to 200 by default. The function will always consider 200 as the value of b if no value of b is explicitly passed.

Output

100 200

The default value of the parameter 'b' will get overwritten if the function passes its value explicitly. You can see it in the following example:

For example

Output

100 500

Arrow function with Rest parameters

Rest parameters do not restrict you to pass the number of values in a function, but all the passed values must be of the same type. We can also say that rest parameters act as the placeholders for multiple arguments of the same type.

For declaring the rest parameter, the parameter name should be prefixed with the spread operator that has three periods (not more than three or not less than three).

You can see the illustration for the same in the following example:

Output

100 200,300,400,500,600,700,800

Arrow Function without Parentheses

If you have a single parameter to pass, then the parentheses are optional.

For example

Output

Hello World

Advantages of Arrow Functions

There are some advantages of using arrow functions that are shown in the below image:

Let us try to elaborate on the advantages which are available in the above image.

1. It reduces the code size: When we use the syntax of arrow function, the size of the code gets reduced. We can write less amount of code by using the arrow function.

2. Return statement and Functional braces are optional for single line functions:In ES5, we need to define the return statement in the functions, but in ES6, we do not require to define the return statement for single-line functions. Functional braces are also optional for the single-line functions.

For example

In ES5

In ES6

Note: If you are not applying curly braces on the single statement, then you do not require to use return, but if you are using curly braces even on the single statement, then you must have to use the return keyword.

You can understand it in the following example:

Without Return Keyword

Output

undefined

With Return Keyword

Output

25

3. Lexically bind the context: Arrow function binds the context lexically or statically. The handling of this is different in arrow functions as compared to regular functions. In the arrow function, there is not any binding of this. In regular functions, this keyword is used to represent the objects that called the function, which could either be a window, a button, or a document or anything.

But with arrow functions, this keyword always represents the object that defines the arrow function.

Let us try to understand it with the following piece of code:

For example

Consider a class having an array of numbers, and if the number is less than 30, then we will push them into the child queue.

In ES5, it can be done as follows

In ES6, it can be done by using the arrow function

So, by using the arrow function, we do not require to bind it implicitly because it performs automatically by the arrow function.

As we have seen, the arrow function makes the writing of function less complicated, and it also reduces the number of lines.