# JavaScript Arrow Functions | More Concise JS Function

• 324

In this tutorial, you have learned about the JavaScript arrow function syntax and how to use arrow functions to make the code more concise and more readable.

In this tutorial, you will learn JavaScript arrow function and how to use this function. This slightly differs from regular functions.

## JavaScript arrow functions

In javascript, arrow functions provide you with a simple way to write a function in a more concise and more readable way.

The following example addition of two numbers using the js regular function ( define a function using `function` keyword ):

``````let addition = function(x,y) {
return x + y;
}
``````

The following example uses an arrow function which is similar to the above `addition()` function:

``````let addition = (x,y) => x + y;
``````

Here, the js arrow function has one add two numbers using arithmetic operators and returns the result.

More concise and more readable syntax of arrow function, see the following:

``````let func = (arg1, arg2, ...argN) => expression
``````

Note that it’s important, If you use the block syntax in arrow function, you need to use the `return` keyword, see the following:

``````let addition = (x, y) => { return x + y; };
``````

If you use `typeof` operator, it returns `function`. See the following

``````let addition = (x, y) => { return x + y; };
``````

### Arrow functions with multiple parameters

If js arrow function has two or more parameters, you use the following syntax:

``````(p1, p2, ..., pn) => expression;
``````

The following expression:

``````=> expression
``````

is similar to the following expression:

``````=> { return expression; }
``````

If you have numeric array and want to sort this array, See the following example:

``````let numbers = [4,2,6];
numbers.sort(function(a,b){
return b - a;
});
console.log(numbers); // [6,4,2]
``````

The following code is similar to above function and it’s more concise and more readable in arrow function, see the following:

``````let numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers); // [6,4,2]
``````

### Arrow functions with a single parameter

If an arrow function also takes a single parameter, you use the following syntax:

``````(p1) => { statements }
``````

Note that you can omit the parentheses as follows:

``````p => { statements }
``````

The following example uses an arrow function as a parameter of the `map()` method that converts an array of strings into an array of the string’s lengths.

``````let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);

console.log(lengths);
``````

### Arrow functions with no parameter

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

``````() => { statements }
</pre>

See the following example.

```js
let logDoc = () => console.log(window.document);
logDoc();
``````

### Multiline arrow Function

If you want to write a multiline in arrow functions. You can do it, but it does not allow use a line break between the parameter and arrow ( `=>`).

For example, the following code produces a `SyntaxError`:

``````let multiply = (x,y)
=> x * y;

``````

However, the following code works absolutely fine:

``````let multiply = (x,y) =>
x * y;
``````

Want to break the code line from multiline arrow function, shown in the following example:

``````let multiply = (
x,
y
) =>
x * y;
``````

## Arrow function vs. regular function

There are 3 main differences in regular functions and arrow functions in JavaScript.

• You don’t need to use curly brackets if there’s only one statement in the function. In the cases where you omit the curly brackets, you can also omit the return keyword, as the return is implicit.
• this is bound lexically, meaning that fat arrow functions don’t have their own this and that this refers to the parent scope.
• They can’t be used as constructors or generators.
• There’s no parameters variable available with arrow functions.

It is a great practice to use arrow functions for callbacks and closures because the syntax of arrow functions are more concise and more readable.

## Conclusion

In this tutorial, you have learned about the JavaScript arrow function syntax and how to use arrow functions to make the code more concise and more readable.