Array Toolbox 0/8

JavaScript basicsArrays in plain wordsOne method at a time

Array
Toolbox

An array is a list of values in a row. Arrays come with built in tools for changing, searching, counting and sorting that list. This guide explains each one in plain words, with a small example you can run.

JavaScript ES202329 methods
00

Key terms in plain words

Never written code before? Start here. Every word below turns up later on this page, each with an everyday comparison drawn from a row of numbered boxes on a storeroom shelf. Underlined words in the modules link back to these cards.

21 terms in 4 groups. Hover an underlined word anywhere on the page for a quick reminder, or click it to jump here.

What an array is

An array is a row of numbered boxes on a shelf. These are the words for the row, the boxes and what sits inside them.

Array
A list of values kept in order. Each value sits in its own box, and the boxes are counted from zero along the row.
For example [30, 80, 10] is an array of three prices.
Item
One value in the array. It can be a number, a piece of text, or something bigger such as a whole order with its own details.
For example In ["apple", "mango"] the items are "apple" and "mango".
Position (index)
Where an item sits in the row. Counting starts at 0, so the first item is at position 0 and the third is at position 2. A method that finds nothing at all answers -1, a position that cannot exist.
For example fruits.at(0) gets the first item, fruits.at(-1) the last.
Length
How many items the array holds. It is always one more than the last position, because counting starts at 0.
For example [4, 5, 6].length is 3.
Object
A bundle of named values, such as a fruit with a name, a price and a quantity. Arrays often hold a list of objects, one per order or person.
For example { name: "apple", price: 30 } is one object.
String
A piece of text, written between quotes. Programmers call it a string because it is a string of letters in a row.
For example "mango" and "2026-09-28" are both strings.

Methods and helpers

Most tools on this page walk along the row for you. You hand them a small set of instructions to follow at every box.

Method
A built-in action that belongs to the array. You call it by writing a dot and its name after the array, then brackets.
For example prices.map(...) calls the map method on prices.
Function
A named or unnamed set of steps. It takes some values in, does its work and can hand one value back.
For example (price) => price + 5 is a tiny function that adds 5.
Callback
A function you pass to a method so the method can run it for you, once per item. This page calls it the helper. It usually receives the item and its position.
For example In prices.map((price) => price + 5) the helper is (price) => price + 5.
Return value
The answer a method or helper gives back. Knowing what each method returns, a new array, one item, a number or nothing, is most of the skill on this page.
For example forEach returns nothing; map returns a new array.
undefined
JavaScript's word for "no value here". find gives it back when nothing matches, and reading past the end of an array gives it too.
For example cart.find((item) => item.name === "kiwi") gives undefined.
True or false
The answer to a yes or no question. Programmers call these values booleans. some, every and includes all give one back.
For example [19, 24].every((age) => age >= 18) is true.

Changing or copying

Some tools rearrange the boxes on the real shelf. Others build a second shelf and leave the first one alone.

Mutate
To change the array you already have, in place. push, pop, splice, sort and reverse all do this, so anything else using that array sees the change too.
For example After days.splice(1, 2) the days array itself is shorter.
Copy
A new array built from the old one. Changing the copy leaves the original untouched, which avoids surprise bugs when the same list is used somewhere else.
For example days.slice(1, 3) copies two days and leaves days alone.
Original
The array you called the method on. The newer "to" methods, toSorted and toReversed, exist so the original stays safe.
Nested array
An array that holds other arrays as items. Flattening opens those inner boxes so every item sits in one plain row.
For example [1, [2, 3]].flat() gives [1, 2, 3].
Spread syntax
Three dots before an array, ...list, which lays its items out one by one inside something new. It is the usual way to copy or join arrays in modern code.
For example [...a, ...b] joins two arrays into a new one.

Getting answers out

Turning a whole shelf into one total, a neat order, or a short report.

