Getting Started with Modern JavaScript — Arrow Functions

Michael Karén
4 min readSep 2, 2020

One of the most popular new features in ECMAScript 2015 is arrow functions. Is it because of the new cleaner syntax or the sharing of this with the parent scope? Maybe both. Let’s look into them in more detail.

Syntax

The first factor that influenced the introduction of arrow functions was a shorter function syntax. The syntax can look a bit different depending on the function. Let’s see some options!

Here is a function written in ES5 syntax:

var sum = function(a, b) {
return a + b;
}
sum(1, 2) // -> 3

And here is the same function as an arrow function:

const sum = (a, b) => a + b;sum(1, 2) // -> 3

As we can see the arrow function makes the code much more concise when we have one-line expressions. Due to implicit return we can omit the curly braces and return keyword.

If we have multiple lines in the function we always have to use the curly braces and return:

--

--

Michael Karén

Frontend Architect • JavaScript Enthusiast • Educative.io Author • ngVikings organizer.