Arrow functions is the new way of writing concise functions in Javascript, having been introduced in ES6 and also being one of the standout feature in ES6. The arrow function is denoted by = >, they always add synthetic sugar and they are also time savers.

In this article, let's take a deep dive on getting to understand better the arrow functions used in ES6 while comparing with ES5.

Multiple Parameter

The most common arrow function syntax is when we have multiple parameters. In this case we have two parameters, we'll use the sum () in this example:

In ES5:

While in ES6:

One parameter

In this example we can use the birthday() with one parameter age, that requires input to return the string.

In ES5:

While in ES6:

The arrow function syntax essentially does the same thing. We need to enclose the name parameter within the parentheses before the arrow and omit the return keyword in the function block:

No parameter

The simplest arrow function syntax is when the function doesn’t have any parameters. In the example below, the ES5 syntax declares a function expression and assigns it to the randomNumber variable:

In ES5:

While in ES6:

In the arrow function syntax, the curly brackets and the function and return keywords disappear. Now, the whole function takes just one single line. The empty parentheses indicate that the function doesn’t have any parameters while the arrow function binds the body.

Arrow functions used in Object Literals

We can also use the arrow function syntax to declare functions that let users set the value of object literals. The setTeam() below allows users to set the name and league of the team:

Used in ES5

Used In ES6

As you can see down below the arrow function makes the code more concise, since it only takes one line to define the function.

Arrow function vs. regular function

There are two main differences between an arrow function and a regular function.

1. First, in the arrow function, the this, arguments, super, new.target are lexical. It means that the arrow function uses these variables (or constructs) from the enclosing lexical scope.

2. Second, an arrow function cannot be used as a function constructor. If you use the new keyword to create a new object from an arrow function, you will get an error.

In Conclusion

Arrow functions provides a useful syntax to write function expressions in JavaScript. The arrow function syntax has many use cases, so it has quickly become the used ES6 feature of the JavaScript community. It helps in improving readability of the code and also saves a lot of time while coding.

Thank you for reading this article 🎉, see you on my next blog .👋