Iteration Methods (map, filter, reduce)

Introduction to Array Iteration Methods

JavaScript's array iteration methods represent a paradigm shift in how we process collections of data. These methods embrace a more declarative, functional programming style that focuses on what to do with data rather than how to iterate through it.

Think of traditional loops as manually walking through a factory inspecting each item on a conveyor belt. Iteration methods are like specialized machines that automatically process the entire conveyor belt of items according to your specifications.

graph TD A[Array Iteration Methods] --> B[forEach] A --> C[map] A --> D[filter] A --> E[reduce] A --> F[find/findIndex] A --> G[some/every] A --> H[flatMap] B --> B1["Executes function on each element
No return value"] C --> C1["Transforms each element
Returns new array"] D --> D1["Selects elements based on condition
Returns new filtered array"] E --> E1["Accumulates values
Returns single result"] F --> F1["Finds specific element/index
Returns element or index"] G --> G1["Tests elements against condition
Returns boolean"] H --> H1["Maps then flattens result
Returns new array"]

The key benefits of iteration methods include:

Readability: Code clearly expresses intent
Immutability: Most methods don't change the original array
Chainability: Methods can be combined for complex operations
Conciseness: Less boilerplate code than traditional loops

forEach() Method

The forEach() method executes a provided function once for each array element. Think of it as a more elegant version of a for loop.

// Basic syntax
// array.forEach(callback(currentValue [, index [, array]]) [, thisArg])

const fruits = ["Apple", "Banana", "Cherry"];

// Using forEach to log each fruit
fruits.forEach(fruit => {
    console.log(fruit);
});
// Output:
// Apple
// Banana
// Cherry

// Using all parameters of the callback
fruits.forEach((fruit, index, array) => {
    console.log(`${index}: ${fruit} (from array of ${array.length})`);
});
// Output:
// 0: Apple (from array of 3)
// 1: Banana (from array of 3)
// 2: Cherry (from array of 3)

// Using thisArg parameter (setting 'this' inside callback)
const object = { prefix: "Fruit" };

fruits.forEach(function(fruit) {
    console.log(`${this.prefix}: ${fruit}`);
}, object);
// Output:
// Fruit: Apple
// Fruit: Banana
// Fruit: Cherry

Comparison with Traditional for Loops

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

// Traditional for loop
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i] * 2);
}

// forEach method
numbers.forEach(number => {
    console.log(number * 2);
});

Key Characteristics of forEach

It doesn't return a value (or technically, it returns undefined)
You can't break out of a forEach loop early (unlike for loops with break)
It skips empty elements in sparse arrays

// Cannot return a value from forEach
const doubled = numbers.forEach(num => num * 2);
console.log(doubled);  // undefined

// Cannot break from forEach
numbers.forEach(number => {
    console.log(number);
    if (number === 3) {
        // break;  // This would cause an error!
        return;     // This only skips the current iteration
    }
});

// Skips empty slots
const sparse = [1, , 3];
sparse.forEach(num => console.log(num));
// Output:
// 1
// 3

The forEach() method is best used when you need to perform a side effect for each element without creating a new array.

map() Method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. Think of it as a transformation conveyor belt - each element goes in, is transformed by your function, and comes out changed.

// Basic syntax
// const newArray = array.map(callback(currentValue [, index [, array]]) [, thisArg])

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

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

// Original array remains unchanged
console.log(numbers);  // [1, 2, 3, 4, 5]

// Using all callback parameters
const numbersWithIndices = numbers.map((num, index, array) => {
    return `${index}: ${num} of ${array.length}`;
});
console.log(numbersWithIndices);
// ["0: 1 of 5", "1: 2 of 5", "2: 3 of 5", "3: 4 of 5", "4: 5 of 5"]

Transforming Complex Data

// Transforming objects
const users = [
    { id: 1, name: "John", age: 30 },
    { id: 2, name: "Jane", age: 25 },
    { id: 3, name: "Bob", age: 40 }
];

// Extract just the names
const names = users.map(user => user.name);
console.log(names);  // ["John", "Jane", "Bob"]

