JavaScript Arrays: Store and Manage Lists of Data

When you start writing JavaScript, you quickly run into a situation where you need to store more than one value. You could create separate variables for each — but there's a much better way. That's where arrays come in.

The Problem with Individual Variables

Let's say you want to store the names of five fruits:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
let fruit5 = "Grapes";

This works, but it's messy. What if you have 50 fruits? Or 500 student marks? Managing dozens of separate variables becomes impossible fast.

What Is an Array?

An array is a single variable that holds a collection of values in order. Instead of five separate variables, you get one neat container.

let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

Same data, one variable, much cleaner. Arrays can hold any type of value — strings, numbers, booleans, or even a mix.

let marks = [85, 92, 78, 96, 88];
let tasks = ["Buy groceries", "Read a book", "Go for a walk"];

How an Array Looks in Memory

Think of an array as a row of labeled boxes. Each box holds a value, and each box has a number on it — that number is the index.

Index:  [  0  ] [  1   ] [  2   ] [  3   ] [  4   ]
Value:  [Apple] [Banana] [Mango] [Orange] [Grapes]

The index always starts at 0, not 1. This is one of the most important things to remember about arrays.

How to Create an Array

There are two common ways to create an array in JavaScript.

Using square brackets (recommended):

let colors = ["red", "green", "blue"];

Using the Array constructor:

let colors = new Array("red", "green", "blue");

The square bracket syntax is simpler and used almost universally. Stick with that.

You can also create an empty array and add values later:

let items = [];

Accessing Elements Using Index

To read a value from an array, use its index inside square brackets.

let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

console.log(fruits[0]); // "Apple"
console.log(fruits[1]); // "Banana"
console.log(fruits[4]); // "Grapes"

Remember — the first element is at index 0, not 1. This catches a lot of beginners off guard.

What happens if you access an index that doesn't exist?

console.log(fruits[10]); // undefined

JavaScript won't throw an error — it just returns undefined.

Updating Elements

You can change a value in an array by targeting its index and assigning a new value.

let fruits = ["Apple", "Banana", "Mango"];

fruits[1] = "Strawberry";

console.log(fruits); // ["Apple", "Strawberry", "Mango"]

The array is updated in place. The rest of the elements stay exactly where they are.

The length Property

Every array has a built-in length property that tells you how many elements it contains.

let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

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

A common use of length is getting the last element of an array, regardless of how long it is:

console.log(fruits[fruits.length - 1]); // "Grapes"

Since the last index is always one less than the length, this pattern always works — even if the array changes size later.

Looping Over an Array

One of the biggest advantages of arrays is how easily you can loop through all their values.

Using a for loop

let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Apple
// Banana
// Mango
// Orange
// Grapes

The loop starts at index 0 and runs as long as i is less than the array's length. Each iteration, i increases by one and we print the element at that position.

Using a for...of loop (cleaner syntax)

for (let fruit of fruits) {
  console.log(fruit);
}

This is simpler when you just need the values and don't care about the index.

Putting It All Together

let tasks = ["Buy groceries", "Read a book", "Go for a walk", "Write code"];

// Access
console.log(tasks[0]);               // "Buy groceries"
console.log(tasks[tasks.length - 1]); // "Write code"

// Update
tasks[1] = "Study JavaScript";
console.log(tasks);
// ["Buy groceries", "Study JavaScript", "Go for a walk", "Write code"]

// Loop
for (let task of tasks) {
  console.log("Task:", task);
}

Practice Assignment

Work through these steps to practice what you've learned:

1. Create an array of 5 favorite movies:

let movies = ["Inception", "Interstellar", "The Dark Knight", "Parasite", "Dune"];

2. Print the first and last element:

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

3. Change one value and print the updated array:

movies[2] = "Oppenheimer";
console.log(movies);
// ["Inception", "Interstellar", "Oppenheimer", "Parasite", "Dune"]

4. Loop through the array and print all elements:

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

Try it in your browser console. Change the values to your actual favorite movies and see how the array behaves.

Quick Recap

• An array stores multiple values in a single variable, in order

• Arrays are created using square brackets: let arr = [1, 2, 3]

• Indexing starts at 0 — the first element is always arr[0]

• Update elements by targeting their index: arr[0] = "new value"

• Use arr.length to get the number of elements

• Loop through arrays using for or for...of

Arrays are one of the most frequently used data structures in JavaScript. Getting comfortable with them now will pay off in every project you build going forward.

Happy coding!🚀

If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: LinkedIn | GitHub | X (Twitter)