How Array.reduce() could replace other array methods

JavaScript developers use array methods on a daily basis, and it has become imperative to incorporate these methods into the code instead of relying on traditional loops and conditions.
These methods provide a clean, concise and neat code.
Among them, we find map, filter , find,every etc

In this post, I will show you how reduce can save you from having to use other methods, in another way we could say reduce method is the mother of others methods.

In the following post I will take an array of objects as an example as it is useful case and close to real arrays you are facing in react , node js etc.
In the following I will go through three array methods examples map, filter and every.

1. reduce instead of *map * as you know Array.map() return another array with the same length with a determined operation for each element

let users= [{id:1,name:'John'},{id:2,name:'oussama'},{id:3,name:'Dave'},{id:4,name:'Smith'}]

users.reduce((accumulator,user)=>{
accumulator.push(user.name)
return accumulator
},[])
//output exactly the same when using users.map(e=>e.name): //['John', 'oussama', 'Dave', 'Smith']
//the array of users reduced to an array of names by //initiating the accumulator to an empty array then return it //as a result after pushing in each step.

1. reduce instead of filter Array.filter() used to return an array of elements after filtering the original array based on a determined condition

// the same as the first example , the accumulator initiated as an empty array then push only element which align with the condition
users.reduce((accumulator,user)=>{
  if(user.name.length>4) accumulator.push(user.name)
  return accumulator
},[])
//output exactly the same when using users.filter(e=>e.name.length>4): 
['oussama',  'Smith']
//the array of users reduced to an array of names that includes only names with more than 4 characters

1. reduce instead of every Array.every() return a boolean, true when all the array element satisfy the specified condition and falseif at least one element fails to meet the condition. So to use reduce method in this case we should initiate the accumulator by a true value and assign false to it if one element of the array fails to meet the condition

//in this example we will test if all users have a name of //type string
users.reduce((accumulator,e)=>{
if(typeof(e.name)!=='string') accumulator = false
return accumulator
},true)
// output will be `true` the same as below method //users.every(e=>typeof(e.name)==='string')

Conclusion
The way I followed to introduce to you the reduce array method was to emphasize that it is a powerful method and can replace other methods in case you don't know or forget one of them, however I can not say that it is the most cleanest code.
Knowing all of them is very helpful , knowing reduce is the key behind all of them.

Comments

[ohaddahan]

Worth mentioning that using reduce to replace these methods will probably result in poor performance.

In the case of map, pushing on an an empty array is slow and can lead to multiple memory allocations. I assume under the hood map allocates an array of the same size on one go and assign into each element.

Also your every doesn’t early return on the first false. Which can lead to many unneeded iterations.

[Oussama Bouyahia]

that is what I mentioned in the conclusion knowing the mother of methods doesn't mean is the cleanest code in terms of performance