Arrow Function in ES6

Facebooktwitterredditpinterestlinkedinmailby feather

Arrow Function in ES6

 An Arrow function is a new concept recommended in ECMAScript 2015. It is also called “Fat Arrow Function.” It helps us to write the function more accurately. This function allows us to write short syntax of the function.

The Arrow function also makes the code structured and easy to read. This function can be used as an anonymous (a function without having a name) function. It does not return any statement and also can be declared without using a function keyword. 

The developers can also use the arrow function as a constructor. The context of an arrow function is defined in a static and lexical manner. In various languages, the arrow function is also called the Lambda function.  The arrow function does not contain prototype property, and we cannot use it with any new keyword.

Syntax

The syntax of Arrow function contains the following three parts-

  • Parameters: The arrow functions may or may not have the parameters.
  • The Fat Arrow Function (=>) / Lambda Notation: It is the notation of the arrow function.
  • Statement: It represents the group of instructions of the function.

We will try to understand it with the help of an example.

Example

In the above example we have defined three functions; Function Expression, Anonymous Function, Arrow Function.

Output

After execution of the code, we got the following output:

There are also some syntactic variations of Arrow function given below-

  1. For the single parameter, the parentheses are optional

For Example

Output

After the execution of the example, we got the following output:

  • For the single statement the optional and empty braces (If there is no parameter)

For Example

Output

After the execution of the code, we got the following Output:

Arrow function with Parameters

In the ECMAScript program, if we need to pass multiple parameters, then we pass them within the parentheses.

Example

Output

Arrow Function in ECS6

The Arrow function with default parameters

ECMAScript provides a facility to initialize a parameter with default values if the value is undefined or null.

Here, we have an example to understand it better.

Example

Output

After the execution of the code, we got following result.

Arrow Function in ECS6

Arrow function with rest parameter

The rest parameter allows us to pass a number of values in the function having the same type. The rest parameter also works like a procurator for various arguments that have the same type.

We can declare the rest parameter; the name of the parameter must be prefixed with the spread operator. Let’s try to understand it with the help of the following example.

Example

Output

After the successful execution of the code, we got the following output:

Arrow Function in ECS6

Arrow function without parentheses

We can define an arrow function without parentheses if we have only a single parameter to pass. It means parentheses are optional.

Example

Output

After the execution of the example, we got the following output:

Arrow Function in ECS6

Advantages of Arrow function

There are the following advantages of ECMAScript 6.

The arrow function is used to wrap the content statically or in a lexical manner. It is difficult to handle this keyword in an arrow function as compared to normal function. The keyword this is not wrapped in an arrow function. The keyword this is used to show an object in regular function. The object should be a window, a document, a button, or any other. In the arrow function, the keyword this is used to present the object that determines the arrow function.

Example

In ECMAScript 6 – With the arrow function

In the above code, we have a class with an array of values. If the value is less than 20, then it should be pushed into the parent queue.

Example

In ECMAScript 5

The syntax arrow function always helps us to write less program code. It means it allows decreasing the quantity of the code.

The return statement and the function braces are optional for a single line function. In ECMAScript 5, it is mandatory to define the return statement inside the function, but in ECMAScript 6, there is no need to determine the return statement for the single line function.

Example

In ECMAScript 6

Example

In ECMAScript 5

Important Point: If we do not use curly braces with a single statement, then there is no need to use the return statement, but if we use then we must have to use the return keyword.

We will try to understand it with the help of an example.

Example

With return statement

Output

After the execution of the code, we got the following output:

Arrow Function in ECS6

Without return statement

Output

After the successful execution of the example, we got the following output:

Arrow Function in ECS6
Facebooktwitterredditpinterestlinkedinmailby feather