JavaScript has a lot of array methods and the names do not always tell you what they do. This page is a lookup: find what you are trying to do, get the method and a one-line example.
If you are meeting arrays for the first time, read JavaScript arrays explained first — this page assumes you know what map and filter are for.
Which method do I want?#
| I want to… | Use |
|---|---|
| Change every item the same way | map |
| Keep only some items | filter |
| Get one value out of the whole array | reduce |
| Find one item | find |
| Find where an item is | indexOf / findIndex |
| Check whether something is in there | includes |
| Check whether any / all items pass a test | some / every |
| Do something with each item, no result | forEach |
| Add or remove at the ends | push / pop / unshift / shift |
| Take a section without changing the original | slice |
| Remove or insert in the middle | splice |
| Put them in order | sort |
| Join two arrays | spread [...a, ...b] |
| Turn an array into a string | join |
| Flatten nested arrays | flat / flatMap |
Transforming#
const nums = [1, 2, 3];
nums.map(n => n * 2); // [2, 4, 6]
nums.map((n, i) => `${i}: ${n}`); // ["0: 1", "1: 2", "2: 3"]
[[1, 2], [3]].flat(); // [1, 2, 3]
["a b", "c"].flatMap(s => s.split(" ")); // ["a", "b", "c"]
nums.join(", "); // "1, 2, 3"map always returns an array of the same length. If you want fewer items, you want filter.
Filtering and searching#
const users = [
{ name: "Ada", age: 36, active: true },
{ name: "Sam", age: 24, active: false },
];
users.filter(u => u.active); // [{ Ada }]
users.find(u => u.age < 30); // { Sam } — the item, or undefined
users.findIndex(u => u.age < 30); // 1 — or -1
users.some(u => u.active); // true
users.every(u => u.age > 18); // true
["a", "b"].includes("a"); // true
["a", "b"].indexOf("b"); // 1
["a", "b"].indexOf("z"); // -1find gives you the item, filter gives you an array. Reaching for filter(...)[0] works but says the wrong thing.
Reducing to one value#
const prices = [100, 250, 80];
prices.reduce((sum, p) => sum + p, 0); // 430
prices.reduce((max, p) => Math.max(max, p)); // 250
// Counting occurrences
["a", "b", "a"].reduce((tally, x) => {
tally[x] = (tally[x] || 0) + 1;
return tally;
}, {}); // { a: 2, b: 1 }The second argument is the starting value. Leave it out and the first item becomes the start — which breaks on an empty array, so pass it.
Adding and removing#
const items = ["a", "b"];
items.push("c"); // add to end -> returns new length
items.pop(); // remove last -> returns the item
items.unshift("z"); // add to start
items.shift(); // remove first
items.splice(1, 1); // remove 1 item at index 1
items.splice(1, 0, "new"); // insert at index 1, removing nothingAll six change the array in place. That works even on a const array — const stops the name being reassigned, not the contents changing. See JavaScript variables explained.
Copying and combining#
const a = [1, 2];
const b = [3, 4];
[...a, ...b]; // [1, 2, 3, 4]
a.concat(b); // same thing
[...a]; // a real copy
a.slice(1); // [2] — from index 1 to the end
a.slice(0, 1); // [1] — end index not included
a.slice(-1); // [2] — last item
const alias = a; // NOT a copy — two names, one arrayOrdering#
const nums = [10, 9, 100, 2];
nums.sort(); // [10, 100, 2, 9] — sorted as TEXT
nums.sort((a, b) => a - b); // [2, 9, 10, 100] — correct
nums.sort((a, b) => b - a); // descending
const people = [{ age: 30 }, { age: 24 }];
people.sort((a, b) => a.age - b.age);
["Banana", "apple"].sort((a, b) => a.localeCompare(b)); // case-insensitive
[...nums].sort((a, b) => a - b); // sort without touching the original
nums.reverse();Which methods change the original?#
| Changes the original | Returns something new |
|---|---|
push pop shift unshift |
map filter slice concat |
splice sort reverse fill |
reduce flat flatMap join |
When it matters and you are unsure, copy first with [...items]. It costs nothing at the sizes you will be working with.
Chaining#
const orders = [
{ item: "pen", price: 50, paid: true },
{ item: "book", price: 300, paid: false },
{ item: "bag", price: 1200, paid: true },
];
const paidTotal = orders
.filter(o => o.paid)
.map(o => o.price)
.reduce((sum, p) => sum + p, 0); // 1250Each step returns a new array, so they chain. Keep the steps small and it reads top to bottom like a sentence.
Making arrays#
Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]
Array.from("abc"); // ["a", "b", "c"]
Array.from(document.querySelectorAll("li")); // NodeList -> real array
[...document.querySelectorAll("li")]; // same, shorter
new Array(3).fill(0); // [0, 0, 0]That NodeList conversion matters: querySelectorAll returns something array-like that has forEach but not map. Spreading it fixes the “map is not a function” error — see common JavaScript errors.
Questions people ask#
Should I use a for loop instead?
Use one when you need to stop early with break, or when the logic gets complicated enough that a chain becomes hard to read. Both styles are fine; consistency inside a project matters more.
Is chaining slow?
Each step walks the array once, so three chained methods make three passes. At the sizes most pages deal with this is irrelevant. If you are ever processing hundreds of thousands of items, a single loop is measurably faster.
What is the underscore in (_, i) =>?
A conventional name for a parameter you are deliberately not using. It has no special meaning to JavaScript — it just signals intent to whoever reads it.
How do I remove duplicates?
[...new Set(items)]. A Set cannot hold duplicates, and spreading it back gives you an array in the original order.
Why does my map return undefined values?
Your callback has braces but no return. n => n * 2 returns automatically; n => { n * 2 } does not. See JavaScript functions explained.
Where to go next#
- JavaScript arrays explained — the concepts behind these methods
- JavaScript objects explained
- JavaScript localStorage explained — saving an array between visits