🔄

How to Use Map, Filter, and Reduce in JavaScript

JavaScriptBeginner

Transform arrays with powerful functional methods.

Code Example

JavaScript
// Map, Filter, Reduce in JavaScript

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// MAP - transform each element
const doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled);

const labels = numbers.map(n => `Item ${n}`);
console.log("Labels:", labels);

// FILTER - keep matching elements
const evens = numbers.filter(n => n % 2 === 0);
console.log("\nEvens:", evens);

const bigNumbers = numbers.filter(n => n > 5);
console.log("Big numbers:", bigNumbers);

// REDUCE - combine into single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log("\nSum:", sum);

const product = numbers.reduce((acc, n) => acc * n, 1);
console.log("Product:", product);

// Chaining methods
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .reduce((acc, n) => acc + n, 0);

console.log("\nChained result:", result);

Explanation

map() transforms arrays, filter() selects elements, reduce() combines elements. These methods return new arrays without modifying the original.

Related Tutorials