JavaScript Arrays in 15 Minutes

An array is a list. Cart items, student names, scores, search results. If you have more than two of the same kind of thing, you want an array, not item1, item2, item3. This page covers what you'll actually use in the first months: create, read, add, remove, find, and copy without changing the original by accident.

Create and read

const items = ["rice", "eggs", "coffee"];

console.log(items[0]);
console.log(items[2]);
console.log(items.length);
console.log(items[items.length - 1]);
console.log(items.at(-1));
console.log(items[5]);

rice
coffee
3
coffee
coffee
undefined

Positions (indexes) start at 0. The last item is at length - 1, or use at(-1). Reading a position that doesn't exist gives undefined, not an error, which is why "Cannot read properties of undefined" is so common later.

Add and remove

const items = ["rice", "eggs"];

items.push("coffee");
items.unshift("sugar");
console.log(items);

const last = items.pop();
const first = items.shift();
console.log(last, first, items);

[ 'sugar', 'rice', 'eggs', 'coffee' ]
coffee sugar [ 'rice', 'eggs' ]

• push / pop: add or remove at the end.
• unshift / shift: add or remove at the start.

To remove something from the middle, find its position first, then splice:

const items = ["rice", "eggs", "coffee"];
const i = items.indexOf("eggs");
if (i !== -1) {
  items.splice(i, 1);
}
console.log(items);

[ 'rice', 'coffee' ]

splice(i, 1) means "at position i, remove 1 item".

Finding things

const cart = [
  { id: 1, name: "Coffee", price: 95 },
  { id: 2, name: "Ensaymada", price: 35 },
];
const names = ["rice", "eggs"];

console.log(names.includes("eggs"));
console.log(cart.find(item => item.id === 2));
console.log(cart.findIndex(item => item.id === 2));
console.log(cart.some(item => item.price > 90));
console.log(cart.find(item => item.id === 9));

true
{ id: 2, name: 'Ensaymada', price: 35 }
1
true
undefined

• includes: is this simple value in the list? True or false.
• find: the first item that matches, or undefined.
• findIndex: its position, or -1.
• some: does at least one item match?

includes compares with ===, so it won't find objects by content. For objects, use find with a condition on a field like id.

Looping

Use for...of for the items. Add .entries() when you need the position:

const items = ["rice", "eggs"];
for (const [i, item] of items.entries()) {
  console.log(i, item);
}

0 rice
1 eggs

You'll also see map, filter and reduce. They loop for you and return something new. Quick taste:

const prices = [95, 35, 20];
console.log(prices.map(p => p * 2));
console.log(prices.filter(p => p >= 35));

[ 190, 70, 40 ]
[ 95, 35 ]

Copying: the classic mistake

const original = ["rice", "eggs"];
const notACopy = original;
notACopy.push("coffee");
console.log(original);

const copy = [...original];
copy.push("sugar");
console.log(original.length, copy.length);

[ 'rice', 'eggs', 'coffee' ]
3 4

notACopy = original doesn't copy anything. Both names point to the same array, so changing one changes "both". [...original] (spread) creates a new array.

This matters with sort and reverse, which change the array they're called on:

const scores = [70, 95, 82];
const sorted = [...scores].sort((a, b) => a - b);
console.log(scores, sorted);

[ 70, 95, 82 ] [ 70, 82, 95 ]

Common mistakes

• Counting from 1: items[1] is the second item.
• splice with -1 from a failed indexOf.
• Treating = as a copy.
• Sorting numbers without a compare function.
• const doesn't make an array read-only. You can still push to it.

You have a list of 30 student scores. How would you get the top three, without changing the original list?