JavaScript · Lesson 54
JavaScript Array Methods
map, filter, reduce — the three methods every JavaScript developer uses every single day.
Before I learned array methods, I used to write for loops for everything. Loop to filter items. Loop to transform data. Loop to calculate totals. Then I discovered map, filter and reduce — and my code became 3x cleaner overnight. This guide will do the same for you.
What are Array Methods?
Array methods are built-in JavaScript functions that work on arrays. Instead of writing loops manually, you call a method — and it does the work for you.
The most important ones to learn first: map, filter, reduce, forEach, find and includes.
Quick Reference
| Method |
What It Does |
Returns |
| map() |
Transform every item |
New array |
| filter() |
Keep items that match condition |
New array |
| reduce() |
Combine all items into one value |
Single value |
| forEach() |
Loop through every item |
Nothing |
| find() |
Find first matching item |
Single item |
| includes() |
Check if item exists |
true / false |
1. map() — Transform Every Item
map() goes through every item in an array and transforms it. The original array stays the same — it returns a new array.
// Double every number
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Real example — add currency symbol
const prices = [100, 200, 300];
const formatted = prices.map(p => `Rs. ${p}`);
console.log(formatted); // ["Rs. 100", "Rs. 200", "Rs. 300"]
2. filter() — Keep What You Need
filter() goes through every item and keeps only the ones that match your condition. Everything else is removed.
// Keep only numbers above 3
const numbers = [1, 2, 3, 4, 5];
const bigNumbers = numbers.filter(num => num > 3);
console.log(bigNumbers); // [4, 5]
// Real example — active users only
const users = [
{ name: 'Ali', active: true },
{ name: 'Sara', active: false },
{ name: 'Ahmed', active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); // Ali and Ahmed only
3. reduce() — Combine Into One Value
reduce() takes all items in an array and combines them into a single value. Perfect for totals, sums and calculations.
// Add all numbers together
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total); // 15
// Real example — shopping cart total
const cart = [
{ item: 'Shirt', price: 500 },
{ item: 'Pants', price: 1200 },
{ item: 'Shoes', price: 2500 }
];
const cartTotal = cart.reduce((sum, item) => sum + item.price, 0);
console.log(cartTotal); // 4200
Pro Tips
Pro Tip #1 — Chain them together
You can chain map, filter and reduce together. For example: filter the array first, then map the result. This is how real JavaScript code looks in production.
Pro Tip #2 — map() never changes original array
This is important! map(), filter() and reduce() never modify the original array. They always return a NEW array. Your original data stays safe.
Pro Tip #3 — Use forEach() for side effects only
Use forEach() when you want to DO something with each item — like log it or update the DOM — but don't need a new array back. For transformations always use map().
Quick Reference Cheatsheet
// map — transform
array.map(item => item * 2)
// filter — keep matching items
array.filter(item => item > 10)
// reduce — combine to single value
array.reduce((total, item) => total + item, 0)
// forEach — loop without return
array.forEach(item => console.log(item))
// find — first matching item
array.find(item => item.id === 1)
// includes — check if exists
array.includes('apple')
// chain them!
array.filter(x => x > 0).map(x => x * 2)
Want daily web dev tips?
Follow Muhammad Waheed Asghar for daily JavaScript and CSS tips!
.jpg.png)
