JavaScript Arrays

A list under one name

An array holds several values in order. A shopping list, a set of scores, or the lines of a to-do app all belong in one array instead of item1, item2, item3.

Write a list with square brackets. Separate items with commas. Empty brackets [] are a list with nothing in it yet.

Index 0 is first

Read a slot with list[index]. The first item is list[0]. The second islist[1]. That off-by-one rule is the source of most array bugs.

const colors = ["red", "green", "blue"];

console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
console.log(colors[3]);

document.body.textContent = colors[0] + ", " + colors[1] + ", " + colors[2];

An index that is not in the list yields undefined. The script does not throw. Checklength before you assume a slot exists.

length is the current count

list.length is how many items are in the array right now. The last valid index islist.length - 1. After you add or remove items, length changes.

Three items means length 3 and last index 2. There is no colors[3] until you put something there.

Change an item

Assignment overwrites one slot. The array is the same object. Other slots stay put. You can also write past the end; JavaScript grows the list and fills the gap with empty slots.

const scores = [88, 91, 74];
scores[1] = 95;
scores[3] = 80;

console.log(scores);
console.log(scores.length);
console.log(scores[2]);

document.body.textContent = scores.join(", ") + " (length " + scores.length + ")";

Mixed types are allowed

An array can hold numbers, strings, booleans, objects, and other arrays in the same list. That is legal. It is usually a bad idea for a beginner list: keep one kind of value so loops stay simple.

typeof [] is "object". Use Array.isArray(value) when you need to know that a value is actually an array.

const mixed = [1, "ok", true];
console.log(typeof mixed);
console.log(Array.isArray(mixed));
console.log(Array.isArray("no"));

document.body.textContent =
  typeof mixed + " / Array.isArray = " + Array.isArray(mixed);

const still lets you edit slots

const list = [1, 2] means you cannot rebind list to a different array. You can still change list[0]. The name is constant. The contents are not frozen.

What to remember

• Square brackets create a list. Index 0 is the first item.
• length is the current count. Last index is length minus one.
• Missing indexes are undefined, not an error.
• Array.isArray is the check. typeof says "object".

Next: methods that add, remove, and copy items — and which of them mutate the original list.