Running total (accumulator)
The value reduce carries from one item to the next. You give it a start value, the helper updates it at every box, and whatever is left after the last box is the answer.
For example In prices.reduce((sum, price) => sum + price, 0) the running total is sum and it starts at 0.
Compare helper
A helper you give to sort or toSorted. It looks at two items and answers with a number: below zero puts the first one earlier, above zero puts it later. Without one, sort treats numbers as text, so 100 lands before 5.
For example (a, b) => a - b sorts numbers small to big.
Set
A separate kind of list that keeps each value only once. Turning an array into a Set and back is the quickest way to remove repeats.
For example [...new Set([1, 1, 2])] gives [1, 2].
Chaining
Calling one method straight after another, because each one hands back a new array. Read a chain top to bottom like the steps of a recipe.
For example paid.toSorted(...).slice(0, 2).map(...)
01

Loop and change

Visit every item with forEach, or build a brand new array with map.

Most usedforEachmapMust know

Think of an array as a row of boxes, each holding one value. Most array methods take a small helper function and call it once for every box, handing it the item and its position. What the method does with the helper's answer is what makes each method different.

Picture it: map

308010map(p => p + 5)358515Same number of boxes, every one changed.
forEach(item, index)

Runs your helper on every item. Use it when you only want to do something, like printing.

See the example
Gives nothingOnly reads
map(item, index)

Runs your helper on every item and collects each answer into a new array.

See the example
Gives a new array, same lengthMakes a copy
foreach-map.jsJAVASCRIPT
// forEach: do something with every item. It gives nothing back.
const prices = [30, 80, 10];
prices.forEach((price, index) => console.log(`item ${index} costs ₹${price}`));

// map: build a NEW array by changing every item
const withDelivery = prices.map((price) => price + 5);
console.log(withDelivery);
console.log(prices); // the original stays the same

Easy way to remember: if you want an array back, use map. If you just want to do something, use forEach.

Terminal OUTPUT
$ node foreach-map.js
item 0 costs ₹30
item 1 costs ₹80
item 2 costs ₹10
[ 35, 85, 15 ]
[ 30, 80, 10 ]
map-objects.jsJAVASCRIPT
const cart = [
  { name: "apple", price: 30, qty: 4 },
  { name: "mango", price: 80, qty: 2 },
  { name: "banana", price: 10, qty: 12 },
];

// pull one field out of every object
const names = cart.map((item) => item.name);
console.log(names);

// turn every object into a label
const labels = cart.map((item) => `${item.qty} x ${item.name}`);
console.log(labels);

Common use: turning a list of objects into a list of names, labels or IDs is one map away.

Terminal OUTPUT
$ node map-objects.js
[ 'apple', 'mango', 'banana' ]
[ '4 x apple', '2 x mango', '12 x banana' ]
02

Pick and search

Keep only the items you want with filter, or grab one item with find.

Searchingfilterfindincludesat

Picture it: filter

308010filter(p => p < 50)308010Keeps the boxes where the helper says yes.
filter(item)

Keeps every item where your helper returns true.

See the example
Gives a new, shorter arrayMakes a copy
find(item)

Returns the first item where your helper returns true.

See the example
Gives one item or undefinedOnly reads
findIndex(item)

Like find, but gives the position instead of the item.

See the example
Gives a number or -1Only reads
findLast(item)

Like find, but starts searching from the end.

See the example
Gives one item or undefinedOnly reads
includes(value)

Checks if the exact value is in the array.

See the example
Gives true or falseOnly reads
indexOf(value)

Tells you where the value first appears.

See the example
Gives a number or -1Only reads
at(index)

Gets the item at a position. Negative numbers count from the end.

See the example
Gives one itemOnly reads
filter-find.jsJAVASCRIPT
const cart = [
  { name: "apple", price: 30 },
  { name: "mango", price: 80 },
  { name: "banana", price: 10 },
];

const cheap = cart.filter((item) => item.price < 50);        // ALL that match
console.log(cheap.map((item) => item.name));

const mango = cart.find((item) => item.name === "mango");     // FIRST that matches
console.log(mango);

console.log(cart.findIndex((item) => item.name === "banana")); // its position
console.log(cart.find((item) => item.name === "kiwi"));       // nothing found

Easy way to remember: filter gives you a list, even if it is empty. find gives you one thing, or undefined when nothing matches.

