How to Use Map, Filter, and Reduce in JavaScript

This article will provide a detailed examination of the “big three” list operations in JavaScript when and how to use: map, filter and reduce.

JavaScript is a powerful programming language used for creating interactive websites, web applications, and server-side programming. It is also a popular choice for data processing and manipulation functions. below

map, filter, and reduce are three higher-order functions in JavaScript that operate on arrays and are used to perform common data manipulation tasks. Here are the differences between them:

Map

The map function creates a new array by applying a provided function to each element in the original array. The function passed to map should return a new value based on the input value, and the resulting values are collected into a new array. For example:

const arr = [1, 2, 3];
const newArr = arr.map(x => x * 2);
console.log(newArr); // [2, 4, 6]

This example has an array of numbers from 1 to 3. We use the map() method to create a new array that contains each number doubled. The callback function takes in each number in the array and returns the number multiplied by 2. The resulting array contains the doubled numbers.

Filter

The filter function creates a new array with all the elements that pass a provided test. The test is specified by a function that is passed as an argument. The function should return a boolean value indicating whether the element should be included in the new array.

For example:

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(x => x % 2 === 0);
console.log(newArr); // [2, 4]

This example has an array of numbers from 1 to 5. We use the filter() method to create a new array that only contains the even numbers. The callback function takes in each number in the array and returns true if the number is even. The resulting array only contains the even numbers.

Reduce

The reduce function takes an array and reduces it to a single value by repeatedly applying a function to each element in the array. The function should take two arguments: an accumulator and the current value. The accumulator is initialized to an initial value, and the function should return a new accumulator value based on the input value.

For example:

const arr = [1, 2, 3];
const sum = arr.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);
console.log(sum); // 6

This example has an array of numbers from 1 to 3. We use the reduce() method to calculate the sum of the numbers. The callback function takes in an accumulator and the current number and returns the sum of the accumulator and the current number. The reduce() method initializes the accumulator to 0 and adds each number in the array to the accumulator. The final value of the accumulator is 6, which is the sum of the numbers in the array.

Conclusion

In simple language, the main difference between map, filter, and reduce is what they do with the elements of an array.

• map transforms each element of an array into a new value based on a function you provide, and returns a new array with these transformed values.
• filter selects certain elements from an array based on a function you provide, and returns a new array with only these selected elements.
• reduce iterates over the elements of an array, accumulating a single value based on a function you provide, and returns this accumulated value.

In summary, map transforms all elements, filter selects certain elements, and reduce accumulates elements into a single value.

Excercise

Can you please tell me which list operation you would use to calculate the sum of revenue from the array provided below?

const sales = [
  { month: 'January', revenue: 1000 },
  { month: 'February', revenue: 1500 },
  { month: 'March', revenue: 2000 },
  { month: 'April', revenue: 1800 },
  { month: 'May', revenue: 2200 },
  { month: 'June', revenue: 2500 },
  { month: 'July', revenue: 2800 },
  { month: 'August', revenue: 3000 },
  { month: 'September', revenue: 2700 },
  { month: 'October', revenue: 2400 },
  { month: 'November', revenue: 2000 },
  { month: 'December', revenue: 1800 },
];

//Please share your answer 

//Expected output
console.log(totalRevenue); // 27500

“If you found this article useful, please show your support by leaving a comment or sharing it with others.