JS Guide
HomeQuestionsSearchResources
Search

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeQuestionsjavascript
PrevNext
javascript
junior
arrays

What is the difference between map(), filter(), and reduce() array methods?

arrays
map
filter
reduce
functional-programming
fundamentals
Quick Answer

map() transforms each element and returns a new array of the same length, filter() returns elements that pass a test, and reduce() accumulates array elements into a single value.

Detailed Explanation

These are three fundamental array methods for functional programming in JavaScript:

map()

  • Transforms each element using a callback function
  • Returns a new array with the same length
  • Does not modify the original array
  • Use when: You want to transform data

filter()

  • Tests each element with a callback that returns boolean
  • Returns a new array with only elements that pass the test
  • May return fewer elements than the original
  • Use when: You want to select/exclude items

reduce()

  • Executes a reducer function on each element
  • Accumulates results into a single value
  • Takes an initial value as second argument
  • Use when: You want to compute a single result from an array

Code Examples

map() - Transform elements
const numbers = [1, 2, 3, 4, 5];

// Double each number
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Extract property from objects
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob']

Real-World Applications

Use Cases

Data Transformation Pipelines

Chaining map, filter, and reduce for ETL (Extract, Transform, Load) operations on datasets

E-commerce Product Processing

Filter in-stock products, map to extract prices, and reduce to calculate cart totals

Search and Autocomplete

Filter arrays based on user input in real-time for search suggestions

Analytics Aggregation

Using reduce to sum metrics, count occurrences, and group data by categories

Mini Projects

Shopping Cart Calculator

beginner

Build a cart that uses reduce for totals, map for formatting, and filter for applying discounts

Data Dashboard

intermediate

Fetch JSON data, transform with map, filter by criteria, and reduce for statistics

Industry Examples

React

List rendering uses map extensively: items.map(item => <Component key={item.id} />)

Redux

Reducers are named after the reduce pattern, accumulating state changes over time

Lodash

Popular utility library built around functional concepts including map, filter, reduce

D3.js

Data visualization library uses these methods extensively for data binding and transformation

Resources

MDN - Array.prototype.map()

docs

MDN - Array.prototype.filter()

docs

MDN - Array.prototype.reduce()

docs
Previous
What are the primitive data types in JavaScript?
Next
What is the difference between == and === in JavaScript?