Arrow Functions

Arrow Functions

Arrow function was introduced in ES6 using a new syntax for declaring functions called the arrow syntax. This new syntax uses less verbose syntax.

Arrow function can easily identified by the arrow symbol ‘ => ’ from where it gets its name. As part the syntax and rules for writing arrow functions is that the parameters come before the arrow element and the main body of the function comes after.

Arrow functions are always anonymous, and you need to assign them to a variable, so you can refer to them.

Advantage

There are numerous advantages of using arrow functions over other function declaration methods:

-They are much less verbose
-Do not need to use parentheses for single parameters
-The body of the function does not need to be placed inside a block if it is only one line
-If the return statement is the only statement in the body of the function, the return keyword is not required
-They do not bind their own value of this to the function

Example:

const square = x => x*x;

In this example the ‘x’ did not need to be in parentheses because is only one parameter; multiple parameters needs to go inside parentheses.

Example with two parameters:

const add = (x,y) => x = y;

But if the function does not require any parameters you can use empty parameters before the arrow symbol:

const hello = ( ) => alert(‘Hello World!’);

In all these examples the function fits onto one line, so there is no need to put them inside a block. But for longer functions you will require to use curly brackets to define the body of the function and the return keywork at the end.

const tax = (salary) => {
const taxable = salary – 5000;
const lowerRate = 0.25 * taxable;
taxable = taxable -15000;
const higherRate = 0.4 * taxable;
return lowerRate + higherRate;
}

As you can see the benefit of using arrow functions is lost when using it in a longer function. Arrow functions are a better fit for short and anonymous functions.