Understanding Array Iterator Methods in JS: filter, map, and reduce

JavaScript has built-in iteration methods for array transformation. Let's analyze filter(), map(), and reduce() and the conditions they should be used.

Array.filter()

It creates a new array with all the elements that pass the test implemented by the function provided. It calls the provided callback function once for each element in an array and returns a new array of all the values for which the callback function returns true.

Syntax

filter(callbackFn)
filter(callbackFn, thisArg)

It evaluates to: Array.filter((element, index, array) => { ... } )

The callbackFn is a function to execute for each element in the array which should return a true value to keep the resulting array's elements and a false value otherwise. The function takes three arguments: the current element, index, and the array itself.

In the example below, given an array of numbers and are expected to find the even ones, the filter() method would be of use as shown:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

Array.map()

The map() method creates a new array that is filled with the results of calling a provided function on every element in the current array. It invoked the callback function only for array indexes that have assigned values and not invoked for empty slots.

Syntax

map(callbackFn)
map(callbackFn, thisArg)

This simply translates to: Arrays.map((element, index, array) => { ... })

The callbackFn is a function to execute for each element in the array and the return value is added as a single element in the new array.
The function takes three arguments: the current element, index, and the array itself.

Given an array of numbers and are expected to return their squares, the map() method would be most effective as shown below:

const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map(number => number ** 2);
console.log(squareNumbers); // Output: [1, 4, 9, 16, 25]

We are mapping the values of one array into another.

Array.reduce()
The reduce() method runs a callback function reducer on each element of the array, in ascending-index order, passing in the return value from the preceding element's calculation. The final result of running the reducer across all the array elements is a single value.

If an initial value is provided, it will be used as the first argument in the first call of the callback. If no initial value is provided, the first element of the array is used as the initial value, then iteration will start from the second element.

Syntax

reduce(callbackFn)
reduce(callbackFn, initialValue)

The callbackFn is a function to execute for each element in the array. Its return value becomes the value of the accumulator parameter on the next invocation of the callback. For the last invocation, the return value becomes the return value of the reduce() function.
It takes the following arguments: accumulator, currentValue, currentIndex, and array it was called upon.

Using an array of numbers and being tasked with finding their sum, the reduce() method would easily evaluate it as shown below:

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

Conclusion
These methods filter(), map(), and reduce() are essential for array iteration and manipulation.

• filter() is best used to find all elements in a given array that meet the callback function criteria.

• map() is a non-destructive array method best used to manipulate data in a given array and expect a return value.

• reduce() is useful for aggregating array elements into a single value based on a reducer function.

References

• MDN Web Docs on Array.prototype.filter

• MDN Web Docs on Array.prototype.map

• MDN Web Docs on Array.prototype.reduce