JavaScript Array Iteration: map, filter, reduce & Functional Transformations

Modern JavaScript emphasizes declarative, functional programming. Instead of writing manual for loops with state counter flags, higher-order iterator methods—such as map, filter, and reduce—allow you to express complex data transformations cleanly and immutably.

1. map() - Transforming Elements

Calls a function on every element and returns a brand-new array containing the transformed values:

const productPricesINR = [1000, 2500, 5000];

// Add 18% GST tax to each price
const pricesWithGST = productPricesINR.map(price => price * 1.18);
console.log(pricesWithGST); // [1180, 2950, 5900]

2. filter() - Selecting Elements by Condition

Evaluates each element with a predicate test function; elements that return true are included in the new array:

const examCandidates = [
    { name: "Amit", marks: 45 },
    { name: "Pooja", marks: 82 },
    { name: "Rahul", marks: 91 },
    { name: "Neha", marks: 33 }
];

const passedStudents = examCandidates.filter(student => student.marks >= 50);
console.log(passedStudents); 
// Output: [{ name: "Pooja", marks: 82 }, { name: "Rahul", marks: 91 }]

3. reduce() - Accumulating to a Single Value

The most powerful array method in JavaScript. It rolls up the entire array into a single accumulated result:

const cartItems = [
    { title: "JavaScript Guide", price: 650 },
    { title: "HTML5 & CSS3 Manual", price: 450 },
    { title: "Python Masterclass", price: 900 }
];

// Calculate total cart value:
const cartTotal = cartItems.reduce((accumulator, item) => accumulator + item.price, 0);
console.log("Total Cart Invoice: ₹" + cartTotal); // ₹2000

4. Method Chaining (The Power Combo)

Because map and filter return fresh arrays, you can fluidly chain them together in pipeline workflows:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Pipeline: Find even numbers -> square them -> calculate sum
const totalEvenSquares = numbers
    .filter(n => n % 2 === 0)       // [2, 4, 6, 8, 10]
    .map(n => n * n)                 // [4, 16, 36, 64, 100]
    .reduce((sum, n) => sum + n, 0); // 220

console.log("Total Even Squares:", totalEvenSquares); // 220