// Create new objects with selected properties
const simplifiedUsers = users.map(user => ({
    id: user.id,
    name: user.name
}));
console.log(simplifiedUsers);
// [
//   { id: 1, name: "John" },
//   { id: 2, name: "Jane" },
//   { id: 3, name: "Bob" }
// ]

// Transform with conditionals
const userStatuses = users.map(user => {
    if (user.age >= 30) {
        return `${user.name} is 30 or older`;
    } else {
        return `${user.name} is under 30`;
    }
});
console.log(userStatuses);
// ["John is 30 or older", "Jane is under 30", "Bob is 30 or older"]

Real-World Example: Data Formatting

// API response data
const apiPosts = [
    {
        "id": 1,
        "title": "sunt aut facere repellat provident",
        "body": "quia et suscipit\nsuscipit recusandae...",
        "userId": 1,
        "createdAt": "2023-01-15T08:30:00Z"
    },
    {
        "id": 2,
        "title": "qui est esse",
        "body": "est rerum tempore vitae\nsequi sint...",
        "userId": 1,
        "createdAt": "2023-01-20T10:12:00Z"
    },
    {
        "id": 3,
        "title": "ea molestias quasi exercitationem",
        "body": "et iusto sed quo iure\nvoluptatem...",
        "userId": 2,
        "createdAt": "2023-02-05T15:22:00Z"
    }
];

// Format data for display
const formattedPosts = apiPosts.map(post => {
    // Parse date
    const date = new Date(post.createdAt);
    const formattedDate = date.toLocaleDateString("en-US", {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    
    // Format title (capitalize first letter)
    const title = post.title.charAt(0).toUpperCase() + post.title.slice(1);
    
    // Truncate body text
    const maxLength = 50;
    const truncatedBody = post.body.length > maxLength
        ? post.body.slice(0, maxLength) + '...'
        : post.body;
    
    return {
        id: post.id,
        title,
        preview: truncatedBody,
        author: `User ${post.userId}`,
        publishedOn: formattedDate
    };
});

console.log(formattedPosts);
// [
//   {
//     id: 1,
//     title: "Sunt aut facere repellat provident",
//     preview: "quia et suscipit\nsuscipit recusandae...",
//     author: "User 1",
//     publishedOn: "January 15, 2023"
//   },
//   ...etc
// ]

filter() Method

The filter() method creates a new array with all elements that pass the test implemented by the provided function. Think of it as a sieve or a quality control station that only lets through items that meet certain criteria.

// Basic syntax
// const newArray = array.filter(callback(element [, index [, array]]) [, thisArg])

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

// Get only even numbers
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4, 6, 8, 10]

// Get numbers greater than 5
const largeNumbers = numbers.filter(num => num > 5);
console.log(largeNumbers);  // [6, 7, 8, 9, 10]

// Using index in the callback
const positionalFilter = numbers.filter((num, index) => {
    // Keep elements with even indices or values greater than 7
    return index % 2 === 0 || num > 7;
});
console.log(positionalFilter);  // [1, 3, 5, 7, 8, 9, 10]

Filtering Objects

const products = [
    { id: 1, name: "Laptop", price: 999, inStock: true },
    { id: 2, name: "Phone", price: 699, inStock: true },
    { id: 3, name: "Tablet", price: 399, inStock: false },
    { id: 4, name: "Headphones", price: 199, inStock: true },
    { id: 5, name: "Keyboard", price: 59, inStock: false }
];

// Get only products in stock
const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts.length);  // 3

// Get affordable products (price < 500)
const affordableProducts = products.filter(product => product.price < 500);
console.log(affordableProducts.length);  // 3

// Combining conditions: affordable AND in stock
const affordableAvailableProducts = products.filter(
    product => product.price < 500 && product.inStock
);
console.log(affordableAvailableProducts.length);  // 1

Real-World Example: Search and Filter

class ProductCatalog {
    constructor(products) {
        this.products = products;
    }
    
    // Filter by price range
    filterByPriceRange(minPrice, maxPrice) {
        return this.products.filter(product => 
            product.price >= minPrice && product.price <= maxPrice
        );
    }
    
