What Are Map, Filter, and Reduce
Map, filter, and reduce are three methods that work on arrays. They help you do common tasks on arrays without writing long for loops.
In one line each:
Map — change every item in the array.
Filter — keep only the items you want.
Reduce — turn the whole array into one single value.
A simple way to remember them: think of an array as a list of fruits on a table. Map is like a machine that cuts every fruit into slices. Filter is like a net that keeps only the red fruits. Reduce is like a blender that turns all fruits into one juice.
Why Should You Learn Them
Without these methods, you write a for loop for every small task. That takes more lines and is easy to get wrong.
With them, one line does the work. Your code becomes short, clean, and easy to read. React, Node.js, and almost every modern JavaScript library use them everywhere. Interviewers also ask about them in almost every frontend job.
How They Work Inside
All three methods do one simple thing — they visit every item in the array, one by one. You give them a small function (called a callback). They run your function on each item and decide what to return at the end.
map()
filter()
reduce()
An important point: none of them change the original array. They always give you a new array or a new value. That makes your code safe and easy to debug.
Map: Change Every Item
Map takes an array. Your function runs on each item. Map puts the new values into a new array. The new array has the same size as the old one.
Example 1: Convert Prices from USD to INR
const pricesUSD = [12, 45, 99, 7, 250];
const pricesINR = pricesUSD.map(price => price * 83);
console.log(pricesINR);
// [996, 3735, 8217, 581, 20750]
Read it out loud: "Take every price and multiply it by 83." That is all map does.
Example 2: Same Code, Three Ways to Write It
You will see map written in different styles in real code. All three give the same result.
const nums = [10, 20, 30, 40];
function square(n) { return n * n; }
const s1 = nums.map(square);
const s2 = nums.map(function (n) { return n * n; });
const s3 = nums.map(n => n * n);
console.log(s1, s2, s3);
// [100, 400, 900, 1600] for all three
Example 3: Pick One Field from a List of Objects
This is the most common real use. You have a list of objects and you want just one field from each.
const books = [
{ title: "Atomic Habits", author: "James Clear" },
{ title: "Deep Work", author: "Cal Newport" },
{ title: "Rich Dad", author: "Robert K." }
];
const titles = books.map(book => book.title);
console.log(titles);
// ["Atomic Habits", "Deep Work", "Rich Dad"]
Filter: Keep Only What You Want
Filter also visits every item. But your job is simple — just say true (keep it) or false (drop it). Filter collects the kept items into a new array.
Example 1: Keep Only Positive Numbers
const temps = [-3, 12, 0, -7, 25, 18, -1];
const warm = temps.filter(t => t > 0);
console.log(warm);
// [12, 25, 18]
Read it: "Keep the temperature if it is greater than 0." Simple.
Example 2: Keep Only Products in Stock
const products = [
{ name: "Laptop", price: 55000, inStock: true },
{ name: "Keyboard", price: 1800, inStock: false },
{ name: "Mouse", price: 950, inStock: true },
{ name: "Monitor", price: 14000, inStock: true }
];
const available = products.filter(p => p.inStock);
console.log(available);
// Laptop, Mouse, Monitor (Keyboard is removed)
Example 3: Remove Empty or Bad Values
const inputs = ["hello", "", " ", "world", null, "js", undefined];
const clean = inputs.filter(v => v && v.trim() !== "");
console.log(clean);
// ["hello", "world", "js"]
Reduce: Turn the Array into One Value
Reduce is the most powerful one, but also the one most people find hard. Once you get the idea, it is simple.
Reduce carries a running total called the accumulator. On each item, you update the total. At the end, you get that total back as the final answer.
The reduce callback gets two things: (acc, current). acc is your running total. current is the current item. You always pass an initial value as the second argument to reduce. This is the starting value of your total.
Example 1: Add All Expenses
const expenses = [250, 1200, 75, 500, 320];
const total = expenses.reduce((acc, current) => acc + current, 0);
console.log(total);
// 2345
Let's walk through it step by step so you see what happens inside.
Example 2: Find the Highest Score
const scores = [78, 92, 65, 88, 99, 71];
const highest = scores.reduce((max, current) => {
return current > max ? current : max;
}, 0);
console.log(highest);
// 99
We start with 0 as the max. On each score, we check: is the current score bigger than our max? If yes, make it the new max. Otherwise keep the old max.
Example 3: Count Items by Group
Reduce can also build an object. Here we count how many items are in each group.
const items = [
{ name: "Apple", type: "fruit" },
{ name: "Carrot", type: "veggie" },
{ name: "Banana", type: "fruit" },
{ name: "Spinach", type: "veggie" },
{ name: "Mango", type: "fruit" }
];
const count = items.reduce((acc, item) => {
acc[item.type] = (acc[item.type] || 0) + 1;
return acc;
}, {});
console.log(count);
// { fruit: 3, veggie: 2 }
We start with an empty object {}. For each item, we check if the type exists. If yes, add 1. If not, start at 1.
Chaining: Using All Three Together
Map and filter return new arrays, so you can join them with a dot. This is called chaining. Each step does one small job.
Real Task: Total Revenue from Premium Orders
We have a list of orders. We want the total in INR, but only from premium orders.
const orders = [
{ id: 101, tier: "basic", amountUSD: 40 },
{ id: 102, tier: "premium", amountUSD: 120 },
{ id: 103, tier: "premium", amountUSD: 80 },
{ id: 104, tier: "basic", amountUSD: 25 },
{ id: 105, tier: "premium", amountUSD: 200 }
];
const totalINR = orders
.filter(o => o.tier === "premium")
.map(o => o.amountUSD * 83)
.reduce((sum, v) => sum + v, 0);
console.log(totalINR);
// 33200
Read the chain like a sentence: "From the orders, keep premium ones, change each to INR, add them all up." Three small steps, one clean line each.
Common Mistakes
Mistake 1: Forgetting to Return
If you use curly braces, you must write return. Without it, you get undefined for every item.
nums.map(n => { n * 2 }) returns [undefined, undefined, ...]. Write n => n * 2 (no braces) or n => { return n * 2; } (with return).
Mistake 2: Using Map Just to Log
If you only want to print or do a side effect, use forEach, not map. Map creates a new array you never use.
// Wrong
users.map(u => console.log(u.name));
// Right
users.forEach(u => console.log(u.name));
Mistake 3: Skipping the Initial Value in Reduce
Always pass a starting value to reduce. It avoids bugs and tells the reader what the total should look like.
[].reduce((a, b) => a + b); // Error on empty array
[].reduce((a, b) => a + b, 0); // 0 (safe)
Mistake 4: Using Filter When You Want Only One
If you want just the first match, use find. Filter keeps going through the whole array even after finding a match.
// Slow and gives an array
users.filter(u => u.id === 5)[0];
// Fast and gives the user directly
users.find(u => u.id === 5);
Quick Comparison
| Thing | map | filter | reduce |
|---|---|---|---|
| Gives back | Same-size array | Smaller or same array | One value |
| Callback returns | New item | true or false | New total |
| Needs starting value? | No | No | Yes (always pass it) |
| Changes original? | No | No | No |
| Use it to | Change each item | Pick items | Get sum, max, object |
Where You Use Them in Real Projects
Showing a List in React
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}
Cart Total in a Shopping App
const cart = [
{ name: "T-Shirt", price: 499, qty: 2 },
{ name: "Jeans", price: 1299, qty: 1 },
{ name: "Cap", price: 249, qty: 3 }
];
const total = cart
.map(i => i.price * i.qty)
.reduce((s, v) => s + v, 0);
console.log(total);
// 3044
Dashboard Summary
const tickets = [
{ id: 1, status: "open" },
{ id: 2, status: "closed" },
{ id: 3, status: "open" },
{ id: 4, status: "pending" },
{ id: 5, status: "closed" }
];
const summary = tickets.reduce((acc, t) => {
acc[t.status] = (acc[t.status] || 0) + 1;
return acc;
}, {});
console.log(summary);
// { open: 2, closed: 2, pending: 1 }
let result = [] and then a for loop, stop. Ask yourself — is this really a map, a filter, or a reduce? Most of the time, yes.
Summary
Map, filter, and reduce are three array methods in JavaScript. Map changes every item. Filter picks some items. Reduce turns the whole array into one value.
All three visit every item in the array. All three give back a new result without changing the original. You can join them with a dot to make clean pipelines — for example, filter first, then map, then reduce.
Remember the small rules: always return from your callback, always pass a starting value to reduce, use forEach for logging, and use find when you want only one item.
Once you are comfortable with these three, you are ready for the next step — writing your own polyfill for each. That is the most common JavaScript interview topic and it locks these ideas into your mind forever.
| Idea | In Short |
|---|---|
| Higher-order function | A function that takes another function as input |
| map() | Change every item, same size array out |
| filter() | Keep items where callback returns true |
| reduce() | Turn array into one value using an accumulator |
| Initial value | Second argument to reduce — always pass it |
| Chaining | filter → map → reduce for clean pipelines |
| Nothing changes | Original array is never touched |
| forEach vs map | Use forEach when you don't need a new array |
| find vs filter | Use find when you want the first match only |