Terminal OUTPUT
$ node filter-find.js
[ 'apple', 'banana' ]
{ name: 'mango', price: 80 }
2
undefined
includes.jsJAVASCRIPT
const fruits = ["apple", "mango", "banana", "mango"];

console.log(fruits.includes("mango"));     // is it there at all?
console.log(fruits.indexOf("mango"));      // first position
console.log(fruits.lastIndexOf("mango"));  // last position
console.log(fruits.indexOf("kiwi"));       // -1 means "not found"

console.log(fruits.at(0), fruits.at(-1));  // first item, last item

Tip: use includes for simple values like text and numbers. For objects, use find or some with a helper.

Terminal OUTPUT
$ node includes.js
true
1
3
-1
apple mango
03

Yes or no checks

Ask a question about the whole array and get back one true or false.

Questionssomeevery

Picture it: some

19241731some(a => a < 18)trueOne yes is enough.
some(item)

True if at least one item passes your test.

See the example
Gives true or falseOnly reads
every(item)

True only if every single item passes your test.

See the example
Gives true or falseOnly reads
some-every.jsJAVASCRIPT
const ages = [19, 24, 17, 31];

console.log(ages.some((age) => age < 18));    // is at least ONE under 18?
console.log(ages.every((age) => age >= 18));  // is EVERY one 18 or older?

// both stop early: some at the first yes, every at the first no
console.log([].some((n) => n > 0), [].every((n) => n > 0)); // empty array

Easy way to remember: some is "is there any?" and every is "are they all?". On an empty array some is false and every is true, because nothing failed.

Terminal OUTPUT
$ node some-every.js
true
false
false true
04

Boil it down

Squash a whole array into one value, like a total, a count or a winner, with reduce.

reduceTotalsCountingMust know

reduce feels hard at first, but it is just a loop that carries one value along. You give it a helper and a starting value. The helper receives the value so far and the current item, and returns the updated value. Whatever comes out after the last item is the answer.

Picture it: reduce

308010reduce((sum, p) => sum + p, 0)120Many boxes in, one value out.
Stepsum so farcurrent itemhelper returns
Start0300 + 30 = 30
Second308030 + 80 = 110
Third11010110 + 10 = 120
reduce.jsJAVASCRIPT
const prices = [30, 80, 10];

// reduce(helper, startValue)
// the helper gets the running result and the current item,
// and returns the new running result
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total);

// the same thing written as a plain loop
let sum = 0;
for (const price of prices) sum = sum + price;
console.log(sum);

See the link: reduce is the plain loop on the bottom, folded into one line. The 0 at the end is where the sum starts.

Terminal OUTPUT
$ node reduce.js
120
120
reduce-more.jsJAVASCRIPT
const cart = [
  { name: "apple", price: 30, qty: 4 },
  { name: "mango", price: 80, qty: 2 },
  { name: "banana", price: 10, qty: 12 },
];

// 1. the full bill
const bill = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
console.log(bill);

// 2. count how often each vote appears
const votes = ["yes", "no", "yes", "yes", "maybe"];
const tally = votes.reduce((count, vote) => {
  count[vote] = (count[vote] ?? 0) + 1;
  return count;
}, {});
console.log(tally);

// 3. keep the most expensive item
const priciest = cart.reduce((best, item) => (item.price > best.price ? item : best));
console.log(priciest.name);

Always give a start value: without one, reduce uses the first item as the start, which works for picking a winner but throws an error on an empty array.

Terminal OUTPUT
$ node reduce-more.js
400
{ yes: 3, no: 1, maybe: 1 }
mango
05

Add and remove

Put items in or take them out at the start, the end or the middle.

Changing arrayspushpopslicesplice
push(...items)

Adds items to the end.

See the example
Gives the new lengthChanges original
pop()

Removes the last item.

See the example
Gives the removed itemChanges original
unshift(...items)

Adds items to the start.

See the example
Gives the new lengthChanges original
shift()

Removes the first item.

See the example
Gives the removed itemChanges original
slice(start, end)

Copies a piece of the array. The end position is left out.

See the example
Gives a new arrayMakes a copy
splice(start, count, ...new)

Cuts items out of the real array and can put new ones in their place.

