When to use Map and Reduce

Map and Reduce are two array processing functions that are apart of the array object in JavaScript. As a whole I look to use the thsese two functions over while and for loops to perform operations of items in a array/collection.

I find more instances of map than reduce in my day to day coding. Recently, when refactoring some code, I though about when are times to use map and reduce.

When to Use Map

Use map when you need to transform an array of data into a new array with the same number of elements. For example, when doubling the values of an array of numbers:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); console.log(doubledNumbers); // [2, 4, 6, 8, 10]`

In the above example, the map function takes in the numbers array and applies the given callback function to each element. The lambda function number => number * 2 is provided as the callback function. This braceless lambda function will return the result of the expression, the given number multiplied by 2 (i.e. doubled). The result is a new array, doubledNumbers, which contains the doubled values from the original numbers array.

When to Use Reduce

Use reduce when you need to condense an array of data into a single value. For example, when finding the sum of an array of numbers, as shown in the second example.

const numbers = [1, 2, 3, 4, 5];
const sumOfNumbers = numbers.reduce((acc, current) => acc + current, 0);
console.log(sumOfNumbers); // 15

The reduce function takes in the numbers array and applies the (acc, current) => acc + current callback to each element. The callback adds the current element to the accumulator, which starts at 0. The final accumulator value, 15, is the result of the reduce function.

Object as a single value

Remember that an object is a valid value to reduce to . We can take the array of numbers from our two examples above and reduce it into a object containing odd and even number groupings:

const numbers = [1, 2, 3, 4, 5];
const initialGroupings = {
	odd: [],
	even: []
};
const numberGroupings = numbers.reduce((acc, current) => {
	 if(current % 2 === 0) acc.even = [...acc.even, current];
	 if(current % 2 !== 0) acc.odd = [...acc.odd, current];
	 return acc; 
 }, initialGroupings)
console.log(numberGroupings.even); // [2,4]
console.log(numberGroupings.odd); //  [1,3,5]

In the example above, we declare an empty object with a properties to hold an array or even and odd numbers. Our callback has two if statements that use checks is the dividing the current number by 2 leaves a remainder (using the mod % operator). That current number is added to the end of the even or odd array, using the array spread syntax (assigning a new array with the current value at the end to avoid mutating an array), depending on which if statement the current value returns true for. Since we have a function that has braces (because it's multiple lines), we specifically return the accumulator object. The reduce function returns the object with properties containg arrays of even and odd numbers respectively.

In both vanilla JavaScript and ReactJS, Map and Reduce can be powerful tools for processing and transforming arrays of data. Remembering when to use each function and how to use them correctly will help you write concise, and readable code.