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)
1
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.