JavaScript - arrow functions

In this article, we would like to show you how to create and use arrow functions in JavaScript.

Quick solution:

xxxxxxxxxx

const functionName = () => {

  // function body here

};

with arguments:

xxxxxxxxxx

const functionName = (arg1, arg2) => {

  // function body here

};

without parentheses:

xxxxxxxxxx

const multiply = x => x * 2;  // example function that multiplies by 2

In this example, we create a simple arrow function with no arguments.

xxxxxxxxxx

const helloWorld = () => {

  console.log('Hello World!');

}

​

helloWorld();  // Hello World!

In this example, we create a simple arrow function that displays its arguments in the console.

xxxxxxxxxx

const display = (x, y) => {

  console.log('Argument1 = ' + x);

  console.log('Argument2 = ' + y);

}

​

display(1, 2);

display('a', 'b');

Output:

xxxxxxxxxx

Argument1 = 1

Argument2 = 2

Argument1 = a

Argument2 = b

In this example, we create an arrow function with no parentheses. The function multiplies the given number by 2. Notice that in this kind of function you don't need the return statement.

xxxxxxxxxx

const multiply = x => x * 2;

​

​

// usage example

​

const result1 = multiply(1);

const result2 = multiply(2);

​

console.log(result1);  // 2

console.log(result2);  // 4

In this example, we present a comparison of the arrow function with a normal function.

Arrow function solution:

xxxxxxxxxx

const multiply = x => x * 2;

​

// usage example

const result = multiply(1);

console.log(result);  // 2

is equal to:

xxxxxxxxxx

const multiply = function (x) {

  return x * 2;

}

​

// usage example

const result = multiply(1);

console.log(result); // 2