Array basics

Arrays are ordered lists

An array is a list of values kept in order. You can read any value by its position. You can also pass the whole list around under one name. Many everyday things are lists in order: the items in a shopping cart, the results of a search, and the answers in a quiz.

const cart = ["tea", "bread"];
console.log(cart[0]);
console.log(cart.length);

Line 1 makes an array named cart with two elements. Line 2 reads index 0, the first position, so it prints tea. Line 3 reads the array's length, so it prints 2. The elements stay in their order, and the whole list has one name.

This lesson uses ideas from earlier lessons:

• Data types: there, typeof [] gave "object".
• Objects & references: two names can point at the same object.
• Object basics: how named properties work.
• Loops and for…of & for…in: there you learned not to use for…in to read array values.
• Manuals & specifications: it used .at() as an example entry. Now you will use it for real.

The usual way to make an array is an array literal: square brackets with the values inside, like ["Ada", "Grace"]. It is clear and safe.

There is also a function called Array(). You call it with the word new, like new Array(3). A function you call with new to make an object is called a constructor. It has one well-known trap: new Array(3) does not store the number 3. It makes an array whose length is 3, with nothing inside.

const cart = ["tea"];
const emptySlots = new Array(2);
console.log(cart.length);
console.log(emptySlots.length, 0 in emptySlots);

Line 1 makes an array with one real element, tea. Line 2 makes an array with two empty positions. Line 3 prints 1. Line 4 prints 2 false: the length is 2, but nothing is stored at index 0.

The in operator on line 4 asks a yes-or-no question. 0 in emptySlots means "is something stored at index 0 of emptySlots?" Here the answer is false. When you already know the values, use square brackets.

1const oneValue = [3];Run2const threeHoles = new Array(3);3const twoValues = new Array(1, 2);4const oneFromOf = Array.of(3);5const withHole = [1, , 3];6console.log(oneValue.length, 0 in oneValue);7console.log(threeHoles.length, 0 in threeHoles);8console.log(twoValues.join("-"));9console.log(oneFromOf[0]);10console.log(1 in withHole);

Commas need care too. A comma after the last value, as in [1, 2,], is allowed and adds nothing. Two commas in a row, as in [1, , 3], skip a position. Index 1 is then a hole: a position with nothing stored in it.

Two more ways to make arrays, Array.of() and Array.from(), come back in the next lesson, Slicing, splicing & joining. For now, square brackets are the best choice.

An index is a position number. Square brackets after the array's name read a position counted from the start: arr[0] is the first element.

The at() method reads a position too. arr.at(0) is also the first element. But at() also takes negative numbers, which count from the end. So arr.at(-1) is the last element.

If you ask for a position that does not exist, you get undefined. There is no error.

1const languages = ["HTML", "CSS", "JavaScript"];Run2console.log(languages.at(0));3console.log(languages.at(-1));4console.log(languages[languages.length - 1]);5console.log(languages[10]);6console.log(languages.at(-10));7languages.length = 2;8console.log(languages);

const scores = [8, 13, 21];
console.log(scores[0]);
console.log(scores.at(-1));
console.log(scores.at(10));

Line 2 reads index 0, the first score: 8. Line 3 uses at(-1) to read the last score: 21. Line 4 asks for index 10. The array has only three elements, so it prints undefined.

length is a property, not a method, so you write it without round brackets: arr.length. Most of the time it is the number of elements in the list. The exact rule is: length is one more than the highest index.

You can also set length yourself:

• Set it smaller, and the elements past the new end are removed.
• Set it larger, and the new positions are holes.

You can change an array after you make it. The first four methods to learn all work at one end of the list:

• push(value) adds a value at the back. It returns the new length.
• pop() removes the last value. It returns the value it removed.
• unshift(value) adds a value at the front. It returns the new length.
• shift() removes the first value. It returns the value it removed.

1const items = ["Ada", "Grace", "Linus"];2items.push(value);3items.pop();4items.unshift(value);5items.shift();6items[5] = value;7items.length = 2;

const queue = ["Asha", "Ben"];
console.log(queue.push("Chen"));
console.log(queue.pop());
console.log(queue);

Line 2 runs push, which adds Chen at the back. It prints what push returns: the new length, 3. Line 3 runs pop, which removes the last value and returns it, so it prints Chen. Line 4 prints what is left: ["Asha", "Ben"].

The lab has two more buttons:

