Arrow Functions

Arrow functions have a shorter, more concise syntax, which reduces the amount of code, especially when the function is small or used as a callback.

All arrows are created as a function expression, and if the function is not anonymous then it must be assigned to a variable.

// Regular function declaration
function classicAdd(a, b, c) {
  return a + b + c;
}

// The same as arrow function
const arrowAdd = (a, b, c) => {
  return a + b + c;
};

The keyword function is not used; instead, you should immediately declare parameters, followed by the => symbol and the function body.

If there are several parameters, they are separated by commas and placed in parentheses, between the equals = and the arrow =>.

const add = (a, b, c) => {
  return a + b + c;
};

If there is only one parameter, it can be declared without parentheses.

const add = a => {
  return a + 5;
};

If there are no parameters, then there must be empty parentheses.

const greet = () => {
  console.log("Hello!");
};

Implicit return

In an arrow function, its body follows =>. There are two options, with and without curly braces.

const add = (a, b, c) => {
  console.log(a, b, c);
  return a + b + c;
};

If there are curly braces, and the function must return a value, you must put return explicitly. This is called an explicit return. This syntax is used if there are other instructions to be executed in the function body besides returning a value.

const add = (a, b, c) => a + b + c;

If there are no curly braces, then the result of the expression after => is returned. This is called an implicit return. The example will return the result of adding the parameters a, b and c.

The implicit return syntax greatly reduces the "noise" when declaring a function with a body and return expression, but it is only suitable if you do not need to execute any additional instructions in the function body other than returning a value.

// Before
function classicAdd(a, b, c) {
  return a + b + c;
}

// After
const arrowAdd = (a, b, c) => a + b + c;

arguments pseudo-array

Arrow functions do not have a local variable arguments containing all the arguments. If it is necessary to collect all arguments into an array, the rest operation is used.

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // [1, 2, 3]

Arrow functions as callbacks

Anonymous arrow functions are great as callbacks for array iteration methods because of the shorter declaration syntax, especially if you do not need the function body.

const numbers = [5, 10, 15, 20, 25];

// Function declaration
numbers.forEach(function (number, index) {
  console.log(`Index ${index}, value ${number}`);
});

// Anonymous arrow function
numbers.forEach((number, index) => {
  console.log(`Index ${index}, value ${number}`);
});

You can also declare an arrow callback function separately and pass a reference to it. This should be done if one function is used in several program parts, or if it is cumbersome.

const numbers = [5, 10, 15, 20, 25];

const logMessage = (number, index) => {
  console.log(`Index ${index}, value ${number}`);
};

numbers.forEach(logMessage);