JavaScript Arrow Functions

Arrow functions are one of the popular features of ES6 syntax for writing JavaScript function expressions. Arrow function expressions cannot be used as constructors.

Arrow functions also called “fat arrow” functions, there are a more concise syntax for writing function expressions. By using arrow functions, we avoid having to type the function keyword, return keyword and curly brackets.

let arrowFunc = (param1, param2, … ,paramN) => expression

This creates a function func that accepts arguments arg1..argN and evaluates the expression on the right side with their use and returns its result.

Briefly, it is the shorter version of:

let func = function (param1, param2, … ,paramN) {
  return expression;
};

Here is a concrete example:

Javascript arrow functions

// This arrow function let multiply = (a, b) => a * b; console.log(multiply(2, 3)); // 6

Run > Reset

Javascript function expression

//It's a shorter form of this: let multiply = function (a, b) { return a * b; }; console.log(multiply(2, 3)); // 6

Run > Reset

From the example we can understand that (a, b) => a * b is a function that accepts two arguments with names a and b. It evaluates the expression a * b returning the result.

If we have only one argument, parentheses around parameters can be excluded, that makes it shorter:

Javascript arrow functions

let sumFunc = (params) => params + 2 // roughly the same as: let sumFunc = function(params) { return params + 2 } console.log(sumFunc(3)); //5

Run > Reset

Parentheses will be empty if there are no arguments:

Javascript arrow functions

let welcome = () => console.log("Welcome to W3Docs!"); welcome();

Run > Reset

We can use arrow functions in the same way as Function Expressions. For example, to dynamically create a function:

javascript arrow functions

let number = prompt("Guess the number", ""); let guessNumber = (number == 10) ? () => console.log('It’s right') : () => console.log('It’s a wrong number') guessNumber(); // it’s work

Run > Reset

Arrow functions can be unfamiliar and not very readable at first, but they are very convenient for simple one-line actions, when we just do not want to write many words.

Multiline arrow functions

In the presented above examples you can see that arguments are taken from the left of => and evaluated the right-side expression with them.

But sometimes we need more complex things, like multiple expressions or statements. It is also possible in case we circle them in curly braces and only after that use a normal return within them.

Example of the multiple arrow function:

Javascript multiple arrow functions

let multiply = (a, b) => { //a multiline function let result = a * b; return result; // if we use curly braces, then we need an explicit "return" }; console.log(multiply(2, 3)); // 6

Run > Reset

Arrow functions also have some other interesting features. For studying them in-depth, we need to get to know some other features of JavaScript. We will return to arrow functions later in the chapter Arrow functions revisited.