    // Filter by availability
    filterByAvailability(inStockOnly) {
        return inStockOnly
            ? this.products.filter(product => product.inStock)
            : this.products;
    }
    
    // Search by name
    searchByName(query) {
        const searchTerm = query.toLowerCase();
        return this.products.filter(product => 
            product.name.toLowerCase().includes(searchTerm)
        );
    }
    
    // Combined filter method that can apply multiple filters
    applyFilters({ 
        minPrice = 0, 
        maxPrice = Infinity, 
        inStockOnly = false, 
        searchQuery = '' 
    }) {
        return this.products.filter(product => {
            // Price range filter
            const priceInRange = product.price >= minPrice && product.price <= maxPrice;
            
            // Availability filter
            const availabilityMatch = inStockOnly ? product.inStock : true;
            
            // Search query filter
            const searchMatch = searchQuery 
                ? product.name.toLowerCase().includes(searchQuery.toLowerCase())
                : true;
            
            // Return product only if it passes all filters
            return priceInRange && availabilityMatch && searchMatch;
        });
    }
}

// Usage
const catalog = new ProductCatalog(products);

// Basic filters
console.log("Products under $500:", catalog.filterByPriceRange(0, 500));
console.log("In-stock products:", catalog.filterByAvailability(true));
console.log("Products with 'phone' in name:", catalog.searchByName("phone"));

// Combined filters
const filteredProducts = catalog.applyFilters({
    minPrice: 50,
    maxPrice: 300,
    inStockOnly: true,
    searchQuery: "head"
});
console.log("Combined filter results:", filteredProducts);
// Should return only headphones

reduce() Method

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. Think of it as a factory that takes all items on a conveyor belt and combines them into a single finished product.

This is arguably the most powerful and flexible of the array methods, as it can be used to implement almost any array operation, including map and filter.

// Basic syntax
// array.reduce(callback(accumulator, currentValue [, index [, array]]) [, initialValue])

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

// Sum all numbers (with initial value 0)
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum);  // 15

// Step-by-step breakdown:
// Initial accumulator = 0 (the initial value we provided)
// Iteration 1: accumulator = 0, currentValue = 1 => accumulator = 0 + 1 = 1
// Iteration 2: accumulator = 1, currentValue = 2 => accumulator = 1 + 2 = 3
// Iteration 3: accumulator = 3, currentValue = 3 => accumulator = 3 + 3 = 6
// Iteration 4: accumulator = 6, currentValue = 4 => accumulator = 6 + 4 = 10
// Iteration 5: accumulator = 10, currentValue = 5 => accumulator = 10 + 5 = 15
// Final result: 15

The Importance of Initial Value

// Without initial value
const sumWithoutInitial = numbers.reduce((acc, curr) => acc + curr);
console.log(sumWithoutInitial);  // 15

// What happened without initial value?
// First element becomes the initial accumulator
// Iteration 1: accumulator = 1, currentValue = 2 => accumulator = 1 + 2 = 3
// Iteration 2: accumulator = 3, currentValue = 3 => accumulator = 3 + 3 = 6
// And so on...

// CAUTION: Be careful with empty arrays without initial value
const emptyArray = [];
// This will throw TypeError: Reduce of empty array with no initial value
// const result = emptyArray.reduce((acc, curr) => acc + curr);

// With initial value, it works fine
const resultWithInitial = emptyArray.reduce((acc, curr) => acc + curr, 0);
console.log(resultWithInitial);  // 0

Beyond Simple Sums

// Finding maximum value
const max = numbers.reduce((acc, curr) => {
    return Math.max(acc, curr);
}, -Infinity);
console.log(max);  // 5

// Creating a frequency counter
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCount = fruits.reduce((acc, fruit) => {
    // If the fruit exists in accumulator, increment its count
    // Otherwise, initialize it to 1
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});
console.log(fruitCount);  // { apple: 3, banana: 2, orange: 1 }

// Grouping objects by a property
const people = [
    { name: 'Alice', age: 25, department: 'Engineering' },
    { name: 'Bob', age: 32, department: 'Marketing' },
    { name: 'Charlie', age: 28, department: 'Engineering' },
    { name: 'David', age: 35, department: 'Marketing' },
    { name: 'Eve', age: 29, department: 'Engineering' }
];

