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
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