• items[5] = value writes far past the end. The length jumps to 6, and the positions in between become holes.
• items.length = 2 makes the array shorter. Every element after index 1 is removed.

An array is a special kind of object. That means:

• Two names can point at the same array, just like with any object.
• You can add ordinary named properties to an array.
• Its index numbers are really property names, stored as strings like "0".
• typeof [] gives "object", not "array".

To check whether a value is an array, use Array.isArray(value). It returns true for an array and false for anything else.

1const tools = ["hammer", "wrench"];Run2tools.label = "toolbox";3console.log(typeof tools);4console.log(Array.isArray(tools));5console.log(tools.length);6console.log(tools[0] === tools["0"]);7console.log(JSON.stringify(Object.keys(tools)));

const profile = ["Asha"];
profile.label = "team";
console.log(Array.isArray(profile));
console.log(profile.length);
console.log(profile.label);

Line 2 adds an ordinary property, label. Line 3 prints true, because profile is an array. Line 4 prints 1: the label is not an element, so the length does not change. Line 5 reads the label like any property and prints team.

The table compares the two kinds of data an array can hold. Read each row as a question.

This is why for…in is the wrong loop for reading array values. It walks through property names, so it can also pick up extra properties like label. Use for…of to read the values. Later lessons teach array methods for this too: Searching arrays, map, filter & reduce, and Sorting & copying safely.

A hole is a position with nothing stored in it. An array with holes is called a sparse array. A hole is different from a position that stores the value undefined. When you read either one, you get undefined.

The in operator shows the difference. 1 in arr is true only when something is really stored at index 1.

1const holey = [1, , 3];Run2const explicit = [1, undefined, 3];3console.log(1 in holey);4console.log(1 in explicit);5const grown = ["a", "b"];6grown[5] = "x";7console.log(grown.length, 2 in grown, 5 in grown);8console.log(holey.map((value) => value * 2));9for (const value of holey) console.log(value);10console.log(Array.from({ length: 3 }));

const todo = ["read", , "ship"];
console.log(1 in todo);
console.log(todo[1]);

Line 1 skips index 1, so it is a hole. Line 2 prints false, because nothing is stored at index 1. Line 3 reads index 1 and still prints undefined. So reading a position cannot tell you whether something is stored there.

The table compares a hole with a stored undefined. Read across each row.

The simple advice: don't make holes in everyday code. If you need empty places, put real values there, such as null, undefined, or an object that says what is missing. A later lesson, Fast arrays & elements kinds, shows how holes can also make code slower.

Where you’ll use this

Use an array whenever your data has an order. Two examples:

• A web page keeps a list of notifications. When a new one arrives, it adds it with push. To show the newest one, it reads notifications.at(-1).
• A text editor keeps a list of undo steps. It adds each action with push, and undoes the newest action with pop.

const cart = ["tea"];
cart.push("bread");
console.log(cart.at(-1));
console.log(cart.length);

The cart starts with one item. Line 2 uses push to add bread. Line 3 reads the last item with at(-1) and prints bread. Line 4 prints the length, 2. A shopping site does the same thing when you add an item to your cart.

Here are more places where arrays fit well:

• Queues: a list where the first one in is the first one out. Examples: people waiting for help, messages waiting to send.
• Stacks: a list where the last one in is the first one out. Examples: undo history, the pages behind the Back button, dialogs opened on top of each other.
• Rows of data: products, table rows, search results, points on a chart.
• Changing every value: later lessons teach map, filter, and reduce.

Common misconceptions

const emptySlots = new Array(2);
const realUndefined = [undefined, undefined];
console.log(0 in emptySlots);
console.log(0 in realUndefined);

Reading index 0 gives undefined for both arrays. But line 3 prints false, because emptySlots has nothing stored at index 0. Line 4 prints true, because realUndefined stores undefined there. Use in when "nothing stored" and "stored undefined" must mean different things.

Answer each question from memory first. Then read the explanation for every choice.

Key takeaways

• Arrays keep values in order, at indexes that start at 0.
• Make arrays with square brackets. new Array(3) makes three holes; [3] stores one value.
• at(-1) reads the last element. Setting a smaller length removes elements from the end.
• push and pop work at the back. unshift and shift work at the front, where every other element has to move.
• Arrays are objects. A hole is a position with nothing stored in it. Avoid holes unless you have a clear reason.

Up next: Slicing, splicing & joining.