Array Iteration Methods: map(), filter(), and reduce()

Nili (Scharf) Ambinder

3 min read

·

Dec 22, 2024

--

Listen

Share

JavaScript includes many built in iterator methods, but I would like to deep dive into three of the most common iterator methods I have come across in my JavaScript journey thus far. The map(), filter(), and reduce() iterator methods are crucial for manipulating data. These methods assist in making our codes more readable and functional. I would like to explain each of these three iterator methods, their advantages, and how to employ them:

1. Map(). The trademark feature of the map() method is that it applies a function to every element in an array and returns a new array of the changed elements.
An advantage of using map() is that you can manipulate an entire array while leaving the original data unaltered.
Syntax:

array.map(callback(element, index, array))

Example:

const numbers = [1, 2, 3, 4, 5]
const tripled = numbers.map(n => n * 3)
console.log(tripled) // Output: [3, 6, 9, 12, 15]

In our example, the map() iterator method, map() applies (n => n * 3) to each element in the array and returns a new, manipulated array with 5 tripled values while leaving the original array unaltered.
Map() should be utilized when you want to create a new array with the manipulated data of each element in the original array.

2. As is implied in the name, the filter() iterator method filters the data in the original array and returns only the elements that satisfy a specific condition.
An advantage of using filter() is that you can extract certain elements from an array and/or eliminate unnecessary elements.
Syntax:

array.filter(callback(element, index, array))

Example:

const numbers = [1, 2, 3, 4, 5]
const odds = numbers.filter(n = n % 2 !== 0)
console.log(odds) // Output: [1, 3, 5]

In our example, filter() weighs each element against the given condition of (n = n % 2 !== 0) and returns an array of only the three elements that satisfy the condition.
Filter() should be utilized when you want to create a new array with only certain elements from the original array, again leaving the original array unaltered.

3. Reduce() combines all elements of an array and returns one single element by applying a callback function repeatedly. Reduce() is extremely useful and can be used for applying mathematical functions to an array of numbers (like adding together numbers in an array).

Syntax:

array.reduce(callback(acc, currentValue, index, array), initialValue)

Example:

const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((acc, n) => acc + n, 0) 
console.log(sum) // Output: 15

In our example, reduce() starts with a value of 0 and adds each element of the array to the accumulator as it iterates through the original array. Reduce() should be utilized when you want to combine all elements of an array into one value, again leaving the original array unaltered.

These array iterator methods can be utilized all together, as seen in the following example:

const foods = [
{name: pizza, price: 5},
{name: fries, price: 7},
{name: hamburger, price: 9}
]

const totalCost = foods
  .filter(food => foods.price < 8)
  .map(food => foods.price) 
  .reduce((acc, price) => acc + price, 0)

console.log(totalCost) // Output: 12

In our example, we used:

1. Filter() to extract foods that cost less than $8.
2. Map() to extract the prices of those two foods.
3. Reduce() to add the prices of those two foods together into one total cost.

In summary:

Press enter or click to view image in full size

In conclusion, understanding the three iterator methods of map(), filter(), and reduce() takes your understanding of JavaScript to the next level. Using iterator methods such as these makes for more functional and readable code.