Why do we use Arrow Functions in JavaScript?

The Arrow function is one of the most important concepts that was introduced in Javascript with ES6. For anyone who is a beginner who has been declaring functions in the usual way or the ES5 way in Javascript, the term Arrow function can seem to be overwhelming at first (sure it was for me). Let us understand how the Arrow function is used and how it differs from the traditional way of declaring functions.

How do we use Arrow Function?

Arrow functions are short syntax introduced with ES6 that are used similarly in the way we use Function Expressions.

function traditional() {
    return "Hello Amigos!"
}

traditional(); //Output: Hello Amigos!

The above example depicts the way we have been declaring functions the usual way or in the ES5 way to be precise, and since it includes the keyword 'Function' , it helps us in understanding that we are writing a Function.

However, in ES5, we were allowed to declare anonymous functions (Functions without any name) with the use of Function Expressions.

const funcExpression = function () {
    return "Hello Amigos!"
}

funcExpression(); //Output: Hello Amigos!

The above examples can be written in a more concise and with less code using the Arrow Function.

const arrowFunc = () => "Hello Amigos!"

arrowFunc(); //Output: Hello Amigos!

Did you notice the difference between the two examples? We did not even have to use the keyword function to declare an anonymous function in this case.

We are using a symbol => , Also neither did we use the keyword return to return the value "Hello Amigos!" nor did we wrap it up inside {..}. Let us see why we omitted them in this case :

In Arrow functions, the symbol => means that the left part of the symbol i.e. = denotes the input of the function or parameters to be precise which is () in the above case, and the values to the right of the symbol > denotes the output of the function which is basically "Hello Amigos!" in the above example.
We didn't use {..} in the function body because there was only one line in the function body i.e. "Hello Amigos" and in arrow functions, if there is only one line in the function body we need not use {..}
We don't have to use the return statement as well whenever there is only a single line in the function body and we are not using {..} inside it. This happens because the only line present is by default returned in such case.
However, if there is more than one line in the function body, we need to use both {..} and return inside the function body. For example:

    const newFunc = (a, b) => {
     let c = a + b;
     return c;   
    }

    newFunc(5, 2); //Output: 7

We call the function using a function expression in a very similar way like we used to do in ES5 traditional functions.

Arrow Function with no parameters

In the above example, we saw an arrow function without any parameters. Let us see how it differs from the ES5 functions without any parameters.

function getNum() 
    {
    return 2;
     }

getNum(); //Output: 2

is written as below in Arrow functions,

const number = () => 2

number() //Output: 2

With one parameter

function callIs(num) 
    {
    return num == 1
    }
    callIs(1) //Output: True

The above ES5 function with one parameter can be written as below in Arrow functions,

const callIs = num => num == 1

callIs(2) //Output: False

We can notice that in the above case, we didn't put num inside () since it is the only parameter and in case of only one parameter the brackets can be omitted.

With two parameters

function greater(a,b) 
{
    return a > b;
}

greater(2,3) //Output: false

The above ES5 function with two parameters can be written as below in Arrow functions,

const greater = (a, b) => a > b;

greater(2, 3); //Output: false

Since we used two parameters in the above case, we have wrapped them inside ().

Arrow Functions with Objects:

We can use the arrow function to declare a function with the help of which a user can set the value of an object literal.

const setName = (username, age) => ({ employeeName: username, employeeAge: age})

setName("Rajesh", 54)

Note that we have wrapped up the object that is to be returned inside () so that Javascript doesn't confuse the {} of the objects as a function block.

Arrow Functions with Arrays:

We can also manipulate the values of an array using the Arrow Functions.

const array = [ 1, 2, 3, 4, 5]
const manipulate = () => 
{
    let newArray = array.map(element => element * 2)
    return newArray;    
}

manipulate(); //Output: [2, 4, 6, 8, 10]

Conclusion:

We can conclude from the above-given examples that using the Arrow Function helps us in writing less and more concise code by giving us a shorthand way of writing function expressions in JavaScript as compared to the traditional method of writing functions.

Thank you for reading.

Rahul Pandey