In the last article, we talked about the use of let and const keywords for a variable declaration which was introduced in ES6. Today we will talk about Arrow functions another key update from ES6.

An arrow function is basically the concise way of writing any function with or without any parameters.

In this article, we will see a few examples as to how we can minimize or rather concise our code with arrow functions which may seem complex at first but is currently one of best practice for javascript developers in the industry.

We will be looking at a few examples and see how can we convert any function to an arrow function.

Function with two parameters

function add(n1,n2) {  
   return n1 + n2;  
}  
let sum = add(2,4)  
console.log(sum)

So here we have a function add() which takes two arguments and returns the sum of two numbers and stores in a variable sum and which is further logged to the console.

Now if we want to convert this function to an arrow function, there are few small changes which we need to make. Remove keywords like ‘function’ or ‘return’ from the code and bring in the arrow. Let’s see how exactly this function looks after a makeover.

let add = (num1,num2) => num1 + num2  
console.log(add(17,6))

Let’s take a moment to digest what just happened. We removed the ‘function’ and ‘return’ keyword, added the arrow symbol => and stored the resultant function in a variable we defined as add.

As you can see we have changed a part of the code which was taking 5 lines earlier down to just 2 lines, which might not seem to make much of a difference here but can reduce any existing code by 30–40% fewer lines of code when implemented.

Now let’s take up another example with one parameter and see how can we change it to arrow function and what will be the resultant function be like.

Function with one parameter

function isPositive(num) {  
    return num >= 0  
}  
let positive = isPositive(-10)  
console.log(positive)

//Arrow function with one parameter  
let isPositiveNum = (num) => num >=0  
console.log(isPositiveNum(20))

In this function isPositive() we take one number as a parameter and check if the number is positive or not and log the result in the console as true or false. Again a function that takes around 4 lines to define is concised with the help of arrow function.

In the arrow function, we define a variable named isPositiveNum and take one argument num in the function and get our result of the comparison and then on the next line, we log the result.

Similarly, if we look at another example where we are not using any parameter and the function is used just to return a string or any value, the resultant function will look like the following :

Function without parameter

function print() {  
   return "This is a sample function";  
}  
let msg = print()  
console.log(msg)

The above function is a simple function named print() which returns a string “This is a sample function” and stores in the variable msg and logs the same to the output screen.

The first step of converting any function into an arrow function as I said earlier is removing the function keyword in it and adding an arrow after the function brackets and removing any references of return if present in the code.

let print = ()  => "This is sample arrow function"  
console.log(print2())

If you see the above snippet and compare it with the first example. You can see we have created a variable ‘print’ and saved the result of the arrow function which returns a text “This is sample arrow function” and finally logs the output to the console.

In conclusion, I agree this is one of the tricky changes which was brought along with the very popular ES6 update, but yet again an important change to make a code concise and clean. If you refer to different projects in GitHub which are recently posted, most of them are lined with arrow function.