JavaScript Array Reducing vs looping

JavaScript Array Reduce

We all heard about what is looping over a collection is.., but what about reducing a collection stands for…??

Let’s have an idea of JavaScript array reducing.

When we read about collection or looping or reducing, it sounds scary, for somebody it is equals to a nightmare to be faced. But here I’m going to make it understand in very simple and basic language.

Firstly, I’m giving you a basic example which is used or seen by you previously.

JavaScript Array Reducing

That’s it. You just reduced the array “numbers” collection into the “total” variable. See..! , how easy to handle this.

Before going to more details let’s understand about reduce() function.

Reduce() function

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.


arr.reduce(callback, [initialValue])

Here are the explanation about all the words/parameters use in above syntax.


  • callback

Function to execute on each element in the array, taking four arguments:

1- accumulator

The accumulator accumulates the callback’s return values; it is the accumulated value previously returned in the last invocation of the callback, or initial Value, if supplied (see below).

2- currentValue

The current element being processed in the array.

3- currentIndex

The index of the current element being processed in the array. Starts at index 0, if an initialValue is provided, and at index 1 otherwise.

4- Array

The array reduce was called upon.

  • initialValue

[Optional] Value to use as the first argument to the first call of the callback. If no initial value is supplied, the first element in the array will be used. Calling reduce on an empty array without an initial value is an error.

  • arr

It is an array on which reduce() function is applied.


How array reduce() works

Suppose the following use of reduce occurred:

The callback would be invoked four times, with the arguments and return values in each call being as follows:JavaScript Array Reducing

The value returned by reduce would be that of the last callback invocation (10).

JavaScript Reduce Example

Let me show you another example:

var message = "";

var words = ["reducing", "is", "simple"];

for ( var i = 0; i < words.length; i++ ){

message += words[i];


This is an example to concatenate the string.

Output :


You see the pattern right?

You start with a collection (words ) and a variable ( message ) with an initial value ( the empty string in this case ). You then iterate over the collection and append (or add ) the values to the variable.

JavaScript Array.prototype.reduce()

Now, see what’s special going on here. What’s so important and unique in this.

var sum = [1, 2, 3].reduce(  function(total, num){

return total + num } 

, 0);

Whoa! So the Array object already knows how to reduce?

Indeed! Isn’t it awesome.

Every time you find yourself going from a list of values to one value,array reduce ( reducing ) ask yourself if you could leverage the built in   Array.prototype.reduce() function. You can reduce with any sort of operation that combines two values. Not just addition. And not just arithmetic operations.

So you know what Array reduce means. Isn’t that awesome? It only took your few minutes , may be a little more to know about this interesting and handy function to reduce array using javaScript.


A Salesforce Developer at AlmaMate Info Tech PVT LTD. An Aligarian and also your query solver in database field.This site mark the difference as Black or White to make you choose the best for you. Don't feel pressurized, feel confident..!!

Leave a reply:

Your email address will not be published.