map, filter and reduce

JavaScript map vs filter vs reduce Overview

JavaScript map(), filter(), and reduce() are powerful array methods used to transform, select, and combine data. These methods are essential in modern JavaScript development because they help write cleaner, shorter, and more readable code without manually writing loops.

Use map() when you want to transform every item, use filter() when you want to keep only matching items, and use reduce() when you want to calculate one final value from an array.

JavaScript map, filter and reduce Example

const numbers = [10, 20, 30, 40];

const doubled = numbers.map(function(number) {
  return number * 2;
});

const greaterThanTwenty = numbers.filter(function(number) {
  return number > 20;
});

const total = numbers.reduce(function(sum, number) {
  return sum + number;
}, 0);

console.log(doubled);
console.log(greaterThanTwenty);
console.log(total);

In this example, map() creates a transformed array, filter() creates a smaller array based on a condition, and reduce() calculates a single total value.

Top 10 JavaScript map, filter and reduce Examples

The following examples show practical use cases for map(), filter(), and reduce() in frontend, backend, API, and full-stack JavaScript projects.

Best Practices

• Use map() when every item needs to be transformed.
• Use filter() when only matching items should be kept.
• Use reduce() when the final result should be one value.
• Always return a value from map() callbacks.
• Always return a boolean condition from filter() callbacks.
• Always provide an initial value when using reduce().
• Use descriptive callback parameter names.
• Avoid overly long method chains that are hard to read.

Common Mistakes

• Using map() when forEach() is more appropriate.
• Forgetting to return a value from map().
• Using filter() when only one item is needed.
• Forgetting to return a boolean from filter().
• Using reduce() for logic that would be clearer with map() or filter().
• Not providing an initial value to reduce().
• Chaining too many methods in one line.

Key Takeaways

• map() transforms every item and returns a new array.
• filter() keeps matching items and returns a new array.
• reduce() combines values into one final result.
• These methods do not require manual loop counters.
• They are heavily used in React, Node.js, APIs, dashboards, and interviews.
• Choosing the right method makes JavaScript code easier to read and maintain.