const byDepartment = people.reduce((acc, person) => {
    // If the department exists in accumulator, add the person to that department's array
    // Otherwise, create a new array for that department
    const dept = person.department;
    acc[dept] = acc[dept] || [];
    acc[dept].push(person);
    return acc;
}, {});

console.log(byDepartment);
// {
//   Engineering: [
//     { name: "Alice", age: 25, department: "Engineering" },
//     { name: "Charlie", age: 28, department: "Engineering" },
//     { name: "Eve", age: 29, department: "Engineering" }
//   ],
//   Marketing: [
//     { name: "Bob", age: 32, department: "Marketing" },
//     { name: "David", age: 35, department: "Marketing" }
//   ]
// }

Implementing Other Array Methods with reduce()

// Implementing map with reduce
const mapWithReduce = (array, mapFn) => {
    return array.reduce((acc, curr, index, array) => {
        acc.push(mapFn(curr, index, array));
        return acc;
    }, []);
};

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

// Implementing filter with reduce
const filterWithReduce = (array, filterFn) => {
    return array.reduce((acc, curr, index, array) => {
        if (filterFn(curr, index, array)) {
            acc.push(curr);
        }
        return acc;
    }, []);
};

const evenNums = filterWithReduce(numbers, num => num % 2 === 0);
console.log(evenNums);  // [2, 4]

Real-World Example: Shopping Cart

const cart = [
    { id: 1, name: "Laptop", price: 999.99, quantity: 1, category: "Electronics" },
    { id: 2, name: "Headphones", price: 99.99, quantity: 2, category: "Electronics" },
    { id: 3, name: "Keyboard", price: 59.99, quantity: 1, category: "Electronics" },
    { id: 4, name: "Coffee Mug", price: 12.99, quantity: 3, category: "Home Goods" },
    { id: 5, name: "T-Shirt", price: 24.99, quantity: 2, category: "Clothing" }
];

// Calculate cart summary with reduce
const cartSummary = cart.reduce((summary, item) => {
    // Calculate item total
    const itemTotal = item.price * item.quantity;
    
    // Update total
    summary.total += itemTotal;
    
    // Count items
    summary.itemCount += item.quantity;
    
    // Track category totals
    if (!summary.categoryTotals[item.category]) {
        summary.categoryTotals[item.category] = 0;
    }
    summary.categoryTotals[item.category] += itemTotal;
    
    // Track most expensive item
    if (!summary.mostExpensiveItem || item.price > summary.mostExpensiveItem.price) {
        summary.mostExpensiveItem = {
            name: item.name,
            price: item.price
        };
    }
    
    return summary;
}, {
    total: 0,
    itemCount: 0,
    categoryTotals: {},
    mostExpensiveItem: null
});

console.log(cartSummary);
// Output:
// {
//   total: 1335.92,
//   itemCount: 9,
//   categoryTotals: {
//     Electronics: 1259.96,
//     "Home Goods": 38.97,
//     Clothing: 49.98
//   },
//   mostExpensiveItem: {
//     name: "Laptop",
//     price: 999.99
//   }
// }

Other Iteration Methods

some() and every()

These methods test whether at least one element or all elements in the array pass a test.

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

// some() - returns true if at least one element passes the test
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);  // true (2 and 4 are even)

const hasNegative = numbers.some(num => num < 0);
console.log(hasNegative);  // false (no negative numbers)

// every() - returns true if all elements pass the test
const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // true (all are positive)

const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven);  // false (not all are even)

// Real-world example: Form validation
const formFields = [
    { name: "username", value: "johndoe", valid: true },
    { name: "email", value: "john@example.com", valid: true },
    { name: "password", value: "pass", valid: false } // Too short
];

const allFieldsValid = formFields.every(field => field.valid);
console.log(`Form is ${allFieldsValid ? 'valid' : 'invalid'}`); // "Form is invalid"

const hasInvalidFields = formFields.some(field => !field.valid);
console.log(`Form ${hasInvalidFields ? 'has' : 'does not have'} invalid fields`); 
// "Form has invalid fields"

flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It's essentially a more efficient combination of map() followed by flat().

const sentences = ['Hello world', 'How are you?'];

// First with map() and then flat()
const wordsWithMapFlat = sentences
    .map(sentence => sentence.split(' '))
    .flat();
console.log(wordsWithMapFlat);  // ["Hello", "world", "How", "are", "you?"]

// Same result with flatMap()
const wordsWithFlatMap = sentences.flatMap(sentence => sentence.split(' '));
console.log(wordsWithFlatMap);  // ["Hello", "world", "How", "are", "you?"]

// Real-world example: Extracting and processing nested data
const userPosts = [
    { user: "Alice", posts: ["Post 1", "Post 2"] },
    { user: "Bob", posts: ["Post 3"] },
    { user: "Charlie", posts: [] }
];

// Get all posts with their authors
const allPosts = userPosts.flatMap(user => {
    return user.posts.map(post => ({
        author: user.user,
        content: post
    }));
});

console.log(allPosts);
// [
//   { author: "Alice", content: "Post 1" },
//   { author: "Alice", content: "Post 2" },
//   { author: "Bob", content: "Post 3" }
// ]

Method Chaining

One of the most powerful features of array methods is the ability to chain them together to create complex data transformations in a readable way.

const products = [
    { id: 1, name: "Laptop", price: 999, inStock: true, category: "Electronics" },
    { id: 2, name: "Phone", price: 699, inStock: true, category: "Electronics" },
    { id: 3, name: "Tablet", price: 399, inStock: false, category: "Electronics" },
    { id: 4, name: "Headphones", price: 199, inStock: true, category: "Electronics" },
    { id: 5, name: "Keyboard", price: 59, inStock: false, category: "Electronics" },
    { id: 6, name: "Mouse", price: 29, inStock: true, category: "Electronics" },
    { id: 7, name: "Coffee Mug", price: 15, inStock: true, category: "Home Goods" },
    { id: 8, name: "T-Shirt", price: 25, inStock: true, category: "Clothing" }
];

// Complex query: Get the names of the top 3 most expensive electronics that are in stock
const topElectronics = products
    .filter(product => product.category === "Electronics" && product.inStock)
    .sort((a, b) => b.price - a.price)
    .slice(0, 3)
    .map(product => product.name);

console.log(topElectronics);  // ["Laptop", "Phone", "Headphones"]

// Another example: Calculate total cost of in-stock items by category
const categoryCosts = Object.entries(
    products
        .filter(product => product.inStock)
        .reduce((acc, product) => {
            const category = product.category;
            acc[category] = (acc[category] || 0) + product.price;
            return acc;
        }, {})
).map(([category, total]) => ({
    category,
    total,
    formattedTotal: `$${total.toFixed(2)}`
}));

console.log(categoryCosts);
// [
//   { category: "Electronics", total: 1926, formattedTotal: "$1926.00" },
//   { category: "Home Goods", total: 15, formattedTotal: "$15.00" },
//   { category: "Clothing", total: 25, formattedTotal: "$25.00" }
// ]

Method chaining makes your code more readable and expressive compared to nested function calls or imperative approaches with loops.

Performance Considerations

While array methods are powerful and clean, there are some performance considerations to keep in mind:

Multiple iterations: Chaining several methods means multiple iterations over the array
Memory usage: Methods like map() and filter() create new arrays
Early termination: Traditional loops can break early; most iteration methods process the entire array

// Example: Finding the first matching element

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

// Using for loop (can break early)
function findFirstEvenWithLoop(arr) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 2 === 0) {
            return arr[i];
        }
    }
    return undefined;
}

// Using filter (processes entire array)
function findFirstEvenWithFilter(arr) {
    return arr.filter(num => num % 2 === 0)[0];
}

// Using find (stops after finding)
function findFirstEvenWithFind(arr) {
    return arr.find(num => num % 2 === 0);
}

console.log(findFirstEvenWithLoop(numbers));  // 2
console.log(findFirstEvenWithFilter(numbers));  // 2
console.log(findFirstEvenWithFind(numbers));  // 2

