JavaScript Array Methods

JavaScript array methods like map, filter and reduce let you transform lists of data without writing manual loops. They take a callback function that runs for each element, and they make code shorter and easier to read.

map: Transform Every Item

map returns a new array of the same length, where each item is the callback's return value.

const prices = [10, 25, 40];
const withTax = prices.map((p) => p * 1.1);
console.log(withTax.map((p) => p.toFixed(2)).join(" "));

11.00 27.50 44.00

filter: Keep Matching Items

filter returns a new array with only the items for which the callback returns true.

const products = [
  { name: "Rice", stock: 120 },
  { name: "Honey", stock: 0 },
  { name: "Tea", stock: 300 },
];
const available = products.filter((p) => p.stock > 0);
console.log(available.map((p) => p.name).join(", "));

Rice, Tea

reduce: Combine into One Value

reduce walks through the array carrying an accumulator. It is used for totals, counts and grouping. Always pass a starting value as the second argument.

const cart = [
  { item: "Pen", price: 2, qty: 5 },
  { item: "Book", price: 12, qty: 2 },
];
const total = cart.reduce((sum, line) => sum + line.price * line.qty, 0);
console.log("Total:", total);

const words = ["a", "b", "a", "c", "a"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] ?? 0) + 1;
  return acc;
}, {});
console.log(counts);

Total: 34
{
  "a": 3,
  "b": 1,
  "c": 1
}

find, findLast, some and every

find returns the first matching item (or undefined), findLast searches from the end, some checks if at least one item matches and every checks if all do.

const users = [
  { id: 1, name: "Ali", admin: false },
  { id: 2, name: "Zara", admin: true },
  { id: 3, name: "Noor", admin: true },
];
console.log(users.find((u) => u.admin).name);
console.log(users.findLast((u) => u.admin).name);
console.log(users.some((u) => u.id > 2));
console.log(users.every((u) => u.admin));

Zara
Noor
true
false

Chaining Methods

Because map and filter return arrays, you can chain them into a readable data pipeline.

const scores = [45, 88, 92, 61, 77];
const result = scores
  .filter((s) => s >= 60)
  .map((s) => s + 5)
  .toSorted((a, b) => b - a);
console.log(result.join(", "));

97, 93, 82, 66

forEach and Grouping

forEach just runs a function for each item and returns nothing. Object.groupBy (ES2024) groups items by a key.

["x", "y"].forEach((v, i) => console.log(i, v));

const items = [{ n: "Tea", c: "drink" }, { n: "Rice", c: "food" }, { n: "Coffee", c: "drink" }];
const grouped = Object.groupBy(items, (i) => i.c);
console.log(grouped.drink.length, grouped.food.length);

0 x
1 y
2 1

Frequently asked questions

What is the difference between map and forEach?

map returns a new array built from the callback results. forEach returns undefined and is only used for side effects like logging.

What is the difference between find and filter?

find returns the first matching element or undefined. filter returns an array of all matching elements, possibly empty.

Do map and filter change the original array?

No. They return new arrays. sort, reverse and splice do mutate, which is why toSorted and friends were added.