Intro to Arrow functions in ES6

ECMAScript is a trademark scripting language specification standardized by Ecma International. Shortly referred simply as ES. ES6 is the 6th version of standardized Javascript released by ECMA Internationals. ES6 is been heavily adopted by the famous Javascript technologies such as Angular , React etc. If you’re looking to find and learn more about ES6, checkout this book.

There are a lots of things which make ES6 very special and different than the previous version of Javascript, ES5, the Javascript that most people know today. However in this post I’ll focus on one of the special features of ES6 , the arrow functions.
Let’s have a short intro to what are arrow functions and how they are different from traditional Javascript functions and then we will discuss the usage of it.

This is a classical Javascript function

 var greet = function(name){
    return `Hello there,  ${name}`; 
}

And this is the same function defined in arrow function notation

    greet = name => `Hello there, ${name}`;

Whoa ? This looks intimidating ! Well, using arrow notation you can define your function just using a set of brackets and parenthesis, precisely:

let greet = () => {return "hello world";};
greet(); //prints out 'hello world' 

Here ‘greet’ is a function defined using ‘let'(let and const are the new ways of defining a variable in ES6). Then there are function parentheses ‘()’, and after that there’s the arrow notation ‘=>’. The arrow notation refers to the function body enclosed in ‘{}’.

So what if we need to pass one or more parameters to this arrow function ?
To pass parameters we will simply enclose the parameters in the function parenthesis ‘()’;

let greet = (name) => {return `hello there, ${name}`; };
greet("adam"); //will print out 'hello there, adam' 

For multiple parameters we just keep on adding them to the function parenthesis, separated by commas.

let greet = (firstName, lastName) => {return "hello there", firstName + " " + lastName;}; 
greet("John", "Cena"); //will display 'hello there, John Cena'

 

Caveats to Arrow functions

There are few more things that you should notice about arrow functions that will help you understand arrow functions a bit more precisely.
1) If there is only one parameter to the function , you can omit the function parenthesis. However you are required to use function parentheses if there are no or multiple parameters.

let greet = name => {return `Hello there,+ name`}; // one parameter 
let greet = () => {return "Hello there"; }; //no parameter
let greet = (firstName, lastName) =>  //multiple parameters
            {return `hello there, ${firstName} ${lastName}`}  

2) If the function body consist of a single return statement, you can omit the ‘return’ keyword and leave the function body with the statement.

let greet = name => `hello world, ${name}`; 
greet("adam"); //displays 'hello world, adam'

 

So Why Use Arrow Functions ?

From the above mentioned facts we reach the following conclusion, that arrow functions are used because:

  • Arrow functions are concise
  • Arrow functions allow implicit return, which makes them even more efficient and elegant

 

Let’s walk through a practical example of these facts:

Let’s have a look at this code,

var names = ['bob', 'elice', 'adam', 'elizabeth']; 
var programmers = names.map(function(name){
    return `${name} is a good programmer`; 
});
console.log(programmers); 

In the above code example we have an array of ‘names’. We have used a map function to append ” is a programmer” to transform each item of the array. We haven’t used any arrow function in this example.

Let’s write the same example using arrow function notation in ES6 and see how concise and elegant the code becomes.

const names = ['bob', 'elice', 'adam', 'elizabeth']; 
let programmers = (names.map)(name=> `${name} is a programmer`);
console.log(programmers);

So this was a brief intro to Arrow functions and Why should you use them.Arrow functions are great to write more precise and elegant code. But that also leave us with a caveat that arrow functions cannot be, and should not be used everywhere. In the next post I’ll discuss when and when not to use arrow functions in ES6. I hope that was useful for the people new to ES6 and arrow functions. Do let me know about your thoughts and suggestions in the comments 🙂 Stay tuned for my next post by subscribing to this blog 🙂 Thanks.

 

Shabbir

I'm student of computer Sciences and Self Taught Developer, dedicated to Self Education via MOOCs :)

 

Leave a Reply

Your email address will not be published. Required fields are marked *