See the example
Gives the removed itemsChanges original
push-pop.jsJAVASCRIPT
const queue = ["Asha", "Ravi"];

queue.push("Meera");    // add to the END
queue.unshift("Dev");   // add to the START
console.log(queue);

const last = queue.pop();    // remove from the END
const first = queue.shift(); // remove from the START
console.log(first, last);
console.log(queue);

Picture a queue: push and pop work at the back, unshift and shift work at the front.

Terminal OUTPUT
$ node push-pop.js
[ 'Dev', 'Asha', 'Ravi', 'Meera' ]
Dev Meera
[ 'Asha', 'Ravi' ]
slice-splice.jsJAVASCRIPT
const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];

// slice(start, end): COPY a piece. The end index is not included.
console.log(days.slice(1, 3));
console.log(days.slice(-2));   // the last two
console.log(days);             // untouched

// splice(start, howMany, ...newItems): CUT from the real array
const removed = days.splice(1, 2, "Holiday");
console.log(removed);
console.log(days);             // changed!

The one letter trap: slice copies and leaves the array alone. splice changes the array. When unsure, slice is the safe one.

Terminal OUTPUT
$ node slice-splice.js
[ 'Tue', 'Wed' ]
[ 'Thu', 'Fri' ]
[ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ]
[ 'Tue', 'Wed' ]
[ 'Mon', 'Holiday', 'Thu', 'Fri' ]
06

Put in order

Sort and reverse arrays, and learn the newer versions that keep your original safe.

OrderingsorttoSortedreversewith
sort(a, b) => number

Puts items in order, inside the original array.

See the example
Gives the same arrayChanges original
toSorted(a, b) => number

Same as sort, but returns a sorted copy.

See the example
Gives a new arrayMakes a copy
reverse()

Flips the order, inside the original array.

See the example
Gives the same arrayChanges original
toReversed()

Returns a flipped copy.

See the example
Gives a new arrayMakes a copy
with(index, value)

Returns a copy with one position replaced.

See the example
Gives a new arrayMakes a copy
sort.jsJAVASCRIPT
const nums = [10, 1, 5, 100];

// careful: without a helper, sort compares items as text
console.log([...nums].sort());

// (a, b) => a - b means small to big, b - a means big to small
console.log([...nums].sort((a, b) => a - b));
console.log(nums.toSorted((a, b) => b - a)); // new array, nums unchanged
console.log(nums);

const words = ["mango", "Apple", "banana"];
console.log(words.toSorted((a, b) => a.localeCompare(b)));

The number trap: plain sort treats numbers as text, so 100 comes before 5. Always pass (a, b) => a - b for numbers, and localeCompare for words.

Terminal OUTPUT
$ node sort.js
[ 1, 10, 100, 5 ]
[ 1, 5, 10, 100 ]
[ 100, 10, 5, 1 ]
[ 10, 1, 5, 100 ]
[ 'Apple', 'banana', 'mango' ]
reverse.jsJAVASCRIPT
const steps = ["wake", "brush", "breakfast"];

console.log(steps.toReversed());   // new, reversed copy
console.log(steps.with(1, "shower")); // new copy with one item swapped
console.log(steps);                // still the same

steps.reverse();                   // reverse changes the original
console.log(steps);

Why the "to" versions exist: they never change the array you already have, which avoids surprise bugs when the same array is used somewhere else.

Terminal OUTPUT
$ node reverse.js
[ 'breakfast', 'brush', 'wake' ]
[ 'wake', 'shower', 'breakfast' ]
[ 'wake', 'brush', 'breakfast' ]
[ 'breakfast', 'brush', 'wake' ]
07

Reshape and create

Flatten nested arrays, join arrays into text and build new arrays from scratch.

ShapingflatflatMapjoinArray.from
flat(depth)

Opens nested arrays so their items sit in one list.

See the example
Gives a new arrayMakes a copy
flatMap(item)

Runs map, then flattens one level.

See the example
Gives a new arrayMakes a copy
join(separator)

Glues all items into one piece of text.

See the example
Gives a stringOnly reads
concat(...arrays)

Joins arrays end to end.

