Skip to content

Arrays

Learn how arrays store ordered lists of values, how to access items by index, and how to loop over them.

What you'll learn

  • What an array is and when to use one
  • How to access and modify items by index
  • How to add and remove items with push, pop, shift
  • How to loop over an array with for and forEach

Concept

Arrays

An array is an ordered list of values. Use one whenever you have multiple items of the same kind: a list of names, a set of prices, a sequence of scores. Arrays keep the order and let you refer to each item by its position.

Creating and Accessing

const fruits = ["apple", "banana", "cherry"];
fruits[0];   // "apple"  — indexing starts at 0!
fruits[2];   // "cherry"
fruits.length;  // 3

Indexes start at 0, not 1. This is a convention shared by most languages. The last item is at index length - 1.

Adding and Removing

  • push(item) — add to the end.
  • pop() — remove from the end.
  • unshift(item) — add to the front.
  • shift() — remove from the front.
const stack = [1, 2, 3];
stack.push(4);   // [1, 2, 3, 4]
stack.pop();     // 4, stack is now [1, 2, 3]

Looping Over Arrays

The classic pattern uses a for loop with the array's length:

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

Modern JavaScript offers cleaner alternatives: fruits.forEach(f => console.log(f)) and fruits.map(f => f.toUpperCase()). These are methods — functions that belong to the array.

Arrays Are Mutable

Arrays declared with const can still have their *contents* changed (arr.push(x) works). The const only prevents reassigning the variable to a new array. This is a common source of confusion.

Example

              const prices = [10, 25, 15, 30, 8];

// Sum all prices with a for loop:
let total = 0;
for (let i = 0; i < prices.length; i++) {
  total += prices[i];
}
console.log("Total:", total);   // 88

// Find the highest price using a method:
const highest = Math.max(...prices);
console.log("Highest:", highest);  // 30

// Transform with map:
const withTax = prices.map(p => p * 1.2);
console.log("With 20% tax:", withTax);

The for loop accumulates a total. Math.max with the spread operator (...) finds the maximum. map creates a new array with each price increased by 20%.

Try it

  • JSON Formatter

    JSON arrays look like [1, 2, 3]. Paste an array and watch the formatter pretty-print each element.

Common mistakes

The mistake

Forgetting that array indexes start at 0.

The fix

The first item is arr[0], the last is arr[arr.length - 1]. Off-by-one errors are the most common array bug — always test the boundary.

The mistake

Expecting const to prevent changes to the array's contents.

The fix

const locks the binding, not the contents. arr.push(x) still works. To prevent mutation, use methods that return a new array (map, filter) instead of mutating ones.

Related Resources

Related Snippets

Practice Arrays

2 exercises

Practice Arrays

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors