ES5 Function To ES6 Arrow Function

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

Comments

[BasseyIsrael]

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. 👍

[Sachin Sarawgi]

Thanks, BasseyIsrael for this comment.....this will keep me motivated to write more and do more for the community.

[BasseyIsrael]

You're very welcome Sachin Sarawgi.
I look forward to learning more from you.

[Ben Calder]

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 ;)

[BasseyIsrael]

Wow.
Thank You very much for this Ben Calder.
This is a very good one!

[Ben Calder]

It's important to note that arrow functions also serve another more significant purpose: they preserve the 'this' from the outer scope

[Sachin Sarawgi]

A very important point thanks for mentioning it Ben.