JavaScript Arrays 101: Manage Multiple Values with Ease

Picture this: you're writing a program to store the marks of five students. Without arrays, you'd probably do something like this:

let marks1 = 88;
let marks2 = 74;
let marks3 = 91;
let marks4 = 65;
let marks5 = 79;

That works. But what if you had 50 students? Or 500? You'd be declaring variables all afternoon.

Arrays solve this by letting you store multiple values under a single name, in order.

What Is an Array?

An array is a collection of values stored in a sequence. Each value sits at a numbered position called an index, and you can access, update, or loop through those values without naming each one individually.

Here's the marks example rewritten with an array:

let marks = [88, 74, 91, 65, 79];

Five values, one variable. Much cleaner.

Arrays aren't just for numbers. You can store strings, booleans, or a mix of types:

let fruits = ["apple", "mango", "banana"];
let tasks  = ["buy groceries", "call mom", "fix bug #42"];

How to Create an Array

The most common way is with square brackets:

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

You can also create an empty array first and fill it later:

let scores = [];

Both are valid. Most of the time you'll use the bracket syntax.

Accessing Elements by Index

Every item in an array has an index, starting at 0. That's not a typo. JavaScript (like most languages) starts counting from zero.

let fruits = ["apple", "mango", "banana"];

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "mango"
console.log(fruits[2]); // "banana"

Think of it like a row of lockers. Locker 0 is the first one, locker 1 is the second, and so on.

If you try to access an index that doesn't exist, you get undefined:

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

No error, just a polite nothing.

Updating Elements

Accessing an element and updating one use the same index syntax, you just add an assignment:

let fruits = ["apple", "mango", "banana"];

fruits[1] = "grapes";

console.log(fruits); // ["apple", "grapes", "banana"]

"mango" is gone, replaced by "grapes". The rest of the array is untouched.

The length Property

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

let tasks = ["buy groceries", "hit the gym", "fix bug #42"];

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

One thing to keep in mind: length is always one more than the last valid index. If an array has 3 items, the indices are 0, 1, and 2, but length is 3.

This comes up often when you want the last element:

let last = tasks[tasks.length - 1];
console.log(last); // "fix bug #42"

Looping Over an Array

Once your data is in an array, you'll usually want to go through each item. The classic way is a for loop:

let fruits = ["apple", "mango", "banana"];

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

Output:

apple
mango
banana

The loop starts at index 0, runs as long as i is less than the length, and increments by 1 each time. This pattern covers most situations.

There's also for...of, which is cleaner when you only care about the values and not the index:

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

Same output, less noise. Use for...of when the index doesn't matter to you.

Putting It Together

Here's a small example that uses everything covered above:

let scores = [72, 85, 90, 61, 78];

console.log("Total students:", scores.length);
console.log("First score:", scores[0]);
console.log("Last score:", scores[scores.length - 1]);

scores[2] = 95; // update a score

for (let i = 0; i < scores.length; i++) {
    console.log("Student", i + 1, "scored", scores[i]);
}

Run this in your browser console or a Node environment and you'll see exactly how each piece behaves.

Conclusion

Arrays are one of the most-used structures in JavaScript. Once you're comfortable with indexing and looping, a lot of other things start to make more sense. Methods like push, pop, filter, and map all build on this foundation, but those are for another day.