Array reduce() Method in JavaScript | Explained

The Array reduce() method is used to iterate through all the items of an array and apply a reducer() function on each element individually. This reducer() function is a callback function. At the end of all the callback function execution, a final resultant value is returned. Since it returns only one value, it is known as a reducer that reduces the entirety of an array into a single value.

This callback function can be created within the parameters of the reduce function and can even be created somewhere else explicitly. The reducer() method is given three arguments automatically. The first is the totalValue, currentElem, currentElemIndex.

To understand the Array reduce() method, let’s talk about its proper syntax:

Syntax of the Array reduce() Method

The syntax of the Array reduce() method can be explained as:

arrayVar.reduce(function(total/initialValue,currentElem,currentElemIndex),initialValue);

In this syntax:

• arrayVar is the name of the array variable on which the reduce() method is applied
• Function is the callback function which is known as the reducer method
• initialValue is the initial value that can be passed to the callback function to set its total parameter (optional)

Inside the callback function:

• total/initialValue is used to store the return value of the previous execution of the reducer function or it can even be used to store an initial value
• currentElem is used to store the value of the the array element on which the reducer function is being executed
• currentElemIndex is used to store the index of the array element on which the reducer function is being executed

Return value:

The resultant or accumulated value calculated by executing the callback function on all the items of the array

To better understand the working of the reduce() method, take a look at the examples below:

Example 1: Add Values of an Array Using reduce() Method

Start by creating a new array with the following line of code:

numbersArray = [56,12,87,44,99,67];

After that, apply the reduce() method on the “numbersArray” and create a function inside its argument and also store the result value from the reduce() method in a new variable with the following lines of code:

result = numbersArray.reduce(function (total, currentElem) {

return total + currentElem;

});

After that, to display the final reduced value on the terminal, simply pass the variable “result” in the console log function like:

console.log(result);

The complete code snippet is as:

numbersArray = [56, 12, 87, 44, 99, 67];

result = numbersArray.reduce(function (total, currentElem) {

return total + currentElem;

});

console.log(result);

Execute the program and the following result will be displayed on the terminal:

The final value was printed on the terminal.

Example 2: Subtracting all the Values of an Array From 1000 With Explicit Function

Start by creating a function named as subtractAll() with the following lines of code:

function subtractAll(initialValue, currentElem) {

return initialValue - currentElem;

}

In the above lines, the reducer function was created with two parameters and a value was returned. After that, create an array with numbers stored inside it with the following lines of code:

theArray = [78, 12, 87, 44, 53, 69];

After that, apply the reduce() method on the “theArray” and provide an initialValue as 1000 and also store the returned value into a variable with the following lines:

var result = theArray.reduce(subtractAll, 1000);

After that, pass the result variable in the console log function to print the final value onto the terminal like:

console.log(result);

The complete code snippet is as:

function subtractAll(initialValue, currentElem) {

return initialValue - currentElem;

}

theArray = [78, 12, 87, 44, 53, 69];

var result = theArray.reduce(subtractAll, 1000);

console.log(result);

Executing the program will give the following output on the terminal:

All the values from the array were subtracted from 1000, and the final value has been printed on the terminal.

Wrap up

The Array reduce() method is used to implement a callback function on every array element and compute a single final value. Since the callback function is used to compute a single final value, the callback function is also known as the reducer method. This article has explained the Array reduce() with the help of examples.

from https://ift.tt/GlosRku