// Performance comparison for a large array
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);

console.time('loop');
findFirstEvenWithLoop(largeArray);
console.timeEnd('loop');

console.time('filter');
findFirstEvenWithFilter(largeArray);
console.timeEnd('filter');

console.time('find');
findFirstEvenWithFind(largeArray);
console.timeEnd('find');

// Results will show that find() and loop are much faster than filter()
// because they can terminate early

For best performance:

Use find()/findIndex() instead of filter()[0] when looking for a single element
Use some() instead of filter().length > 0 to check if any elements match
Use reduce() for operations that would otherwise require multiple iterations
For very performance-critical code with large arrays, traditional loops may still be faster

Real-World Applications

Data Analysis: Sales Report Generator

const sales = [
    { date: '2025-01-15', product: 'Laptop', price: 999, quantity: 2, region: 'North' },
    { date: '2025-01-16', product: 'Phone', price: 699, quantity: 5, region: 'South' },
    { date: '2025-01-16', product: 'Laptop', price: 999, quantity: 1, region: 'East' },
    { date: '2025-01-17', product: 'Tablet', price: 399, quantity: 3, region: 'West' },
    { date: '2025-01-17', product: 'Phone', price: 699, quantity: 2, region: 'North' },
    { date: '2025-01-18', product: 'Headphones', price: 199, quantity: 10, region: 'South' },
    { date: '2025-01-18', product: 'Laptop', price: 999, quantity: 3, region: 'West' },
    { date: '2025-01-19', product: 'Phone', price: 699, quantity: 4, region: 'East' },
    { date: '2025-01-19', product: 'Tablet', price: 399, quantity: 2, region: 'North' }
];

class SalesAnalyzer {
    constructor(salesData) {
        this.sales = salesData;
    }
    
    // Total revenue
    calculateTotalRevenue() {
        return this.sales.reduce((total, sale) => {
            return total + (sale.price * sale.quantity);
        }, 0);
    }
    
    // Revenue by product
    getRevenueByProduct() {
        return this.sales.reduce((result, sale) => {
            const { product, price, quantity } = sale;
            const revenue = price * quantity;
            
            if (!result[product]) {
                result[product] = 0;
            }
            
            result[product] += revenue;
            return result;
        }, {});
    }
    
    // Revenue by region
    getRevenueByRegion() {
        return this.sales.reduce((result, sale) => {
            const { region, price, quantity } = sale;
            const revenue = price * quantity;
            
            if (!result[region]) {
                result[region] = 0;
            }
            
            result[region] += revenue;
            return result;
        }, {});
    }
    
    // Sales by date
    getSalesByDate() {
        return this.sales.reduce((result, sale) => {
            const { date, price, quantity } = sale;
            const revenue = price * quantity;
            
            if (!result[date]) {
                result[date] = { totalRevenue: 0, items: 0 };
            }
            
            result[date].totalRevenue += revenue;
            result[date].items += quantity;
            return result;
        }, {});
    }
    
    // Best selling product by quantity
    getBestSellingProduct() {
        const productQuantities = this.sales.reduce((result, sale) => {
            const { product, quantity } = sale;
            
            if (!result[product]) {
                result[product] = 0;
            }
            
            result[product] += quantity;
            return result;
        }, {});
        
        return Object.entries(productQuantities)
            .sort((a, b) => b[1] - a[1])
            .map(([product, quantity]) => ({ product, quantity }))
            .shift();
    }
    
    // Top performing regions
    getRegionsByPerformance() {
        const regionRevenues = this.getRevenueByRegion();
        
        return Object.entries(regionRevenues)
            .sort((a, b) => b[1] - a[1])
            .map(([region, revenue]) => ({
                region,
                revenue,
                formattedRevenue: `${revenue.toLocaleString()}`
            }));
    }
    
