The Big Three Array Methods

If you learn just three array methods in JavaScript, make it these: map, filter, and reduce. They're used constantly in real-world code and will transform how you work with data.

map() - Transform Every Item

map() creates a new array by transforming each element:

code.js

1const numbers = [1, 2, 3, 4, 5];
2 
3// Double every number
4const doubled = numbers.map(num => num * 2);
5// [2, 4, 6, 8, 10]
6 
7// Get the length of each word
8const words = ["hello", "world", "javascript"];
9const lengths = words.map(word => word.length);
10// [5, 5, 10]

When to Use map()

Use map() when you need to:

Transform data from one format to another
Extract specific properties from objects
Apply a calculation to every item

code.js

1// Extract names from user objects
2const users = [
3  { name: "Alice", age: 25 },
4  { name: "Bob", age: 30 },
5  { name: "Charlie", age: 35 }
6];
7 
8const names = users.map(user => user.name);
9// ["Alice", "Bob", "Charlie"]

filter() - Keep Only What You Need

filter() creates a new array with only elements that pass a test:

code.js

1const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2 
3// Keep only even numbers
4const evens = numbers.filter(num => num % 2 === 0);
5// [2, 4, 6, 8, 10]
6 
7// Keep numbers greater than 5
8const big = numbers.filter(num => num > 5);
9// [6, 7, 8, 9, 10]

When to Use filter()

Use filter() when you need to:

Remove unwanted items from an array
Find all items matching certain criteria
Search through data

code.js

1// Find all adults
2const people = [
3  { name: "Alice", age: 25 },
4  { name: "Bob", age: 17 },
5  { name: "Charlie", age: 30 }
6];
7 
8const adults = people.filter(person => person.age >= 18);
9// [{ name: "Alice", age: 25 }, { name: "Charlie", age: 30 }]

reduce() - Combine Into One Value

reduce() processes all elements and returns a single value:

code.js

1const numbers = [1, 2, 3, 4, 5];
2 
3// Sum all numbers
4const sum = numbers.reduce((total, num) => total + num, 0);
5// 15
6 
7// Find the maximum
8const max = numbers.reduce((biggest, num) => 
9  num > biggest ? num : biggest, numbers[0]
10);
11// 5

Understanding reduce()

reduce() takes two arguments:

A callback function with (accumulator, currentValue)
An initial value for the accumulator

code.js

1// How reduce works step by step
2[1, 2, 3].reduce((acc, num) => acc + num, 0);
3 
4// Step 1: acc = 0, num = 1 → returns 1
5// Step 2: acc = 1, num = 2 → returns 3
6// Step 3: acc = 3, num = 3 → returns 6
7// Final result: 6

When to Use reduce()

Use reduce() when you need to:

Calculate a total or average
Flatten nested arrays
Group items by a property
Count occurrences

code.js

1// Count occurrences of each word
2const words = ["apple", "banana", "apple", "orange", "banana", "apple"];
3 
4const counts = words.reduce((acc, word) => {
5  acc[word] = (acc[word] || 0) + 1;
6  return acc;
7}, {});
8// { apple: 3, banana: 2, orange: 1 }

Chaining Methods Together

The real power comes from combining these methods:

code.js

1const products = [
2  { name: "Laptop", price: 1000, inStock: true },
3  { name: "Phone", price: 500, inStock: false },
4  { name: "Tablet", price: 300, inStock: true },
5  { name: "Watch", price: 200, inStock: true }
6];
7 
8// Get total value of in-stock items
9const inStockTotal = products
10  .filter(product => product.inStock)
11  .map(product => product.price)
12  .reduce((total, price) => total + price, 0);
13// 1500

Common Patterns

Remove Duplicates

code.js

1const numbers = [1, 2, 2, 3, 3, 3, 4];
2const unique = [...new Set(numbers)];
3// [1, 2, 3, 4]

Find an Item

code.js

1const users = [
2  { id: 1, name: "Alice" },
3  { id: 2, name: "Bob" }
4];
5 
6const bob = users.find(user => user.name === "Bob");
7// { id: 2, name: "Bob" }

Check If Any/All Match

code.js

1const numbers = [1, 2, 3, 4, 5];
2 
3const hasEven = numbers.some(n => n % 2 === 0);  // true
4const allPositive = numbers.every(n => n > 0);   // true

Key Differences

| Method | Returns | Use Case | |--------|---------|----------| | map | New array (same length) | Transform each item | | filter | New array (possibly shorter) | Keep matching items | | reduce | Single value | Combine all items |

Important Notes

These methods don't modify the original array - they return new arrays
Always return something in your callback functions
reduce() needs an initial value - don't forget the second argument

Practice These Methods

Array methods are used in almost every JavaScript project. Practice them until they become second nature:

Use map() to convert temperatures from Celsius to Fahrenheit
Use filter() to find all words longer than 5 characters
Use reduce() to calculate the average of an array

Our interactive exercises include plenty of array method challenges to help you master these essential tools.

JavaScript Array Methods - map, filter, and reduce Explained

The Big Three Array Methods

map() - Transform Every Item

When to Use map()

filter() - Keep Only What You Need

When to Use filter()

reduce() - Combine Into One Value

Understanding reduce()

When to Use reduce()

Chaining Methods Together

Common Patterns

Remove Duplicates

Find an Item

Check If Any/All Match

Key Differences

Important Notes

Practice These Methods

Ready to practice what you learned?