Hey Paramveer

How to Use map(), filter(), and reduce in JavaScript

Written by

Paramveer Singh

in

JavaScript provides powerful array methods like map(), filter(), and reduce() that help you write clean, efficient, and functional code. These methods allow you to transform, filter, and aggregate data in a concise way. In this guide, we’ll explore each method with practical examples.

1. The map() Method

The map() method creates a new array by applying a function to each element of an existing array.

Example: Transforming an array

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num * num);

console.log(squares); // [1, 4, 9, 16, 25]
  • Returns a new array without modifying the original array.
  • Perfect for transforming data.

Example: Mapping objects

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 }
];

const names = users.map(user => user.name);
console.log(names); // ['John', 'Jane']

2. The filter() Method

The filter() method creates a new array containing only the elements that pass a test provided by a function.

Example: Filtering numbers

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]
  • Does not modify the original array.
  • Useful for extracting subsets of data.

Example: Filtering objects

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 },
  { name: 'Jack', age: 20 }
];

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

3. The reduce() Method

The reduce() method executes a reducer function on each array element, resulting in a single value.

Syntax:

array.reduce((accumulator, currentValue) => {
  // return updated accumulator
}, initialValue);

Example: Sum of numbers

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum); // 15

Example: Flattening an array

const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);

console.log(flat); // [1, 2, 3, 4, 5]

4. Combining map(), filter(), and reduce()

These methods can be chained together for powerful data manipulation:

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

const result = numbers
  .filter(num => num % 2 === 0)  // [2, 4]
  .map(num => num * num)         // [4, 16]
  .reduce((total, num) => total + num, 0); // 20

console.log(result); // 20
  • filter() selects even numbers.
  • map() squares them.
  • reduce() sums the squares.

5. Best Practices

  • Use map() when transforming arrays.
  • Use filter() when selecting a subset of elements.
  • Use reduce() for aggregation or combining array values.
  • Chain methods for clean, functional-style code.
  • Avoid mutating the original array to maintain predictable behavior.

6. Wrapping Up

Mastering map(), filter(), and reduce() enables you to write more expressive, readable, and concise JavaScript code. These methods are foundational for working with arrays efficiently and performing complex data operations with ease.

Next Step: Explore other array methods like forEach, some, and every to further enhance your JavaScript skills.

More posts