Arrow Functions

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

Syntax

First arrow functions were introduced to provide 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 you 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 the keyword.

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

const printSum = (a, b) => {
  const sum = a + b;
  console.log('Answer: ' + sum);
  
  return sum;
}

printSum(1, 2); // -> Answer: 3

Parentheses are optional when only one parameter is present:

...