Arrays: Lists of Data

What is an Array?

In programming, we often need to store a list of related items—like a list of user names, a sequence of high scores, or the colors in a palette. An array is a data structure that lets you hold multiple values in a single variable.

You create an array using an array literal, which is simply a pair of square brackets [] enclosing a comma-separated list of values. Arrays can hold any type of data, and they can even hold mixed data types!

const colors = ["red", "green", "blue"];
console.log(colors[0]);

red

Accessing Array Elements

To get a value out of an array, you use its index. JavaScript arrays are zero-indexed. This means the counting starts at 0, not 1! The very first element of an array is at index 0, the second is at index 1, and so on.

const letters = ["a", "b", "c"];
console.log(letters[2]);

c

Here is a diagram showing how indices map to elements in an array:

Array Length

Every array has a length property that tells you exactly how many items are inside it. Since indices start at 0, the highest index in an array is always length - 1.

const nums = [10, 20, 30];
console.log(nums.length);

3

Common Misconceptions: Out of Bounds

What happens if you try to access an index that is completely empty? In some languages, this will immediately crash your program. Let’s see what JavaScript does.

const arr = [1, 2];
console.log(arr[5]);

undefined

JavaScript simply returns undefined. It does not throw a runtime error. This means you must be very careful when writing loops, because reading outside the array won’t crash—it will just silently give you undefined, which might cause subtle bugs later on!

Adding and Removing Elements

Arrays in JavaScript are dynamic; they can grow and shrink. The push() method adds one or more elements to the end of the array. It also returns the new length of the array. The pop() method removes the last element from the array and returns that removed element.

const stack = ["x"];
stack.push("y");
console.log(stack[1]);

y

const stack2 = ["x", "y"];
const removed = stack2.pop();
console.log(removed);

y

Let’s look at exactly how push and pop mutate the array over time. Run this step-through visualizer to watch the array change.

const fruits = [];
fruits.push("apple");
fruits.push("banana");
fruits.pop();

Edge Cases

• Popping an empty array: If you call pop() on an array that is already empty, it doesn’t throw an error. It simply returns undefined and leaves the array’s length at 0.
• Nested Arrays: A javascript array can hold anything, including other arrays! You can access them by chaining brackets like mixed[2][0].