ES5 Function To ES6 Arrow Function

#javascript #beginners

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

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

Top comments (7)

BasseyIsrael • Jun 14 '20

Thanks a lot for this.... I'm a python developer and I'm new to JS.
I've not really taken a dive into ES6 but I noticed the arrow notation in some people's codes.
This made me understand it well enough. 👍

Ben Calder • Jun 14 '20

If you've already got experience with another language I highly recommend You don't know JS as a really good resource to understanding the language. You get to skip all the usual beginner stuff ;)