ES5 Function To ES6 Arrow Function
Tags: javascript, beginners
Published: 2020-06-14 04:38:22

<link rel="canonical" href="[https://medium.com/@codesprintpro/es5-function-to-es6-arrow-function-d002cf4165ed](https://medium.com/@codesprintpro/es5-function-to-es6-arrow-function-d002cf4165ed)" />
_With the introduction to ES6, there are many new features added in JavaScript one of them is Arrow Function._ In this blog, we will discuss in detail how to use this feature. It’s best suited for someone new to JavaScript.
### Topic Covered

-   Introduction to Arrow Function
-   Arrow Function Without Parameter
-   Arrow Function With Parameter
-   Return Value from Arrow Function

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uezuk5xln4rfq82xisis.png)

#### Introduction to Arrow Function

The arrow function concept was introduced in ES6. With the help of this, we can write a shorter and concise syntax for a normal function which we used to write in ES5.

Normal function to print “Hello World”

    var printer = function(){  
      console.log("Hello World");  
    }  
    printer();

Arrow function to print “Hello World”

    var printer = () => {  
      console.log("Hello World");  
    }

Note: In arrow function, if there is only one statement then we don't even need to use ‘{}’ curly braces.

    var printer = () => console.log("Hello World");

#### Arrow Function Without Parameter

This type of arrow function is similar to what we have written in the above examples. But remember:

-   Even if there are no arguments to the function ‘()’ parenthesis should be there.
-   If the function is of single statement ‘{}’ curl braces can be removed
-   If the function has multiple statements the ‘{}’ curl braces is a must.

#### Arrow Function With Parameter

In this type of arrow function, we pass the arguments inside the ‘()’ parathesis, it’s just that function keyword is not there.

    var getSum = (myVar1, myVar2) => {  
      var result = myVar1 + myVar2;  
      return result;  
    }  
    getSum(5, 10);

We can write the above function is a single line by directly returning the result.

    var getSum = (myVar1, myVar2) => { return myVar1 + myVar2 };  
    getSum(5, 10);

Note: The _return_ keyword is by default in a single line statement in case of arrow function. That’s the reason we didn’t remove the _return_ keyboard, as in a single line statement without curl braces return keyword throws an exception.

    var getSum = (myVar1, myVar2) => return myVar1 + myVar2;  
    //this will throw exception saying unexpected token 'return'

If we want we have to remove the return keyword and ‘{}’ curl braces together.

    var getSum = (myVar1, myVar2) => myVar1 + myVar2;  
    getSum(5, 10);

#### Return Value from Arrow Function

In the case of multiple line functions, we have to write the return keyword explicitly for returning a value.

    var getIteratorSum = (itr) => {  
      var result = 0;  
      for(var i =0 ;i <itr; i++){  
        result += i;  
      }  
      return result;  
    }  
    console.log(getIteratorSum(5));

This ends our discussion on the arrow function feature in ES6.

_Follow me over Medium for such articles  [@CodeSprintPro](https://medium.com/@codesprintpro)_