Arrays

An array is an ordered list of values. Shopping carts, search results, chat messages, rows of a table — most collections of data in a program are arrays. This lesson covers creating them, reading and changing items, and the most basic ways to add and remove elements.

Creating arrays

const fruits = ["apple", "banana", "cherry"];
const empty = [];
const mixed = [42, "text", true, null, { id: 1 }, [1, 2]];

console.log(fruits);
console.log(empty.length, mixed.length);

[ 'apple', 'banana', 'cherry' ]
0 6

Arrays are written with square brackets and commas. They can hold any mix of types, including objects and other arrays, though in practice most arrays hold one kind of thing.

Reading items by index

Each item has a numbered position, its index, starting at 0:

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

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

red
blue
blue
blue
undefined

The last index is always length - 1. at(-1) is a modern shortcut for the last item, at(-2) for the second-to-last. Reading an index that doesn't exist gives undefined, not an error.

Changing items

const scores = [10, 20, 30];
scores[1] = 25;
console.log(scores);

scores[5] = 60;
console.log(scores, scores.length);

[ 10, 25, 30 ]
[ 10, 25, 30, <2 empty items>, 60 ] 6

Assigning to an index replaces that item. Assigning past the end grows the array and leaves "holes" (empty slots) in between, which most code doesn't expect. Add items with push rather than assigning to arbitrary indexes.

Adding and removing at the ends

const queue = ["b", "c"];

queue.push("d");
console.log(queue);

queue.unshift("a");
console.log(queue);

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

[ 'b', 'c', 'd' ]
[ 'a', 'b', 'c', 'd' ]
a d [ 'b', 'c' ]

push and pop are fast. shift and unshift must renumber every other item, so they're slower on very large arrays.

length

length is one more than the highest index. You can even set it to shorten an array:

const items = [1, 2, 3, 4, 5];
console.log(items.length);

items.length = 2;
console.log(items);

items.length = 0;
console.log(items);

5
[ 1, 2 ]
[]

Is it an array?

typeof reports arrays as "object". Use Array.isArray:

console.log(typeof [1, 2]);
console.log(Array.isArray([1, 2]));
console.log(Array.isArray("12"));

object
true
false

Arrays of arrays

An array can contain other arrays — useful for grids, tables and game boards:

const board = [
  ["X", "O", "X"],
  ["O", "X", "O"],
  ["O", "X", "X"],
];

console.log(board[1][2]);
for (const row of board) {
  console.log(row.join(" | "));
}

O
X | O | X
O | X | O
O | X | X

Other ways to create arrays

console.log(Array.from("hey"));
console.log(Array.from({ length: 5 }, (_, i) => i * i));
console.log(Array.of(7));
console.log(new Array(3).fill(0));

[ 'h', 'e', 'y' ]
[ 0, 1, 4, 9, 16 ]
[ 7 ]
[ 0, 0, 0 ]

Array.from turns anything iterable or array-like into an array, and with a mapping function it's the neatest way to generate sequences.

Arrays are references

const original = ["a", "b"];
const alias = original;
const copy = [...original];

alias.push("c");
console.log(original, copy);
console.log(original === alias, original === copy);

[ 'a', 'b', 'c' ] [ 'a', 'b' ]
true false

Assigning an array to a new variable doesn't copy it — both names refer to the same array. Spread syntax [...arr] creates a real (shallow) copy. Two different arrays are never ===, even with identical contents.

Try it yourself