What Is a JavaScript Array?

Imagine you’re creating a website that displays your favorite movies, a shopping list, or the names of students in a classroom. You could create a separate variable for every item, but managing all those variables would become difficult.

An array stores an ordered collection of values in a single variable. Each value is called an element.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits);

Arrays use square brackets [], with commas separating the elements. They can hold strings, numbers, Booleans, objects, or even other arrays.

Access Items by Their Position

Every element in an array has a numbered position called an index. JavaScript starts counting indexes at zero, not one.

const colors = ["Red", "Green", "Blue"];

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

The first item is at index 0, the second at 1, and the third at 2.

You can also change an existing element by assigning a new value to its index.

const colors = ["Red", "Green", "Blue"];

colors[1] = "Yellow";

console.log(colors);

Even though the variable was declared using const, its array elements can still be changed. What const prevents is assigning an entirely different value to the variable itself.

Find Out How Many Items You Have

Arrays have a built-in length property that tells you how many positions they contain.

const animals = ["Cat", "Dog", "Bird"];

console.log(animals.length);
console.log(animals[animals.length - 1]);

Since array indexes start at zero, the last element in a nonempty array is located at length - 1.

Make Your Arrays Dynamic

Arrays can grow and shrink as your application changes. JavaScript provides built-in methods for adding and removing elements.

const tasks = ["Study", "Practice"];

tasks.push("Build a project");
tasks.unshift("Review notes");

console.log(tasks);

push() adds an item to the end of an array, while unshift() adds an item to the beginning.

const tasks = ["Study", "Practice", "Build"];

tasks.pop();
tasks.shift();

console.log(tasks);

pop() removes the last item, and shift() removes the first. Both methods also return the item that was removed.

Work With Every Item Automatically

In Lesson 06, you learned how loops repeat instructions. Arrays and loops work especially well together because you can process every item without writing separate instructions for each one.

const fruits = ["Apple", "Banana", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

The counter begins at index zero and continues while it's smaller than the array's length.

Another readable option is the for...of loop, which gives you each value directly.

for (const fruit of fruits) {
  console.log("I like " + fruit);
}

This approach is particularly helpful when you don't need to know the index of each item.

Search, Transform & Filter Lists

JavaScript arrays include many helpful methods. Here are four you'll use frequently when building interactive websites.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.includes("Banana"));
console.log(fruits.indexOf("Orange"));

includes() checks whether a value exists, while indexOf() returns its first matching index, or -1 if it isn't found.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(number => number * 2);
const even = numbers.filter(number => number % 2 === 0);

console.log(doubled);
console.log(even);

map() creates a new array by transforming each item. filter() creates a new array containing only items that pass a condition. Neither method changes the original array in these examples.

Turn Array Data Into Page Content

Arrays become especially useful when you connect them to HTML. A webpage can use an array as its source of information, then update the displayed list whenever the data changes.

const hobbies = ["Coding", "Reading", "Gaming"];
const list = document.getElementById("hobbyList");

for (const hobby of hobbies) {
  const item = document.createElement("li");
  item.textContent = hobby;
  list.appendChild(item);
}

With an HTML element such as <ul id="hobbyList"></ul>, the script creates one list item for every value in the array.

When you later add or remove items from the array, you can redraw the list to keep the webpage in sync with your data.