Arrow Function in JavaScript

Arrow function is a different syntax for creating JavaScript functions. It was introduced with ES6.

There are few benefits to them – they are much more concise than regular functions, they have implicit return which lets us write lesser code. We will get more into that later on.

Arrow Function in JavaScript

Arrow Function Syntax

A normal JavaScript function looks like this with the function keyword –

You might also notice functions assigned to variables.

Now, arrow functions looks like this –

Here, we are storing it in a constant and then on the right side of the equals sign. That’s the arrow function syntax.

A list of arguments but here there are none. It could hold some arguments and then an arrow. So an equal sign and a greater than sign and then the function body.

The arrow functions syntax is a bit shorter than the normal syntax since it omits the function keyword.

Arrow Function Examples

Let’s look at some examples for a better understanding of arrow functions.

Suppose, we have an array with some birth years and we want to find the age from them.

Now, to find the age from this array, normally we would do this.

This will show the ages the in the console as an array.

Now, with arrow function we can do the same in a more beautiful and quicker way. Let’s see how.

And that’s it.

Let’s look into that a bit.

Here we have:

  • Argument ‘yr’
  • Arrow Operator ‘=>’
  • Return Statement ‘2018 – yr’

This will produce the same result as the previous code block.

So for a simple callback function like this here with only one argument, it really is as simple as this.

Let’s look at another quick little arrow function example.

We want to multiply a number with 15. And it’s as simple and short like that with arrow function.

There’s no function keyword, no return keyword, no parenthesis or curly braces. All we need is the argument, the arrow and what we have in our return statement.

But if you have more than one arguments then you will need the parenthesis. For example,

So, that’s how we have to do if we have multiple arguments.

Check out all the examples in one file here.

Arrow Function Solving Issues with ‘this’ Keyword

Arrow function solve a lot of the issues we had with the ‘this’ keyword in JavaScript.

If you’ve worked with JavaScript a bit you probably know that ‘this’ keyword doesn’t always refer to what you might have expected it to refer to while writing your code.

When you use ‘this’ inside the arrow function it will always keep its context and will not change it unexpectedly on run time.

Unlike normal functions, arrow functions don’t get their own ‘this’ keyword. They simply use the ‘this’ keyword of the function they are written in. That’s why, it’s said that they have a lexical ‘this’ variable.

Here’s a video you can watch for a better understanding on this. No Pun Intended.

[responsive_video type=’youtube’ hide_related=’1′ hide_logo=’1′ hide_controls=’0′ hide_title=’0′ hide_fullscreen=’1′ autoplay=’0′][/responsive_video]


I hope all these makes sense to you and it was enough to convince you to start using arrow functions.

If there is anything you would like to add, please don’t hesitate to share them through comments.

Leave a Reply

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