    // Generate comprehensive report
    generateReport() {
        const totalRevenue = this.calculateTotalRevenue();
        const bestSellingProduct = this.getBestSellingProduct();
        const topRegions = this.getRegionsByPerformance();
        const revenueByProduct = this.getRevenueByProduct();
        const salesByDate = this.getSalesByDate();
        
        // Calculate daily revenue trend (% change)
        const dates = Object.keys(salesByDate).sort();
        const dailyTrend = dates.map((date, index) => {
            if (index === 0) return { date, percentChange: 0 };
            
            const currentRevenue = salesByDate[date].totalRevenue;
            const previousRevenue = salesByDate[dates[index - 1]].totalRevenue;
            const percentChange = ((currentRevenue - previousRevenue) / previousRevenue) * 100;
            
            return {
                date,
                percentChange: Math.round(percentChange * 100) / 100
            };
        }).slice(1); // Remove first entry (no previous day to compare)
        
        return {
            summary: {
                totalRevenue,
                formattedRevenue: `${totalRevenue.toLocaleString()}`,
                bestSellingProduct,
                topRegion: topRegions[0],
                averageOrderValue: totalRevenue / this.sales.length
            },
            productPerformance: Object.entries(revenueByProduct).map(([product, revenue]) => ({
                product,
                revenue,
                percentOfTotal: (revenue / totalRevenue) * 100
            })).sort((a, b) => b.revenue - a.revenue),
            regionPerformance: topRegions,
            dailyPerformance: dates.map(date => ({
                date,
                ...salesByDate[date],
                formattedRevenue: `${salesByDate[date].totalRevenue.toLocaleString()}`
            })),
            trends: {
                dailyRevenueChange: dailyTrend
            }
        };
    }
}

const analyzer = new SalesAnalyzer(sales);
const report = analyzer.generateReport();
console.log("Sales Analysis Report:");
console.log("=====================");
console.log(`Total Revenue: ${report.summary.formattedRevenue}`);
console.log(`Best Selling Product: ${report.summary.bestSellingProduct.product} (${report.summary.bestSellingProduct.quantity} units)`);
console.log(`Top Performing Region: ${report.summary.topRegion.region} (${report.summary.topRegion.formattedRevenue})`);
console.log("\nProduct Performance:");
report.productPerformance.forEach(product => {
    console.log(`${product.product}: ${product.revenue.toLocaleString()} (${product.percentOfTotal.toFixed(1)}% of total)`);
});
console.log("\nDaily Trends:");
report.trends.dailyRevenueChange.forEach(day => {
    const trend = day.percentChange >= 0 ? '▲' : '▼';
    const trendEmoji = day.percentChange >= 0 ? '📈' : '📉';
    console.log(`${day.date}: ${trend} ${Math.abs(day.percentChange)}% ${trendEmoji}`);
});

Image Gallery Component

class ImageGallery {
    constructor() {
        this.images = [];
        this.tags = new Set();
        this.lastId = 0;
    }
    
    addImage(url, title, tags = []) {
        const id = ++this.lastId;
        const image = {
            id,
            url,
            title,
            tags: [...tags],
            uploadedAt: new Date(),
            likes: 0
        };
        
        this.images.push(image);
        
        // Update tag collection
        tags.forEach(tag => this.tags.add(tag));
        
        return id;
    }
    
    removeImage(id) {
        const index = this.images.findIndex(img => img.id === id);
        if (index !== -1) {
            this.images.splice(index, 1);
            
            // Update tags (remove any that are no longer used)
            this.refreshTags();
            return true;
        }
        return false;
    }
    
    likeImage(id) {
        const image = this.images.find(img => img.id === id);
        if (image) {
            image.likes++;
            return image.likes;
        }
        return null;
    }
    
    refreshTags() {
        // Get all used tags
        const usedTags = new Set();
        this.images.forEach(img => {
            img.tags.forEach(tag => usedTags.add(tag));
        });
        
        // Update tags collection
        this.tags = usedTags;
    }
    
    getImagesByTag(tag) {
        return this.images.filter(img => img.tags.includes(tag));
    }
    
    getPopularImages(limit = 10) {
        return [...this.images]
            .sort((a, b) => b.likes - a.likes)
            .slice(0, limit);
    }
    
    getRecentImages(limit = 10) {
        return [...this.images]
            .sort((a, b) => b.uploadedAt - a.uploadedAt)
            .slice(0, limit);
    }
    
