JavaScript reduce() method: absolute beginner's guide

Introduction:

In this gentle beginner's guide to JavaScript reduce() method, we are going to explore how to get started with reduce() method. This is just a guide to put you in the right direction so as to get yourself familiar with the functionality and help you to start implementing this function in your projects. This article is aim at absolute beginner. So, with no further ado let jump right into it.

What is JavaScript reduce() method?

reduce() is a JavaScript array method which was introduced into the language as one of the features of ECMAScript5 (ES5). Just as the name implies, reduce() method reduces an array to a single value. This reduction of array elements to single value is carried out by an helper callback function (reducer), this operation is carried out from left to right, while the result is been stored in an accumulator.

NOTE: reduce() method does not change the original state of the array, but only return a single value.

How to use reduce() method

Syntax
The syntax of reduce() method is written:

arr.reduce(callback(accumulator, currentValue), initialValue)

where arr is the array

• reduce() array method
• callback() - a function to execute on each array element often called reducer (required)
• accumulator - accumulated return value
• currentValue - current array element been use
• initialValue - a value pass to the function as the initial value (optional)

Return value: reduce() return a single value

Since we have some basic understanding of this concepts, let us get our hand dirty by writing some code.

Example 1: Let get the sum of element in an array

//without initialValue
const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((acc, cur) =>{
    return acc + cur; 
}); // 1 + 2 + 3 + 4 + 5
console.log(reduceArr); // output: 15


//initialValue argument is pass into the reduce method
const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((acc, cur) =>{
    return acc + cur;
}, 2); // 2 + 1 + 2 + 3 + 4 + 5
console.log(reduceArr); // output: 17

The reducer walks through the array, element by element adding the current array element to the previous result, If the initial value is not stated the addition starts from array (acc = arr[0]) index 0 and the current value at index 1.

If the initial value is provided, the addition starts from the initial value (acc = initialValue) and the current value starts at index 0. The reducer does this until there are no element left in the array.

Example 2: Find minimum number in an array

const arrMin = [10, 12, 30, 4, 15];
const findMin = arrMin.reduce((acc, cur) =>{
    return Math.min(acc, cur);
});
console.log(findMin); // 4

Reducing an empty array with no initial value will throw a TypeError, so it's a good practice to provide the initial value before reducing.

Example 3: Filter non numeric array element

const arr = [10, 'a', 'b', 'c', 20, 30, 40, 'c'];  
const filterArr = arr.reduce((acc, cur) =>{  
    if (typeof cur === 'number'){  
        acc.push(cur);  
    }  
    return acc;  
}, []);  
console.log(filterArr);  // [10, 20, 30, 40]

In this example the initial value is set to an empty array, then our current value start at index 0, the reducer (callback) iterate over the array element one by one checking if the current value type is numeric, if the current value of the array element is a number, the value get push into the empty array.

Example 4: Let's calculate the total amount of product in a shopping cart

const shoppingCart = [
    {
        product: 'monitor',
        quantity: 2,
        amount: 400,
    },
    {
        product: 'keyboard',
        quantity: 4,
        amount: 250,
    },
    {
        product: 'mouse',
        quantity: 3,
        amount: 150,
    }
];

const totalAmount = shoppingCart.reduce((acc, cur) =>{
    return acc + cur.quantity * cur.amount
}, 0);

console.log(totalAmount); // 2250

It is always safer to provide the initial value argument when you're manipulating array element

To make sure reduce() works, it must always return something.

Conclusion
For more info about how to use reduce() you can visit the MDN

Thanks for reading! 😃
I will like to receive feedback on what you think about the article. Email