map, filter, reduce, and includes - Explained Simply

If you write JavaScript, you reach for these four array methods constantly. Once they click, your code gets shorter and reads almost like plain English. This post explains each one with the simplest possible examples and — just as important — how to decide which one to use.

The one idea that makes it all click

Pick your method by what comes out the other end:

map → a new array, same length, each item changed
filter → a shorter array, same items, just fewer of them
reduce → a single value (a number, an object, anything)
includes → a simple yes or no (true / false)

Keep that table in your head and most of the work is done.

map — change every item

map takes a list and gives you back a new list of the same size, with each item transformed.

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6]

Whatever you return inside the function becomes the new item. The original array is untouched.

A more real example — turning a list of names into greetings:

const names = ["Asha", "Ravi", "Meera"];
const greetings = names.map(name => `Hello, ${name}!`);
// ["Hello, Asha!", "Hello, Ravi!", "Hello, Meera!"]

When to use it: whenever you’d say “I have a list of X, and I want a list of Y.” Reformatting data, pulling out one field, converting units.

filter — keep only the items you want

filter keeps an item if your function returns true, and drops it if it returns false.

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6]

Another example — keeping only the adults:

const people = [
  { name: "Asha", age: 17 },
  { name: "Ravi", age: 22 },
  { name: "Meera", age: 15 },
];

const adults = people.filter(person => person.age >= 18);
// [{ name: "Ravi", age: 22 }]

When to use it: any time you’d say “only the ones where…” You get back a subset of what you started with.

reduce — boil the list down to one thing

This is the one that trips people up, so go slowly. reduce walks through the list while carrying a running result called the accumulator.

const numbers = [10, 20, 30];

const sum = numbers.reduce((total, n) => total + n, 0);
//                          ^running  ^current      ^start
// Step 1: total = 0,  n = 10  →  10
// Step 2: total = 10, n = 20  →  30
// Step 3: total = 30, n = 30  →  60
// Result: 60

The 0 at the end is your starting value. Whatever you return each time becomes the total for the next item.

The accumulator doesn’t have to be a number. Here it’s an object that counts how often each fruit appears:

const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];

const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// { apple: 3, banana: 2, cherry: 1 }

When to use it: when you want one result built from the whole list — a total, a count, a maximum, or a grouped object. If the answer isn’t a list of the same items, reduce is often the right tool.

includes — is it in there?

includes answers a simple question: does this value exist in the array?

const colors = ["red", "green", "blue"];

colors.includes("green"); // true
colors.includes("yellow"); // false

It’s a much cleaner way to write a membership check than chaining a bunch of comparisons:

// Instead of this:
if (role === "admin" || role === "editor" || role === "author") { }

// Write this:
const allowed = ["admin", "editor", "author"];
if (allowed.includes(role)) { }

When to use it: checking whether something is in a list before you act on it.

How to choose, in one glance

What you want	Method
Same list, each item changed	`map`
A shorter list, fewer items	`filter`
A single number, object, or total	`reduce`
A yes-or-no answer	`includes`

They work beautifully together

In real code you often chain them. Read this from top to bottom and it almost speaks for itself:

const orders = [
  { item: "Book", price: 300, paid: true },
  { item: "Pen", price: 50, paid: false },
  { item: "Bag", price: 800, paid: true },
];

const totalPaid = orders
  .filter(order => order.paid)        // keep only paid orders
  .map(order => order.price)          // grab their prices
  .reduce((sum, price) => sum + price, 0); // add them up
// 1100

“Take the paid orders, get their prices, add them up.” That’s the whole power of these methods: they let your code describe what you want, not the fiddly loop mechanics of how.

The fastest way to actually learn this

Don’t just read the examples — retype them. Open your browser’s developer console right now, paste in a small array, and write each method by hand a few times with your own data. Change the numbers, break it on purpose, see what happens. The understanding comes from your fingers, not your eyes.

Start with map and filter until they feel automatic, then spend real time on reduce. Once these four are second nature, a huge amount of everyday JavaScript suddenly feels easy.

map, filter, reduce, and includes – Explained Simply