JS Use Cases : map() ,filter() reduce(),some() and every()

These are the most commone but yet so important . So i will try to explain with the practical example in a very Simple way . So let get Started :)

filter():

It shows it use case from it’s name it self . Suppose you are at Book store and you need to shortlist somesort of books ao how can you get them ? There are thousands of book in already stored in the data here comes the filter which will make it easy to search what you’re looking for .

• Purpose: Creates a new array with elements that pass a test defined by a callback function.
• Use Case: Filter elements based on a condition.

const myNum = [1 , 2 , 3 , 4, , 5];
const newNum = myNum.filter((num)=>{
     return num > 4 
})
console.log(newNum); //[ 5 ]

const newNum1 = myNum.filter((num) =>{
 return num > 2;
})
console.log(newNum1); //  [ 3, 4, 5 ]

Lets try with the some Real things:

const Team = [
    {title:"GDSC Lead" , Name:"Moiz" , Semster: 7 , Skills:"Full Stack Dev" }, 
    {title:"GDSC Co-Lead" , Name:"Aqib" , Semster: 5 , Skills:"Full Stack Dev" }, 
    {title:"Technical Lead" , Name:"ALi" , Semster: 2 , Skills:"FrontEnd Dev" }, 
    {title:"Content Lead" , Name:"Ahmad" , Semster: 5 , Skills:"Content Writer" },
    {title:"Web Lead" , Name:"Rehman" , Semster: 4 , Skills:"Backend Dev" },  
    {title:"Design Lead" , Name:"Iqra" , Semster: 5 , Skills:"Graphic Design" }, 
];

const GDSCteam = Team.filter((gdsc) => {
    return gdsc.Semster===5; // It will list only 5th 
})
console.log(GDSCteam);

const GDSCteam1 = Team.filter((gdsc) => {
    return gdsc.Semster >=2 ; // It will display list of all the Semester greater and equal than 2
})
console.log(GDSCteam1);

map():

• Purpose: Creates a new array by applying a function to each element of an existing array.
• Use Case: Transform each element in an array.

const myNum = [1 , 2 , 3, 4, 5];
const newNum = myNum.map((num) => {
     return num+10;
 })
  console.log(newNum); //{11 ,12 , 13 , 14 ,15}

The Common Diiference b/w the map and filter

// Filter
const a =[ 1 , 2 , 3 , 4]
const na = a.filter((num) =>{
    return num * 10; // [ 1, 2, 3, 4 ] because it used to filter not to covert in into a new one 
})
console.log(na);
// Map
const b = [1 , 2 , 3 , 4 ]
const nb = b.map((num) =>{
    return num * 10;
})
console.log(nb); //[ 10, 20, 30, 40 ]

Get Abdul Moiz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

reduce()

• Purpose: Reduces the array to a single value by applying a function that accumulates results.
• Use Case: Aggregate array values (e.g., sum, product).

const num =[1 , 2 , 3]
const total = num.reduce(function(acc , curr) {
    console.log(`acc: ${acc} and the currval is ${curr}`);
    
    return acc+curr;
}, 0) //so the accumulator has been stored with the initial value 0 , 
console.log(total);

// Explanation 
//  When ever it runs it will be like if acc = 0 and the curr value will be 1
//**** OUTPUT ****/
/* acc: 0 and the currval is 1
acc: 1 and the currval is 2
acc: 3 and the currval is 3
total 6 */

Here accumulator contain the value we initialized and curr will hold a value from the list or arr.

const total1 = num.reduce((acc , curr)=> {
    return acc+curr}
     , 0);
console.log(total1); // Output 6


const courses=[
    {itemName:"jscourse" , price:200}, 
    {itemName:"pythoncourse" , price:500},
    {itemName:"HTMLcourse" , price:50},
    {itemName:"CSScourse" , price:300},
    {itemName:"Reactcourse" , price:600},
]
const coursesbill = courses.reduce((acc , item) => acc + item.price, 0)

console.log(coursesbill)// The total price of the cart is 1650

some()

It is used to tell the boolean value true or false.

• Purpose: Checks if at least one element in the array passes the test defined by the callback function.
• Use Case: Validate if any element meets a condition.

const arr = [ 1 , 2 , 3 , 4, 5];

const newarr = arr.some((num) => num==3)
console.log(newarr); // true
const newarr1 = arr.some((num) => num==-1)
console.log(newarr1); // false

every()

It also return the boolean value true and false.
Every Element in the array should paas the test that they are present in the array or not .

• Purpose: Checks if all elements in the array pass the test defined by the callback function.
• Use Case: Validate if all elements meet a condition.

const arr = [1 , 2 , 3 , 4 , 5]
const newarr= arr.every((num) => num >=8) 
console.log(newarr); // false 
const newarr1= arr.every((num) => num >= 1)
console.log(newarr1);// true
const newarr2= arr.every((num) => num >=1 && num <=5)
console.log(newarr2);// true
const newarr3= arr.every((num) => num > 0 && num <6)
console.log(newarr3);// true

Happy Coding :)