Map, filter and reduce
what is map() ?
A higher-order function in programming is used to transform each element in an array according to a given function.
const nums = [1,2,3,4];
const multiplyThree = nums.map((num,i,arr)=> {
return num * 3;
})
console.log(multiplyThree);
What is filter() ?
A higher-order function in programming is used to create a new array with elements that pass a specified condition.
const nums = [1,2,3,4];
const moreTheanTwo = nums.filter((num)=> {
return num > 2;
});
console.log(moreThanTwo);
What is reduce() ?
A higher-order function in programming is used to combine all elements in an array into a single value using an accumulator and a combining function.
const nums = [1,2,3,4];
const sum = nums.reduce((acc,curr,i,arr)=>{
return acc+curr;
},0)
console.log(sum);
Polyfill for map
// Array.map((num,i,arr) => {})
Array.protoType.myMap = function (cb){
let temp = [];
for(let i =0; i <this.length; i++){
temp.push(cb(this[i),i,this)
}
return temp;
}
const nums = [1,2,3,4];
const multiplyThree = nums.myMap((num,i,arr)=> {
return num * 3;
})
console.log(multiplyThree);
Polyfill for Filter
Array.protoType.myFilter = function (cb){
let temp = [];
for(let i =0; i <this.length; i++){
if(cb(this[i],i,this)) temp.push(cb(this[i))
}
return temp;
}
const moreTheanTwo = nums.myFilter((num)=> {
return num > 2;
});
Polyfill for Reduce
//rr.reduce((acc,curr,i,arr)=>{},initialValue)
Array.protoType.myReduce = function (cb,initialValue){
var accumulator = initialvalue;
for(let i =0; i <this.length; i++){
accumulator = accumulator ?cb(accumulator ,this[i],i,this) : this[i]);
}
return accumulator;
}
const sum = nums.myReduce((acc,curr,i,arr)=>{
return acc+curr;
},0)
Now lets work with some example which have map , filter and reduce usecase;
let students = [
{name:"Piyush",rollNumber:31,marks:80},
{name:"Jenny",rollNumber:15,marks:69},
{name:"Kaushal",rollNumber:16,marks:35},
{name:"Dilpreet",rollNumber:7,marks:55},
]
let names =[];
for(let i=0;i<students.length;i++){
names.push(students[i].name.toUpperCase());
}
console.log(names);
const names = students.map(stu =>stu.name.toUpperCase());
conosle.log(names);
const details = students.filter((stu)=>stu.marks > 60);
console.log(details);
const sum = students.reduce((acc,curr)=>acc + curr.marks,0);
console.log(sum);
const names = students.filter((stu)=>stu.marks > 60).map((stu)=>stu.name);
console.log(names);
Question - Return total marks for students with marks grater than 60 after 20 marks have been added to those who scored less than 60
let students = [
{name:"Piyush",rollNumber:31,marks:80},
{name:"Jenny",rollNumber:15,marks:69},
{name:"Kaushal",rollNumber:16,marks:35},
{name:"Dilpreet",rollNumber:7,marks:55},
]
const totalMarks = students.map((stu) => {
if(stu.marks <60)
{
stu.marks +=20;
}
return stu;
})
.filter((stu)=> stu.marks > 60).reduce((acc,curr)=>acc+curr.marks,0)
console.log(totalMarks)
Subscribe to my newsletter
Read articles from Abhishek Dandriyal directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Abhishek Dandriyal
Abhishek Dandriyal
Frontend Developer , I design and code user-friendly and responsive web applications and projects using,HTML5 , React /Redux MUI . I collaborate with backend developer, UI/UX designers, and project managers to deliver high-quality products that meet the clients' needs and expectations.