    searchImages(query) {
        const searchTerm = query.toLowerCase();
        return this.images.filter(img => 
            img.title.toLowerCase().includes(searchTerm) || 
            img.tags.some(tag => tag.toLowerCase().includes(searchTerm))
        );
    }
    
    generateTagCloud() {
        // Count how many times each tag is used
        const tagCounts = Array.from(this.tags).map(tag => {
            const count = this.images.reduce((acc, img) => {
                return acc + (img.tags.includes(tag) ? 1 : 0);
            }, 0);
            
            return { tag, count };
        });
        
        // Sort by popularity
        return tagCounts.sort((a, b) => b.count - a.count);
    }
    
    getImagesByDateRange(startDate, endDate) {
        const start = new Date(startDate).getTime();
        const end = new Date(endDate).getTime();
        
        return this.images.filter(img => {
            const uploadTime = img.uploadedAt.getTime();
            return uploadTime >= start && uploadTime <= end;
        });
    }
    
    getGalleryStats() {
        return {
            totalImages: this.images.length,
            totalLikes: this.images.reduce((sum, img) => sum + img.likes, 0),
            averageLikes: this.images.length ? 
                this.images.reduce((sum, img) => sum + img.likes, 0) / this.images.length :
                0,
            popularTags: this.generateTagCloud().slice(0, 5),
            oldestImage: this.images.length ? 
                [...this.images].sort((a, b) => a.uploadedAt - b.uploadedAt)[0] :
                null,
            newestImage: this.images.length ?
                [...this.images].sort((a, b) => b.uploadedAt - a.uploadedAt)[0] :
                null
        };
    }
}

// Usage example
const gallery = new ImageGallery();

// Add some images
gallery.addImage("photo1.jpg", "Sunset at the beach", ["nature", "sunset", "beach"]);
gallery.addImage("photo2.jpg", "Mountain landscape", ["nature", "mountains", "landscape"]);
gallery.addImage("photo3.jpg", "City skyline", ["city", "architecture", "skyline"]);
gallery.addImage("photo4.jpg", "Cute cat", ["animals", "cat", "pets"]);
gallery.addImage("photo5.jpg", "Delicious food", ["food", "restaurant"]);
gallery.addImage("photo6.jpg", "Another sunset", ["nature", "sunset", "ocean"]);

// Like some images
gallery.likeImage(1);
gallery.likeImage(1);
gallery.likeImage(1);
gallery.likeImage(2);
gallery.likeImage(3);
gallery.likeImage(3);
gallery.likeImage(4);

// Display gallery info
console.log("All tags:", Array.from(gallery.tags));
console.log("Nature photos:", gallery.getImagesByTag("nature").length);
console.log("Popular photos:", gallery.getPopularImages(3).map(img => img.title));
console.log("Tag cloud:", gallery.generateTagCloud());

// Search functionality
console.log("Search for 'sun':", gallery.searchImages("sun").map(img => img.title));

// Statistics
console.log("Gallery stats:", gallery.getGalleryStats());

Practice Activities

Activity 1: Data Transformation Pipeline

Create a data processing pipeline that uses multiple array iteration methods to clean, transform, and analyze a dataset of students with grades from multiple subjects.

Activity 2: Custom Implementation

Implement your own versions of map, filter, and reduce to better understand how they work internally. Compare your implementations with the built-in methods both in terms of features and performance.

Activity 3: Real-World Problem Solving

Develop a budget tracker that takes a list of transactions and uses array methods to generate reports: spending by category, monthly trends, and budget variance analysis.

Summary

In this lecture, we've explored:

The forEach() method for iterating over arrays with a callback function
The map() method for transforming array elements into a new array
The filter() method for selecting elements that match certain criteria
The powerful reduce() method for aggregating array data
Additional iteration methods like some(), every(), and flatMap()
Method chaining for complex data transformations
Performance considerations and best practices
Real-world applications of array iteration methods

Array iteration methods represent a paradigm shift from imperative to declarative programming. They allow you to express what you want to accomplish rather than how to accomplish it, leading to more readable, maintainable code. Mastering these methods is essential for effective JavaScript programming and will significantly improve your ability to work with collections of data.