A Comprehensive Guide to JavaScript's Array reduce Method and Its Versatile Applications

For beginners, methods like map , forEach and filter feel more approachable, but reduce can handle every scenario and is often called the "B‑god" of array utilities.

The reduce function accepts two arguments: a required callback and an optional initialValue . The callback receives four parameters—accumulator, current value, current index, and the source array—though most code only uses the first two.

Browser support is universal in modern browsers (see the caniuse.com screenshot).

Without an initial value

[1,2,3,4].reduce((acc, cur) => {
  return acc + cur;
}); // 10

With an initial value

[1,2,3,4].reduce((acc, cur) => {
  return acc + cur;
}, 10); // 20

Note: If initialValue is omitted, the callback starts at index 1; providing it starts at index 0. Think of the process as a snake eating beans—each bean becomes part of the snake's body.

Reshaping with reduce

Because map creates a new array of the same length, we can emulate it with reduce by pushing the transformed items into an accumulator array:

const testArr = [1,2,3,4];
Array.prototype.reduceMap = function(callback) {
  return this.reduce((acc, cur, index, array) => {
    const item = callback(cur, index, array);
    acc.push(item);
    return acc;
  }, []);
};
testArr.reduceMap((item, index) => item + index); // [1,3,5,7]

Similarly, reduce can mimic forEach (no return value), filter (push only when the callback returns true ), and find (return the first matching element or undefined ).

reduce → forEach

Array.prototype.reduceForEach = function(callback) {
  this.reduce((acc, cur, index, array) => {
    callback(cur, index, array);
  }, []);
};

reduce → filter

Array.prototype.reduceFilter = function(callback) {
  return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      acc.push(cur);
    }
    return acc;
  }, []);
};

reduce → find

Array.prototype.reduceFind = function(callback) {
  return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array) && (Array.isArray(acc) && acc.length === 0)) {
      acc = cur;
    }
    if (index === array.length - 1 && Array.isArray(acc) && acc.length === 0) {
      acc = undefined;
    }
    return acc;
  }, []);
};

Derived patterns

Flatten a 2‑D array :

const testArr = [[1,2],[3,4],[5,6]];
testArr.reduce((acc, cur) => acc.concat(cur), []); // [1,2,3,4,5,6]

Count occurrences of each element :

const testArr = [1,3,4,1,3,2,9,8,5,3,2,0,12,10];
testArr.reduce((acc, cur) => {
  if (!(cur in acc)) {
    acc[cur] = 1;
  } else {
    acc[cur] += 1;
  }
  return acc;
}, {}); // {0:1,1:2,2:2,3:3,4:1,5:1,8:1,9:1,10:1,12:1}

Group objects by a property (e.g., bills by type):

const bills = [
  {type: 'shop', money: 223},
  {type: 'study', money: 341},
  {type: 'shop', money: 821},
  {type: 'transfer', money: 821},
  {type: 'study', money: 821}
];

bills.reduce((acc, cur) => {
  if (!acc[cur.type]) {
    acc[cur.type] = [];
  }
  acc[cur.type].push(cur);
  return acc;
}, {});

Array deduplication using includes :

const testArr = [1,2,2,3,4,4,5,5,5,6,7];
testArr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []); // [1,2,3,4,5,6,7]

Find maximum (or minimum) value in an object array :

const testArr = [{age:20},{age:21},{age:22}];
testArr.reduce((acc, cur) => {
  if (!acc) return cur;
  return acc.age < cur.age ? cur : acc;
}, 0); // {age:22}

Conclusion

The reduce method shines in complex array manipulations; mastering it greatly benefits everyday development and technical interviews.

Click the original article to read more and join the community!