map, filter, reduce

Functional Array Transformations

💡 map ek factory assembly line hai — har item ko ek SAME transformation se guzारना (jaise har box par stamp lagana). filter ek quality-check gate hai — sirf CRITERIA match karne wale items aage jaate hain. reduce ek "sab kuch combine karke ek final result" machine hai (jaise sab coins ko ek total mein combine karna).

map() har element ko TRANSFORM karta hai, NAYA array return karta hai (same length). filter() har element ko TEST karta hai, sirf matching elements ka NAYA array return karta hai (chhota ya same length). reduce() poore array ko EK single value mein "reduce" karta hai (sum, object, kuch bhi) — accumulator pattern.

Ye teeno "pure" hain — original array MODIFY nahi karte, naya result return karte hain. Modern JavaScript mein traditional for loops se bahut zyada common/preferred hain jab array transform/filter/aggregate karna ho.

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

const doubled = numbers.map(n => n * 2);
console.log(doubled);   // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);       // [2, 4]

const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum);           // 15 (0 = starting value)

// Chaining — sab ek saath:
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .reduce((sum, n) => sum + n, 0);
console.log(result);   // (2²+4²) = 20

🧰

map ek factory assembly line hai — har item ko ek SAME transformation se guzारना (jaise har box par stamp lagana). filter ek quality-check gate hai — sirf CRITERIA match karne wale items aage jaate hain. reduce ek "sab kuch combine karke ek final result" machine hai (jaise sab coins ko ek total mein combine karna).

1 / 6

⚡ Quick Recap

map = transform (same length), filter = select (chhota/same), reduce = combine (single value)
Original array modify nahi karte — naya result return karte hain
Chaining se complex transformations readable steps mein ban jaati hain

Is page mein (2 subtopics)

reduce() sirf numbers sum karne ke liye nahi hai — accumulator KUCH BHI ho sakta hai (object, array, string) — array ko object mein "group by" karna ek bahut common advanced use-case hai.

const people = [
  { name: "Aarav", dept: "IT" },
  { name: "Riya", dept: "HR" },
  { name: "Zoya", dept: "IT" }
];

const groupedByDept = people.reduce((acc, person) => {
  if (!acc[person.dept]) acc[person.dept] = [];
  acc[person.dept].push(person.name);
  return acc;
}, {});

console.log(groupedByDept);
// { IT: ["Aarav", "Zoya"], HR: ["Riya"] }

💡Tip: reduce() JavaScript ka sabse "powerful lekin confusing" array method hai — theoretically map()/filter() bhi reduce() se implement ho sakte hain. Overuse readability kharab kar sakta hai, lekin group-by jaisi transformations ke liye perfect fit hai.

map() NAYA array return karta hai (transformation ke liye). forEach() KUCH return nahi karta (undefined) — sirf side-effects (jaise console.log, DOM update) ke liye. Agar result CHAHIYE, map() use karo; agar sirf "kuch karna hai har item ke liye", forEach() use karo.

const numbers = [1, 2, 3];

// map — result chahiye:
const doubled = numbers.map(n => n * 2);   // [2, 4, 6]

// forEach — sirf side-effect (koi result nahi chahiye):
numbers.forEach(n => console.log(n));        // sirf print karta hai, return karta hai undefined

// GALAT use — map ka result use hi nahi ho raha:
// numbers.map(n => console.log(n));   // forEach use karna chahiye tha

⚠️Common Mistake: map() ka return value use na karna (jaise numbers.map(n => console.log(n));) ek common anti-pattern hai — agar result store/use nahi karna, forEach() use karo, map() nahi.

← Previous🏗️ ES6 Classes Next →🔧 Other Array Methods

Code10x

map, filter, reduce

reduce() for Building Objects (Not Just Sums)

map() vs forEach() — Kab Kaunsa