Best of Modern JavaScript — Arrow Function Syntax

Photo by Matt Ridley on Unsplash

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at arrow functions in JavaScript.

Arrow Function Syntax

We can create arrow functions by using the following syntax:

() => {
  //... 
}

or

x => {
  //...
}

or

(x, y) => {
  //... 
}

If we have one parameter, then we don’t need the parentheses.

We can specify the body by writing:

x => {
  return x * x
}

or:

x => x * x

Arrow functions are great for reducing the verbosity of our code.

For example, we can reduce:

const squares = [1, 2, 3].map(function (x) { return x * x });

to:

const squares = [1, 2, 3].map(x => x * x);

Omitting Parentheses Around Single Parameters

We can remove the parentheses if we have a single parameter that doesn’t have a default value.