JavaScript Arrow Functions
Tags: codenewbie, beginners, javascript, devjournal
Published: 2020-12-13 14:51:42

_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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g6na0hlswzo258rbzqo7.PNG)

_Arrow Function Example_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5kdprevn52vox3wtbl3.PNG)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8gt8bb50alh8y919vkth.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75dsd0xm50ivmddt7be6.PNG)

---

**_Arrow Functions With Multiple Parameters_**

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b4lli8qse6sro3lndj16.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8sw5ty8z1dkuoxshri5l.PNG)

The code is more concise with the arrow function syntax:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pm57rizjmaf8yhkju5r1.PNG)

---

**_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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xfwh773ol5k3cxv1epwt.PNG)

---

**_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**:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwnhhdf29xaw5i8w1yzr.PNG)

However, the following code works perfectly fine:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n40tgoqcfvs6lr5ib017.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/53o7an3fmxbv5ppzy403.PNG)

---

**_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.