JavaScript Arrays 101

10 May 20263 min read

Let's say you need to store a list of your five favorite movies. The naive approach? Create five variables.

const movie1 = 'The Matrix';
const movie2 = 'Inception';
const movie3 = 'Interstellar';
const movie4 = 'The Dark Knight';
const movie5 = 'Fight Club';

This works, technically. But what if you want to loop through them? Or find out how many there are? Or sort them alphabetically? You're writing that logic yourself, over and over, for every list you ever need.

Arrays solve this. An array is an ordered collection of values — think of it like a numbered list where JavaScript keeps track of the numbers for you.

Creating an Array

The simplest way to create an array in JavaScript:

const movies = ['The Matrix', 'Inception', 'Interstellar', 'The Dark Knight', 'Fight Club'];

Those square brackets [] are your clue that you're working with an array. You can also start with an empty array and add items later:

const movies = [];
movies[0] = 'The Matrix';
movies[1] = 'Inception';
// and so on

But you'll usually create them with items already inside.

Accessing Elements by Index

Each item in an array has an index — a number that tells you where it lives. Here's the crucial part: indexing starts at 0, not 1.

const fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

// Index:     0        1         2        3

console.log(fruits[0]); // 'Apple'
console.log(fruits[2]); // 'Mango'
console.log(fruits[4]); // undefined (we only have 4 items, index 4 doesn't exist)

This trips up beginners constantly. The first element is at index 0. The second is at index 1. It feels wrong, but there's a reason — it's rooted in how computers count memory addresses. Once you internalize it, you stop thinking about it.

To get the last element without knowing the array size, use array[array.length - 1]:

const lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // 'Orange'

Updating Elements

Arrays are mutable, meaning you can change them after creation. To update an element, assign a new value to a specific index:

const fruits = ['Apple', 'Banana', 'Mango'];
fruits[1] = 'Blueberry';

console.log(fruits); // ['Apple', 'Blueberry', 'Mango']

The variable fruits still points to the same array — only the contents changed.

The Length Property

Every array has a .length property that tells you how many items it contains:

const movies = ['The Matrix', 'Inception', 'Interstellar'];
console.log(movies.length); // 3

This comes in handy more than you'd expect. Need the last item? Use array.length - 1. Want to loop through everything? Use array.length as your loop limit.

Looping Over Arrays

The classic for loop works fine with arrays:

const movies = ['The Matrix', 'Inception', 'Interstellar', 'The Dark Knight'];

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

Here's what happens step by step:

Start at i = 0
Print movies[0] → 'The Matrix'
Increment i to 1
Print movies[1] → 'Inception'
Keep going until i = 3
Print movies[3] → 'The Dark Knight'
i becomes 4, which is not less than 4, so the loop stops

JavaScript also has a simpler for...of loop for when you don't need the index:

for (const movie of movies) {
  console.log(movie);
}

This reads almost like English: "for each movie of movies, print the movie." No index management required.

Your Turn: Practice Assignment

Here's a small exercise to reinforce what you've learned. Try it before checking the solution:

Create an array of your 5 favorite movies
Print the first and last movie (hint: use index 0 and array.length - 1)
Change the third movie to something else
Loop through your updated array and print all movies

Solution:

const movies = ['The Matrix', 'Inception', 'Interstellar', 'The Dark Knight', 'Fight Club'];

// Print first and last
console.log(movies[0]); // 'The Matrix'
console.log(movies[movies.length - 1]); // 'Fight Club'

// Change third movie
movies[2] = 'Dunkirk';

// Loop and print all
for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}

Wrapping Up

Arrays are one of the most fundamental data structures in JavaScript — and in programming generally. They're ordered, zero-indexed collections that let you group related values together and work with them programmatically.

Once you're comfortable with basic array operations, you'll find yourself reaching for arrays constantly. And when you're ready for more, methods like .map(), .filter(), and .find() will unlock even more powerful ways to work with collections.

For now, practice creating arrays, accessing by index, and looping. Get those fundamentals solid.