JavaScript Array Methods: Map, Filter, and Reduce

JavaScript provides powerful built-in array methods to manipulate and transform data cleanly and immutably. Among the most widely used are map(), filter(), and reduce(). Each of these higher-order functions iterates over an array and applies a callback function to its elements. This article explains how each method operates, their specific use cases, and code examples demonstrating their behavior without mutating the original array.

1. The 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. It always returns a new array with the exact same length as the original.

How It Operates

• It iterates through the array from left to right.
• It passes each element, its index, and the original array into the callback function.
• The return value of the callback becomes the corresponding element in the new array.

Example

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

// Double each number
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] (original array remains unchanged)

2. The filter() Method

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

How It Operates

• It evaluates each element using a predicate function (a callback returning a boolean true or false).
• If the callback returns true, the element is included in the new array.
• If it returns false, the element is excluded.
• The length of the resulting array is less than or equal to the original array.

Example

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

// Keep only even numbers
const evens = numbers.filter(num => num % 2 === 0);

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

3. The reduce() Method

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements is a single value.

How It Operates

• It takes two arguments: a callback function (reducer) and an optional initialValue.
• The callback receives four arguments: the accumulator, the current value, the current index, and the source array.
• On each iteration, the accumulator stores the value returned from the previous iteration.
• It can return a single primitive (like a number or string) or a complex data structure (like an object or array).

Example

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

// Sum all values, starting with an initial accumulator value of 0
const sum = numbers.reduce((accumulator, currentVal) => {
  return accumulator + currentVal;
}, 0);

console.log(sum); // 15

Summary Comparison