Use JavaScript reduce function for more than sum

·

5 min read

Use JavaScript reduce function for more than sum

When I say there is a lot more you can do with reduce function you wont believe me .Trust me before I started to put this article together I also did not know that this many things can be possible .

Most of you would already be familiar with the simple way to use a reduce .

Simple Reduce

// reduce an array to its sum  
const  num = [15, 5, 25];
const sum=num.reduce(add,0);
function add(total, num) {
  return total + num;
}
console.log(sum); // 45

You can simplify this further with arrow and anonymous functions

const  num = [15, 5, 25];
const sum=num.reduce(((total, num) => total + num),0);
console.log(sum); // 45

You need to supply a initial value for sum variable so it considers initial value as the first item in the reduce as its the best practice to do. For now just remember that you need to give initial value ,I will give an example later.

Reduce an Array with Objects

Now lets see how to reduce an array with objects .

const utubers=[{id:1,name:'Test Ed',sal:5000},{id:2,name:'Dev Ed',sal:5000},{id:3,name:'Mr Beast',sal:2000},{id:4,name:'Mr Boss',sal:2000},{id:5,name:'MKBHD',sal:2000}]

const sum = utubers.reduce(((sals,utuber)=>sals+utuber.sal
),0)
console.log(sum) // 16000

So here we are able to access the values inside array of objects and add the sal values to get the sum .

Conditional Reduce

Lets say we want to add only whose id is greater than 3 ie perform conditional reduce. we can do so as below .

const utubers=[{id:1,name:'Test Ed',sal:5000},{id:2,name:'Dev Ed',sal:5000},{id:3,name:'Mr Beast',sal:2000},{id:4,name:'Mr Boss',sal:2000},{id:5,name:'MKBHD',sal:5000}]
const sum = utubers.reduce(((sals,utuber)=>
utuber.id>3?sals+utuber.sal:0
// if utuber id greater than 3 add the sal else add 0 
),0)
console.log(sum) // 16000

Lets say we need an array with only those whose sal is greater than 2000 .you use the a temp array and push the objects that meets the conditions

const utubers=[{id:1,name:'Test Ed',sal:5000},{id:2,name:'Dev Ed',sal:5000},{id:3,name:'Mr Beast',sal:2000},{id:4,name:'Mr Boss',sal:2000},{id:5,name:'MKBHD',sal:5000}]

const salGt2000 = utubers.reduce(((tempArray,utuber)=>{
// get an array with only whose sal is more than 2000 
if(utuber.sal>2000){
tempArray.push(utuber)
}
return tempArray;
}
),[])
console.log(salGt2000);
// output
/* [{
  id: 1,
  name: "Test Ed",
  sal: 5000
}, {
  id: 2,
  name: "Dev Ed",
  sal: 5000
}, {
  id: 5,
  name: "MKBHD",
  sal: 5000
}] */

Lets say we need utubers who are more than 2000 and add it to another array we can do so as below .

const utubers=[{id:1,name:'Test Ed',sal:5000},{id:2,name:'Dev Ed',sal:5000},{id:3,name:'Mr Beast',sal:2000},{id:4,name:'Mr Boss',sal:2000},{id:5,name:'MKBHD',sal:5000}]
const otherTubers=[{id:20,name:'yatheesh',sal:1500}]

const salGt2000 = utubers.reduce(((tempArray,utuber)=>{
// get an array with only whose sal is more than 2000 
if(utuber.sal>2000){
tempArray.push(utuber)
}
return tempArray;
}
),otherTubers)// we have given initial array so we can add items to it 

console.log(salGt2000)
// now the output will be having otherTubers and salGt2000 tubers 
/* [{
  id: 20,
  name: "yatheesh",
  sal: 1500
}, {
  id: 1,
  name: "Test Ed",
  sal: 5000
}, {
  id: 2,
  name: "Dev Ed",
  sal: 5000
}, {
  id: 5,
  name: "MKBHD",
  sal: 5000
}] */

Remember earlier I told you about the initial value for the sum ; Notice in the above example we are giving the initial array which made the output include the initial array objects .

Any conditional operation can be performed inside reduce and all we need to do is return the result performed inside of the conditional as in the above example .

There are many other places you can use reduce .Let me know any other ways you have used reduce in the comments .