If you are familiar with JavaScript array, am sure you must have heard of the word ‘REDUCE’
Now, the question is, what is “reduce” and what does it do? In this article, we will be covering;
• What is reduce
• Practical examples using reduction method.
WHAT IS REDUCE
As the name implies, Reduce is all about reduction (lowering to a small unit or a single unit). That same logic also applies to JavaScript
Reduce is a built-in array method. It executes a reducer function i.e in a given array, a reduce method goes through each element in an array and it reduces all its elements to a single value.
Here is its syntax;
Array.reduce((total, currentValue) => {
Return ………………})
Let’s add an array of 1-4 using reduce
The first time it runs, its total will be set to its first element(which is 1) while the current value will be set to the 2nd element(which is 2). So its total will be 1+2 = 3. Its total will be 3 for the 2nd run.
The 2nd time it runs, its total will be 3, while the current value will be 3, so its return will be total + currentValue = 6. So its total will be 6 for the 3rd run.
The 3rd time it runs, its total will be 6, and its current value will be 4. So its return for its 3rd run will be 10. Which is the sum of its array.
Using a table to summarize it;
P.S: The first time it runs, the total will be set to the first value (except otherwise stated)
This is far better than using the traditional “for loop” or “for of loop” to iterate over the array.
• The key point here is, that it returns a single value from a given array.
We can also use the reduce method to return the maximum and minimum values in an array.
Using a table to summarize it;
From the table, the final answer is 120.
Though we can use "Spread” and the built-in “Math.max” method, with reduce, we can also work it out.
We can also use reduce method to group the occurrence of an event.
Suppose in your class, there was an election to determine John as the class rep, and 22 students voted. We can use the reduce method to determine the total number of yes for John and the total number of No against John and void vote.
The empty curly braces are our initial value. It tells our reducer function where to start from. We stated it because we want to create an empty object, then add our value from the result to its empty object.
Total[currentValue], means is there this particular key in the object.
The first time it runs for any new key: “yes”, “no”, or “void” its initial value is empty(0), then it reads 0||0(using the “or” symbol) it evaluates to 0, then it adds 1, which is (0+1 = 1).
Now, what if there is a key already?
It will be ((total[currentValue] || 0 ) + 1)
((1 || 0 ) + 1) = (1+1) = 2
So, ” yes” will be 2.
Its code read, is there a key in the object, if No, set it to an empty object and perform the operation, and if yes, go ahead with the operation.
In conclusion, the reducer function returns a single value from a list of an array. It accepts a callback function and returns our result.
Its syntax is:
Array.reduce((total, currentValue) => {
Return ………………})
For the first time it runs, its total is the first value, but when there is a specified initial value, its total will be set to its initial value for its first run.
P.S: The total may be called “accumulator” or “previous value”, but I call mine “total” because that was how I easily understood it.
Top comments (0)