JavaScript Array Methods: Map, Filter, Reduce Explained

Master JavaScript array methods - map, filter, reduce, and more. Learn functional programming patterns that make your code cleaner and more powerful. These methods are used in every modern JavaScript project.

Alex Thompson

Dec 16, 2025

8,140301

Array methods like map, filter, and reduce are the bread and butter of modern JavaScript. Once you master these, you'll write cleaner, more functional code.

Map: Transform Every Element

Map creates a new array by transforming every element. It's perfect for data transformation.

const numbers = [1, 2, 3, 4, 5];

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

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

Filter: Keep What You Want

Filter creates a new array with only elements that pass a test.

const numbers = [1, 2, 3, 4, 5, 6];

// Keep only even numbers
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

// Filter users by age
const users = [
  { name: 'John', age: 17 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 30 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Jane', age: 25 }, { name: 'Bob', age: 30 }]

Reduce: Combine Everything

Reduce combines all elements into a single value. It's powerful but takes practice to master.

const numbers = [1, 2, 3, 4, 5];

// Sum all numbers
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Count occurrences
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

Chaining Methods

The real power comes from chaining these methods together.

const users = [
  { name: 'John', age: 17, score: 85 },
  { name: 'Jane', age: 25, score: 92 },
  { name: 'Bob', age: 30, score: 78 },
  { name: 'Alice', age: 22, score: 95 }
];

// Get names of adult users with score > 80
const result = users
  .filter(user => user.age >= 18)
  .filter(user => user.score > 80)
  .map(user => user.name);

console.log(result); // ['Jane', 'Alice']

#JavaScript#Arrays#Map#Filter#Reduce

Common Questions & Answers

How do map, filter, and reduce work?

Map transforms each element and returns a new array. Filter keeps elements that pass a test and returns a new array. Reduce combines all elements into a single value. All three don't modify the original array and are functional programming patterns.

javascript

Run Explain

const numbers = [1, 2, 3, 4, 5];

// Map - transform each element
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// Filter - keep elements that pass test
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// Reduce - combine into single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// Chaining methods
const result = numbers
  .filter(n => n > 2)      // [3, 4, 5]
  .map(n => n * 2)         // [6, 8, 10]
  .reduce((acc, n) => acc + n, 0);  // 24

What are other useful array methods?

find() returns first element that passes test, findIndex() returns index, some() checks if any element passes test, every() checks if all pass, includes() checks if array contains value, flat() flattens nested arrays, and flatMap() combines map and flat.