See the example
Gives a new arrayMakes a copy
Array.from(thing, helper?)

Makes an array from text, a Set or a length.

See the example
Gives a new arrayMakes a copy
fill(value)

Sets every position to the same value.

See the example
Gives the same arrayChanges original
flat-join.jsJAVASCRIPT
const nested = [1, [2, 3], [4, [5]]];
console.log(nested.flat());          // open one level of boxes
console.log(nested.flat(Infinity));  // open every level

const lines = ["good morning", "see you soon"];
console.log(lines.flatMap((line) => line.split(" "))); // map, then flat

console.log(["2026", "09", "28"].join("-"));  // array to text
console.log([1, 2].concat([3, 4], 5));        // glue arrays together

Tip: the spread syntax [...a, ...b] does the same job as concat and is what you will see most often in modern code.

Terminal OUTPUT
$ node flat-join.js
[ 1, 2, 3, 4, [ 5 ] ]
[ 1, 2, 3, 4, 5 ]
[ 'good', 'morning', 'see', 'you', 'soon' ]
2026-09-28
[ 1, 2, 3, 4, 5 ]
create.jsJAVASCRIPT
// make arrays from scratch
console.log(Array.from({ length: 5 }, (_, i) => i + 1)); // 1 to 5
console.log(new Array(3).fill("-"));                      // three dashes
console.log(Array.from("hey"));                           // text to letters
console.log(Array.from(new Set([1, 1, 2, 3, 3])));        // remove repeats

// check what you have
console.log(Array.isArray([1, 2]), Array.isArray("12"));
console.log([4, 5, 6].length);

Handy trick: Array.from(new Set(list)) is the shortest way to remove repeated values.

Terminal OUTPUT
$ node create.js
[ 1, 2, 3, 4, 5 ]
[ '-', '-', '-' ]
[ 'h', 'e', 'y' ]
[ 1, 2, 3 ]
true false
3
08

All together

Chain several methods to answer real questions about a list of orders.

ChainingfilterreducetoSortedflatMap

Because map, filter, toSorted and slice all return new arrays, you can call the next method straight away. Read a chain top to bottom like a recipe. Each line takes the result of the line above.

orders.jsJAVASCRIPT
const orders = [
  { customer: "Asha", items: ["apple", "mango"], total: 110, paid: true },
  { customer: "Ravi", items: ["banana"], total: 120, paid: false },
  { customer: "Meera", items: ["mango", "kiwi", "apple"], total: 260, paid: true },
  { customer: "Dev", items: ["kiwi"], total: 90, paid: true },
];

const paid = orders.filter((o) => o.paid);                        // keep paid ones
const revenue = paid.reduce((sum, o) => sum + o.total, 0);        // add them up
const top2 = paid
  .toSorted((a, b) => b.total - a.total)                          // biggest first
  .slice(0, 2)                                                    // take two
  .map((o) => o.customer);                                        // just names
const fruits = [...new Set(orders.flatMap((o) => o.items))].sort(); // every fruit once
const anyUnpaid = orders.some((o) => !o.paid);

console.log("revenue:", revenue);
console.log("top customers:", top2);
console.log("fruits sold:", fruits.join(", "));
console.log("chase payments?", anyUnpaid);

Read the chain for top2: sort the paid orders biggest first, take the first two, then keep only the names. Each step is one simple method.

Terminal OUTPUT
$ node orders.js
revenue: 460
top customers: [ 'Meera', 'Asha' ]
fruits sold: apple, banana, kiwi, mango
chase payments? true
TerminalBASH
# save any example as a file and run it with Node 20 or newer
$ node orders.js
# or paste it into your browser console with F12

Which one do I need?

Start from what you want to do, then read across to the method and what it gives back.

I want toUseYou get
Change every itemmapa new array, same length
Keep some itemsfiltera new, shorter array
Find one itemfindthe item or undefined
Know if a value is thereincludestrue or false
Check if any item passessometrue or false
Check if all items passeverytrue or false
Get one total or summaryreducea single value
Just do something per itemforEachnothing
Put items in ordertoSorteda sorted copy
Take a pieceslicea copy of that piece
Turn the array into textjoina string