Array.reduce() for newbies

#javascript #webdev #codenewbie #beginners

Prerequisites.

In order to get the most out of this post, it is important for you to be familiar with:

Using functions with parameters.
Callback functions.
How return works.
JavaScript Data types.
Other Array methods like Array.filter or Array.sort.

In this article will start by getting familiar with some key terms that will make the Array.reduce easier to understand, those key terms are:

Reducer.
Accumulator.

Let's start with a first principles approach and go to the dictionary. According to Dictionary.com, to reduce means:

To bring down to a smaller extent, size, amount, number, etc.

To lower in degree, intensity, etc.

Synonyms for reduce
diminish, decrease, shorten, abridge, curtail, contract, retrench.

With this in mind, it now easier to understand what a reducer function is. Simply put, a reducer function reduces n input items to a single return value.

One of the features that makes Array.reduce so powerful, is that we can use an accumulator. let us learn what an accumulator is. Going back to the dictionary, an accumulator is:

a register used to contain the results of an arithmetical or logical operation.

In the context of our programs, this register can be a variable that is referring a boolean, an array or an object.

Now that we know what a reducer function is, let us explore how Array.reduce works.

According to MDN:

Array.reduce is a method that executes a reducer function on each element of the array, resulting in single output value.

Array.reduce takes in two parameters:

A reducer function.
An initial value for the accumulator.

Let's dive deeper into the reducer function parameter.

Reducer function

As we have learned before:

A reducer function reduces n input items to a single return value.

The reducer function we provide to Array.reduce is executed on each element of the array. This function takes in four parameters:

accumulator. This is the total value of the accumulator.
currentItem. Current item of the array.
currentIndex. Current index of the array.
sourceArray. This is the array that we want to reduce.

Now that we have the basic concepts. Let's walk trought a few examples.

Examples of `Array.reduce` in JavaScript

Get the highest number in an array using `Array.reduce`

In this example, we will: Use Array.reduce and define our own reducer function with an accumulator in order to get the highest number in an array:


/**
 * Let's break it down step by step:

 * 1. Define an array of numbers.
 * 2. We declare the reducer function that will be applied to each element of the array.
 * 3. Within the reducer function, if the currentItem is greater than the accumulator, we will return the currentItem.
 * 4. We invoke numbers.reduce() passing our reducer function as a first parameter and 0 as an initial value for our accumulator. * 5. We store the value returned by numbers.reduce() in a variable called average.
 */


const numbers = [3, 4, 10, 1, 4, 3]; // 1. 

const reducerFunction = (accumulator, currentItem, currentIndex, sourceArray) => { // 2. 
    if (accumulator < currentItem) {
        return currentItem; // 3.
    }
    return accumulator; // 🤓 Notice that the value that we return in the reducer function, will be the value of the accumulator the next time the reducer function is invoked.
}


const highestNumber = numbers.reduce(reducerFunction, 0); // 4 and 5. Notice that 0 is the initial value for our accumulator.

console.log('Highest number is ', highestNumber); // 10

Finding an Average with the Array.reduce

Imagine you have an array of products coming from the back end. In this example we will get the average price of a product in an array.



/**
 * One more time, let's break it down step by step:

 * 1. Define an array of products.
 * 2. We declare the reducer function that will be applied to each element of the array.
 * 3. Within the reducer function, we summ the price of each product to the total.
 * 4. When we reached the last item in the array, we devide it by the number of elements in the array..
 * 5. We invoke products.reduce() passing our reducer function as a first parameter and 0 as an initial value for our accumulator which now is called total. 
 * 6. We store the value returned by products.reduce() in a variable called average.

 */
const products = [ // 1.
  {
    name: "apple",
    price: 29.76, 
  },
  {
    name: "pineapple",
    price: 41.85,
  },
  {
    name: "melon",
    price: 46.5
  }
];

const reducerFunction = (total, product, index, array) => { // 2.
  total += product.price; // 3.
  if( index === array.length - 1) { // 4.
    return total / array.length;
  } else { 
    return total; 
  }
}

const average = products.reduce(reducerFunction, 0); //5 and 6.

console.log(average) // 39.37