JavaScript Arrays 101

Storing values individually vs using an array

Imagine tracking five favorite movies using separate variables:

const movie1 = "Inception";
const movie2 = "Interstellar";
const movie3 = "The Matrix";
const movie4 = "Parasite";
const movie5 = "Spirited Away";

This works for five movies. It becomes completely unmanageable for fifty. An array solves this by storing an entire collection of related values together, as one single, organized unit:

const movies = ["Inception", "Interstellar", "The Matrix", "Parasite", "Spirited Away"];

One variable, five values, all grouped together — and as this guide will show, genuinely easy to work with as a collection, not five disconnected pieces.

What Arrays Are and Why We Need Them

An array is a collection of values, stored in order, inside a single variable. Think of it like a numbered list — a shopping list, a class roster, a queue of tasks — where the order of items genuinely matters.

Arrays are everywhere in real code: a list of usernames, a set of exam marks, a to-do list, search results — anywhere you’re dealing with many related values of the same kind, an array is almost always the right tool.

How to Create an Array

The simplest way to create an array is with square brackets, listing values separated by commas:

const fruits = ["apple", "banana", "orange"];
const marks = [85, 92, 78, 60];
const tasks = ["Buy groceries", "Clean the house", "Finish homework"];

An array can hold any type of value — strings, numbers, even a mix of different types, though keeping an array’s contents consistent (all strings, or all numbers) is usually the clearest, most practical choice.

Accessing Elements Using Index

Every value inside an array has a position, called its index — and in JavaScript, indexing always starts at 0, not 1.

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // "apple"  — the FIRST item
console.log(fruits[1]); // "banana" — the SECOND item
console.log(fruits[2]); // "orange" — the THIRD item

This trips up a lot of beginners at first — the first item is at index 0, not 1. A simple way to remember it: the index tells you how many steps away from the start a value is — the very first item is zero steps away from the beginning.

Accessing the last element

const fruits = ["apple", "banana", "orange"];
console.log(fruits[fruits.length - 1]); // "orange" — the last item

Since indexing starts at 0, the last item's index is always one less than the array's total length — covered next.

Updating Elements

Changing a value at a specific index uses the same square-bracket syntax, on the left side of an assignment:

const fruits = ["apple", "banana", "orange"];

fruits[1] = "mango";
console.log(fruits); // ["apple", "mango", "orange"]

Only the value at index 1 changes — every other item in the array stays exactly as it was.

Array Length Property

The .length property tells you the number of slots in an array, based on its highest index. It often matches the number of items, but sparse arrays can contain empty slots, so .length is not always the same as the number of actual elements.

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length); // 3

fruits[5] = "grape";

console.log(fruits.length); // 6

console.log(fruits);
// ["apple", "banana", "orange", empty, empty, "grape"]

.length isn't something you calculate manually—it's a built-in property that reflects the array's current length, updating automatically when elements are added or the array's length changes.

Basic Looping Over Arrays

Rather than accessing each item individually by index one at a time, a loop lets you process every item in an array automatically.

Using a traditional for loop

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// "apple"
// "banana"
// "orange"

Breaking this down: i starts at 0 (the first index), the loop continues as long as i is less than fruits.length (so it never goes out of bounds), and i++ moves to the next index after each pass.

Using a for…of loop (a simpler alternative)

for (const fruit of fruits) {
  console.log(fruit);
}
// "apple"
// "banana"
// "orange"

for...of hands you each value directly, without needing to manage an index variable yourself — a cleaner option when you don't specifically need the index number itself.

Practice Assignment

1. Create an array of 5 favorite movies

const movies = ["Inception", "Interstellar", "The Matrix", "Parasite", "Spirited Away"];

2. Print the first and last element

console.log(movies[0]); // "Inception"
console.log(movies[movies.length - 1]); // "Spirited Away"

3. Change one value and print the updated array

movies[2] = "The Dark Knight";
console.log(movies);
// ["Inception", "Interstellar", "The Dark Knight", "Parasite", "Spirited Away"]

4. Loop through the array and print all elements

for (const movie of movies) {
  console.log(movie);
}
// "Inception"
// "Interstellar"
// "The Dark Knight"
// "Parasite"
// "Spirited Away"

Try changing the movie list to your own favorites, and predict each line’s output before running it — genuinely one of the fastest ways to make indexing and looping feel natural.

Final Takeaway

Arrays exist to solve a simple, common problem: storing many related values together, in order, as one manageable collection instead of a pile of disconnected variables. Indexing starts at 0, which feels unusual at first but becomes second nature quickly — the index simply counts how many steps a value sits from the start. .length always tells you exactly how many items you're working with, and loops let you process every item without manually writing out each one. These fundamentals — creation, indexing, updating, length, and looping — are the foundation every more advanced array technique (like the methods covered in this series's dedicated array methods article) is built directly on top of.

Frequently Asked Questions

Why does array indexing start at 0 instead of 1?

> It’s a long-standing convention across most programming languages, tracing back to how indexes originally represented an “offset” from the start of a sequence — the first item is zero steps away from the beginning. It feels unusual briefly, then becomes completely natural with practice.

What happens if I try to access an index that doesn’t exist?

> JavaScript returns undefined rather than throwing an error — for example, fruits[10] on a 3-item array simply returns undefined, which is worth checking for in your own code rather than assuming a value will always be there.

Can an array change size after it’s created?

> Yes — arrays in JavaScript are flexible in size. Assigning a value to a new, higher index (as shown in the .length section) automatically grows the array, and array methods (covered in a separate, dedicated article in this series) let you add or remove items directly.

Is for…of always better than a traditional for loop?

> Not always — for...of is simpler when you just need each value. A traditional for loop is still useful when you specifically need the index itself (to compare neighboring items, for instance) as part of your logic.