a shot of dev knowledge

RELATED TAGS

What is reduce in Javascript?

What does reduce do?

The reduce method is applied to arrays in Javascript. This method does what its name says; it takes the values in an array, from the first till the last element, and applies functionality such that it changes the array into one singular value. Hence, it reduces the array.

Why do we need reduce?

The reduce method helps make the code more concise and neat.

  1. It eliminates the need to implement for loops to traverse an array.
  2. It allows for callbacks which save time when iterating over the array.
  3. It allows multiple functions to be implemented on the array; sum, average, max and min values.

Syntax

The reduce method has the following syntax:

//Implementation One

let answer = array.reduce(callback, initialValue);

//Implementation Two

let answer = array.reduce(callback);

// Expanding callback

let answer = array.reduce(function(totalResult,currValue,currIndex,array),initialValue);
Declaring reduce

Now let’s understand what each value signifies:

  • answer: This is the variable in which the final reduced value is to be stored.
  • array: This is the array on which the reduce method is applied.
  • callback: This is the method which is to be applied on each element of the array.

The callback itself takes in four arguments:

  • totalResult: This is the final total of returned values of all callbacks
  • currValue: The value of the current element
  • currIndex: The index of the currValue
  • array: The array on which the reduce method is being applied

Note: currIndex and array are optional arguments.

  • initialValue- this is an optional argument. This is passed to the reduce method as an initial value if you need to begin with a starting parameter.

Example

Let’s see how to find the total product of all values in the array using reduce to really understand how it works.

//         Declaring callback within the reduce statement

//Declare an array of numbers
var array = [1,2,3,4,5];

//Declare an answer variable to store the final result
//The reduce function callback is declared in the declaration
let answer = array.reduce((totalResult,currValue)=>
//The callback method must return a value using the required function       
             {return totalResult*currValue;});
console.log("Answer with no initial value")
console.log(answer);


console.log("Given an initial value of 2. The answer should be doubled")
let answer2 = array.reduce((totalResult,currValue)=>
           {return totalResult*currValue;},2);
console.log(answer2);

In the example above, in Method 1, note that from lines 8 to 10, we call the reduce method on array. The callback takes in two parameters;

  • totalResult which stores the cumulative result of all callbacks
  • currValue which is the current element the callback is operating on

The callback method itself simply equates the totalResult to the product of the two parameters. In this implementation, there is no initialValue and hence it simply starts with the array’s first element.

In the implementation from lines 16 to 17, the reduce method has an initialValue set to 2. Hence, in this case, the totalResult is multiplied first with this value and then proceeds further.

In the second example, Method 2, the same functionality is implemented, except this time, the callback function is put in a separate method and that is called as the first argument of the reduce method.

With no initialValue
1 of 2

RELATED TAGS

RELATED COURSES

View all Courses

Keep Exploring