JavaScript Arrow Function

Normally in JavaScript ES5, we write functions with a function keyword, a name with a pair of parenthesis() for parameters and lastly, the functions body with a block of code surrounded by curly braces{}. For example -

function greet(name) { 
  return 'hello' + name;
};

But the ES2015 mostly known as ES6 meets us with a new feature called the Arrow Function. From the name, you might have guessed that there’s gonna be an Arrow⇒ somewhere. And you are right as always!

In ES6 we write function in a very shorter way by arrow function. First of all, we don’t need the function keyword anymore. Most important thing is arrow functions don’t have names. They just consist of parameters (if needed) and body. Just need to put an arrow between them. So, we can write an arrow function like this -

(name) => {return 'hello' + name}

How simple is that! Good news is we can make it even more simple by throwing away the parenthesis. Remember if you have more than one parameters, parenthesis are required. Single parameter can work without parenthesis. So our simplified function looks like -

name => {return 'hello' + name}

Guess what! We’re gonna make this more shorter. How? Yeah, those curly braces. You can throw them away if you have single line body. And surprisingly, you don’t even have to write the return keyword. But again there is a But! If your function body has multi line and if you have to use the return keyword, keep in mind that body must have those curly braces. So much talk, let’s see how our final, shorthand, handsome function looks like -

name => 'hello' + name

Well that’s it with our Arrow Functions. Let me publish my first blog/story whatever this is. Stay blessed. Assalamualaikum :)