The Reduce() method JS basics simplified.

Jean-marc Lubiba — Thu, 08 Sep 2022 15:46:06 +0000

The reduce() method executes a callback function on each element of an array, using the return value from the previous calculation on the current element. Its final result is a single value.

"The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0)." (mdn web docs)¹

Format
- format 1
- Format 2: Arrow function
- format 3
Examples
- Example without initial value set:
- Example with without initial value set:
Link resources

Formats:

Format 1:

let arrayName = [];
arrayName.reduce(function functionName(previousValue, currentValue){
    // The function
    return callbackElement;
}, initialValue)

Format 2: Arrow function

let arrayName = [];
arrayName.reduce((previousValue, currentValue) => [function to execute here], initialValue)

Format 3:

let arrayName = [];
arrayName.reduce(functionName, initialValue)

function functionName(previousValue, currentValue){
    // The function
    return callbackElement;
}

Examples:

Example without initial value set:

const array = [20,1,-1,2,-2];

function reducer(previousValue, currentValue, index) {
  const returns = previousValue + currentValue;
  console.log(`previousValue: ${previousValue}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`);
  return returns;
}

console.log("The final solution:", array.reduce(reducer, 30));

//Returns
> "previousValue: 20, currentValue: 1, index: 1, returns: 21"
> "previousValue: 21, currentValue: -1, index: 2, returns: 20"
> "previousValue: 20, currentValue: 2, index: 3, returns: 22"
> "previousValue: 22, currentValue: -2, index: 4, returns: 20"
> "The final solution:" 20

Example with initial value set:

const array = [20,1,-1,2,-2];

function reducer(previousValue, currentValue, index) {
  const returns = previousValue + currentValue;
  console.log(`previousValue: ${previousValue}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`);
  return returns;
}

console.log("The final solution:", array.reduce(reducer, 30));

// Returns:
> "previousValue: 30, currentValue: 20, index: 0, returns: 50"
> "previousValue: 50, currentValue: 1, index: 1, returns: 51"
> "previousValue: 51, currentValue: -1, index: 2, returns: 50"
> "previousValue: 50, currentValue: 2, index: 3, returns: 52"
> "previousValue: 52, currentValue: -2, index: 4, returns: 50"
> "The final solution:" 50

Note: Here we can see that because we have set an initial value to the method, the first operation happens in the "index: 0" contrarily to when there when there is no initial value.

This is a basic explanation of how reduce() method works. I would advice you to check the link below to be able to practice and learn of more of the things that can be done using this method.

Thank you so much for reading.

Link resources:

Array.prototype.reduce()

Array.prototype.reduce() - javascript: MDN. JavaScript | MDN. (2022, September 5). Retrieved September 8, 2022, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce ↩

DEV Community: Jean-marc Lubiba