I am going to show how to use reduce in JavaScript. We will understand how to reduce a big array into a single value using the reduce function. It is like reducing a long list of numbers into just their sum or their product.
The reduce method is used to reduce an array into a single value. We are going to have an array and, using the elements of that array, we want a single value so that we can perform operations like sum, average, total, or product. It does this by repeatedly combining elements with a particular function we provide. Mark these two words: it is used to combine or summarize array data into one value.
Definition – JavaScript reduce Method
The main definition of the reduce method is simple: it takes an array and reduces it to a single value by continuously combining its elements with the logic you specify. You can think of it as moving through the array, step by step, updating a stored result until one final value is produced.
Syntax – JavaScript reduce Method
First we write the array from which we are going to take the elements. Then we write .reduce, followed by parentheses. Inside the parentheses we make an arrow function. We pass two parameters: the accumulator and the current value. Inside the function we write return and then the logic. After the function, we write the initial value.
Example syntax:
const result = array.reduce((accumulator, currentValue) => {
return / your logic using accumulator and currentValue /;
}, initialValue);
The
accumulator stores the result as the operation runs on every element. The
current value is the current element taken from the array during each step. The
initial value is the starting value placed into the accumulator before the first element is processed.
To see reduce used alongside map and filter, check
map-filter-reduce.
How the JavaScript reduce Method Works
Let’s say we have an array [1, 2, 3, 4, 5] and the initial value is 0. The goal is the sum.
At first, the accumulator is 0 and the current value is 1. The logic is accumulator + current value. That gives 1, which goes back into the accumulator.
Next, the accumulator is 1 and the current value is 2. The result is 3, which gets stored in the accumulator.
Next, the accumulator is 3 and the current value is 3. The result is 6, which gets stored in the accumulator.
This continues until the end. The final single value is 1 + 2 + 3 + 4 + 5, which is 15. This is how reduce works.
Sum Example – JavaScript reduce Method
We will take an array of numbers and get a single value which is the sum of all the elements.
const numbers = [10, 20, 30, 40, 50];
const total = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(total); // 150
The logic is accumulator plus current value, and the initial value is 0. If you want any other starting point, you can change the initial value and the calculation will start with that number.
Read More: Master Local Storage Javascript
Max Example – JavaScript reduce Method
We will create a random array and take out the maximum value using reduce.
const nums = [5, 7, 23, 45, 22, 34, 234];
const max = nums.reduce((accumulator, current) => {
return current > accumulator ? current : accumulator;
}, nums[0]);
console.log(max); // 234
nums[0] takes the first element, so the accumulator starts at 5. The current value moves through the array. If the current value is greater than the accumulator, we return the current value, otherwise we keep the accumulator. By the end, the accumulator holds the largest element, which is 234.
Read More: Master Javascript Switch Case
Purpose – JavaScript reduce Method
You need to understand this clearly: reduce is used for two purposes, to
combine or
summarize array data into a
single value. Whether you want the sum, product, average, maximum, or any computed single result, reduce gives you a clean way to do it.
Final Thoughts – JavaScript reduce Method
The reduce method continuously combines elements of an array using your logic, stores the intermediate result in the accumulator, and returns one final value. Keep the roles clear: the accumulator stores the running result, the current value is the element being processed, and the initial value is your starting point. With that in mind, you can confidently use reduce to compute sums, maximums, and more.
Read More: Chaining Map Filter Reduce Javascript 