Arrow functions in JavaScript | Explained

The arrow functions were included in JavaScript with the release of ECMAv6 back in 2015. The arrow function is a way of creating a function with the main goal of reducing the number of letters required to create a function. Arrow functions are named “arrow” because they use a keyword made up of two special characters, the “=” and the “>” which forms a shape that looks like an arrowhead “=>”.

Creating a function with Arrow Function

Creating a function with the Arrow function method includes the following steps:

• First, time in the name of the function or the identifier of the function
• After that, set the name of the function equal to the parameters required by the function enclosed in parenthesis
• After that use the arrow symbol “=>” to denote the keyword function
• After the arrow symbol, simply include the body of the function enclosed within {curly brackets}.

So an arrow function looks like this:

funcName = (para1,para2,para3..) => {

//Body of the function

}

Function Declaration & Function Expression vs Arrow Functions

Normally, a function declaration to create a function that adds two numbers passed inside its arguments looks like this:

function getSum(num1, num2) {

return num1 + num2;

}

And a function expression to create the same function would look like this:

getSum = function (num1, num2) {

return num1 + num2;

};

There are a few common things in both of these methods for creating a function:

• The name or the identifier of the function
• The keyword function
• Parameters inside parenthesis
• Body of the function inside curly brackets
• Assignment operator in the case of function expression

Now, if the same function was to be created with the Arrow functions it would have the following sequence:

• The name or identifier
• Assignment operator
• Parameters with parenthesis
• Arrow head
• Body of the function

So the same getSum() function created with Arrow function will look like this:

getSum = (num1, num2) => {

return num1 + num2;

};

It is pretty visible at first glance that the Arrow function uses way less letters or characters to create a function then both function declaration and function expression. And the main reason for that is that instead of using the keyword function, an arrow symbol is used.

Function Call for Functions Created With Arrow Function

The function doesn’t now change whether the function was created using the function declaration, function expression, or even with the Arrow function. For a function named as getSum (as created above) with two parameters is always going to be:

result = getSum(num1Val, num2Val);

The Fat Arrow

The arrowhead symbol of the arrow function is often referred to as the “fat arrow” because instead of using a hyphen “-” for creating the arrowhead an equal “=” which makes the arrow head look far, hence the name Fat Arrow.

Wrap up

An array function is a way to create functions in JavaScript, which was released in the ESMAv6 version of JavaScript. This method of creating a function replaced the keyword function from function creation and used an arrow symbol “=>”, hence the name arrow function. The arrow function doesn’t change the way a function is called to perform the task written inside it. This article has explained arrow functions or fat arrow functions in detail, along with a brief comparison with other forms of method creation.

from https://ift.tt/Sl2YPQO