JavaScript Array Methods Explained with a Real Shop Example

If you write JavaScript, you work with arrays all day: a list of products, a list of orders, a list of users. The good part is that you don't need loops for most of it. A handful of JavaScript array methods do almost everything, and once they click, your code gets shorter and much easier to read.

We'll use one example throughout: the products in a small shop. It's the same kind of data our POS software handles every day.

const products = [
  { name: "Sugar 1kg", price: 160, stock: 25, category: "grocery" },
  { name: "Cooking Oil 1L", price: 560, stock: 4, category: "grocery" },
  { name: "Milk 1L", price: 220, stock: 0, category: "dairy" },
  { name: "Tea 200g", price: 450, stock: 12, category: "grocery" },
];

map(): change every item

map() runs a function on every item and gives you a new array of the results. The original array isn't touched.

Get just the product names:

const names = products.map((p) => p.name);
// ["Sugar 1kg", "Cooking Oil 1L", "Milk 1L", "Tea 200g"]

Or add 18% sales tax to every price:

const withTax = products.map((p) => ({ ...p, price: Math.round(p.price * 1.18) }));
// Sugar 1kg is now 189, Cooking Oil 1L is 661, and so on

The { ...p, price: ... } part copies the product and replaces only the price.

filter(): keep only some items

filter() keeps the items where your function returns true.

Which products are running low?

const lowStock = products.filter((p) => p.stock < 5);
// Cooking Oil 1L (4 left) and Milk 1L (0 left)

find(): get the first match

find() is like filter(), but it stops at the first match and returns that one item, not an array.

const tea = products.find((p) => p.name === "Tea 200g");
// { name: "Tea 200g", price: 450, stock: 12, category: "grocery" }

const rice = products.find((p) => p.name === "Rice 5kg");
// undefined (no match)

Always handle the undefined case before you use the result, for example with if (!rice) return;.

reduce(): turn a list into one value

reduce() looks scary at first, but it's simple: it walks through the array and keeps a running total.

Here's a customer's cart:

const cart = [
  { name: "Sugar 1kg", price: 160, qty: 2 },
  { name: "Tea 200g", price: 450, qty: 1 },
];

const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
// 770

sum starts at 0 (the second argument). For each item it adds price × qty: first 320, then 450, so the total is 770.

some() and every(): yes-or-no questions

products.some((p) => p.stock === 0);  // true: at least one item is out of stock
products.every((p) => p.price > 0);   // true: every item has a price

Both return true or false, and both stop early as soon as they know the answer.

sort(): put items in order

Sorting by price, cheapest first:

const byPrice = [...products].sort((a, b) => a.price - b.price);
// Sugar 1kg (160), Milk 1L (220), Tea 200g (450), Cooking Oil 1L (560)

Two things to know:

• sort() changes the original array. That's why we copy it first with [...products]. In modern browsers you can use products.toSorted(...) instead, which returns a new array.
• Always pass a compare function for numbers. Without one, JavaScript sorts them as text: [10, 9, 100].sort() gives [10, 100, 9].

Chaining methods together

The real power comes from combining them. What's the total value of grocery stock on the shelves?

const groceryStockValue = products
  .filter((p) => p.category === "grocery")
  .reduce((sum, p) => sum + p.price * p.stock, 0);
// 160×25 + 560×4 + 450×12 = 11,640

Read it top to bottom: keep the grocery items, then add up price × stock. No loop, no temporary variables.

Common mistakes

Forgetting to return inside curly braces

const names = products.map((p) => { p.name });   // [undefined, undefined, ...]
const names2 = products.map((p) => { return p.name; }); // works
const names3 = products.map((p) => p.name);       // works, and shorter

With { } you must write return. Without braces, the value is returned automatically.

Using map() when you don't need a new array

If you only want to do something with each item, like print it, use forEach():

products.forEach((p) => console.log(p.name));

map() builds a new array, so using it only for side effects wastes memory and confuses the next person reading your code.

reduce() on an empty array without a starting value

[].reduce((sum, n) => sum + n);    // TypeError!
[].reduce((sum, n) => sum + n, 0); // 0

Always give reduce() a starting value.

Quick reference

Frequently asked questions

What's the difference between map() and forEach()?

map() returns a new array with the results. forEach() returns nothing; it just runs your function for each item. Use map() when you need the new array, and forEach() when you don't.

What's the difference between find() and filter()?

find() returns the first matching item (or undefined). filter() returns an array of every matching item, which may be empty.

Do these methods change the original array?

map(), filter(), find(), reduce(), some() and every() don't. sort(), reverse() and splice() do, so copy the array first or use the newer toSorted(), toReversed() and toSpliced().

The short version

Learn map(), filter(), find() and reduce() first. They cover most everyday work with lists. Add some(), every() and a safe sort(), and you'll rarely need a for loop again.

Building a web app or business software and need a hand? See what we build or talk to our team.