JavaScript Arrow Functions

_Today, We will learn how to use the JavaScript arrow function to write more concise code for function expressions.

---

Introduction

ES6 arrow functions provide you with an alternative way to write a shorter syntax compared to the function expression.

The following example defines a function expression that adds two numbers:

Arrow Function Example

In above example, The arrow function has one expression x + y so it returns the result of the expression.

However, if you use the block syntax, you need to specify the return keyword:

The typeof operator returns function indicating the type of arrow function.

---

Arrow Functions With Multiple Parameters

If an arrow function has two or more parameters, we need to use the following syntax:

For example, To sort an array of numbers in the descending order, we use the sort() method of the array object as follows:

The code is more concise with the arrow function syntax:

---

Arrow Functions With Single Parameter

• If an arrow function takes a single parameter, we can use the following syntax:

(parameter1) => { statements }

• Note that, We can omit the parentheses as follows:

parameter => { statements }

The following example uses an arrow function as an argument of the map() method that transforms an array of strings into an array of the string’s lengths.

---

Arrow Functions With No Parameter

If the arrow function has no parameter, we must use the parentheses, like this:

( ) => { statements }

---

Line Break Between Parameter Definition and Arrow

JavaScript doesn’t allow us to use a line break between the parameter definition and the arrow ( => ) in an arrow function. The following code produces a SyntaxError:

However, the following code works perfectly fine:

JavaScript allows us to use the line break between parameters as shown in the following example:

---

Summary:

Arrow functions are handy for one-liners. They come in two flavors:

1. Without curly braces: (...args) => expression – the right side is an expression: the function evaluates it and returns the result.
2. With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the function, but we need an explicit return to return something.