Map, Filter and Reduce

In modern JavaScript development, map, filter, and reduce are essential tools for handling data. These functional programming methods allow you to write cleaner, more expressive code that is easier to maintain than traditional for or while loops.

Map

• Transforms Elements: The map function iterates through an array and applies a transformation to each element via a callback function.
• New Array Creation: It is a "pure" function, meaning it does not modify the original array. Instead, it returns a brand-new array containing the transformed results.
• One-to-One Relationship: The length of the new array will always match the length of the original array. It maps one input to one output.

Syntax:

const newArray = array.map((element, index, array) => {
  // Return the new value for this element
  return transformedElement;
});

Examples:

Doubling Numbers:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Real-World Example: Extracting Data from an API Response:

Imagine you receive an array of user objects from a server, but you only need their usernames for a dropdown menu.

const users = [
  { id: 1, name: 'Alice', email: '[email protected]' },
  { id: 2, name: 'Bob', email: '[email protected]' },
  { id: 3, name: 'Charlie', email: '[email protected]' }
];

const userNames = users.map(user => user.name);
console.log(userNames); // ['Alice', 'Bob', 'Charlie']

Filter

• Creates New Array: The filter function evaluates each element against a condition. If the condition returns true, the element is kept; if false, it is discarded.
• Selective Inclusion: This is your primary tool for removing unwanted data. Unlike map, the resulting array is usually shorter than the original.

Syntax:

const newArray = array.filter((element) => {
  // Return true to keep the element, false to discard it
  return condition;
});

Examples:

Filtering Even Numbers:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

Real-World Example: Search Functionality:

Filtering a list of products based on a minimum price or a specific category.

const products = [
  { name: 'Laptop', price: 1000, category: 'Electronics' },
  { name: 'Shirt', price: 25, category: 'Apparel' },
  { name: 'Phone', price: 500, category: 'Electronics' }
];

const electronics = products.filter(product => product.category === 'Electronics');
console.log(electronics); // [{ name: 'Laptop'... }, { name: 'Phone'... }]

Reduce

• Aggregates Elements: The reduce function is the most powerful of the three. It boils down an entire array into a single result—which could be a number, a string, an object, or even another array.
• Iterative Accumulation: It uses an "accumulator" (a running total) that carries over from one iteration to the next.
• Useful for Summary: Perfect for calculating totals, averages, or transforming a list into a grouped object.

Syntax:

const result = array.reduce((accumulator, current) => {
  return newAccumulatorValue;
}, initialValue);

Examples:

Summing Numbers:

const numbers = [1, 2, 3, 4, 5];
// 0 is the initialValue (the starting point for our sum)
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 15

Real-World Example: Calculating Shopping Cart Total:

Reducing an array of items to a final checkout price.

const cart = [
  { item: 'Bread', price: 2.50 },
  { item: 'Milk', price: 1.50 },
  { item: 'Cheese', price: 4.00 }
];

const totalCost = cart.reduce((total, product) => total + product.price, 0);
console.log(totalCost); // 8.00