Arrays in JavaScript – Notes (Finally a Way to Stop Making 50 Variables)
Okay so coming off of objects and classes, today's topic actually feels like a step back to something simpler. Arrays. And I mean that in a good way – sometimes it's nice to take a breath with a topic that isn't trying to rewire how you think about code. Arrays are straightforward, super useful, and honestly something you'll use in literally every program you ever write. Let's get into it.
What Is an Array and Why Do We Need One?
Okay quick scenario. Say you're building a simple app that stores the marks of 5 students. Using what we know so far you might write it like this:
let marks1 = 85;
let marks2 = 92;
let marks3 = 78;
let marks4 = 88;
let marks5 = 95;
That already looks annoying and it's only 5 students. What if it was 50? Or 500? You'd be writing variables until you fell asleep.
An array fixes this by letting you store multiple values in one single variable, in order, under one name.
let marks = [85, 92, 78, 88, 95];
One variable. Five values. All related. All organised. That's the whole pitch for arrays and honestly it sells itself.
An array is basically an ordered list. The values inside it are called elements. The order matters and is preserved. And each element has a position number called an index which is how you access it later.
Creating an Array
Making an array in JavaScript is simple. You use square brackets and separate the values with commas.
let fruits = ["mango", "banana", "apple", "orange", "grapes"];
let scores = [45, 78, 92, 55, 88];
let tasks = ["wake up", "brush teeth", "eat breakfast", "study", "sleep"];
The values inside don't have to be the same type technically but in practice you'll almost always store the same type of thing in one array. A list of names, a list of numbers, a list of tasks. Mixing types randomly is generally bad practice and makes things confusing.
You can also create an empty array first and fill it later:
let myList = [];
Accessing Elements Using Index
This is the part that trips up almost every beginner and it's purely because of one rule:
Array indexing starts at 0. Not 1. Zero.
So if you have an array of 5 elements, the valid index positions are 0, 1, 2, 3, and 4. There is no index 5. That's one less than the total length.
let fruits = ["mango", "banana", "apple", "orange", "grapes"];
Here's how those elements map to index positions:
Index: 0 1 2 3 4
Value: "mango" "banana" "apple" "orange" "grapes"
To access an element you write the array name followed by the index in square brackets:
console.log(fruits[0]); // mango
console.log(fruits[1]); // banana
console.log(fruits[3]); // orange
console.log(fruits[4]); // grapes
If you try to access an index that doesn't exist:
console.log(fruits[10]); // undefined
You get undefined. The slot doesn't exist so there's nothing there. No error, just undefined. Something to watch out for.
The zero indexing thing feels weird at first. I kept writing [1] when I wanted the first element for like a week. It just takes a bit of time to become automatic.
Updating Elements
Changing an element in an array is exactly like reassigning a variable. You just target it by index and assign a new value.
let fruits = ["mango", "banana", "apple", "orange", "grapes"];
fruits[2] = "strawberry";
console.log(fruits);
// ["mango", "banana", "strawberry", "orange", "grapes"]
Apple at index 2 is now replaced with strawberry. Everything else stays exactly where it was. Simple as that.
The length Property
Every array has a built-in property called length that tells you how many elements are in it. You access it with dot notation just like object properties.
let fruits = ["mango", "banana", "apple", "orange", "grapes"];
console.log(fruits.length); // 5
This one is more useful than it sounds. You'll use it constantly especially in loops. There's also a neat trick – if you want to access the last element of an array without knowing how long it is, you can use the length like this:
console.log(fruits[fruits.length - 1]); // grapes
Because the last index is always one less than the length. If length is 5, the last index is 4. Always. This is a pattern you'll see everywhere in real JavaScript code.
Looping Over an Array
Okay so having values in an array is great but the real power shows up when you loop through them. Instead of writing console.log five times for five elements you write a loop that handles all of them.
The classic way is a for loop with the index:
let fruits = ["mango", "banana", "apple", "orange", "grapes"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Output:
mango
banana
apple
orange
grapes
Let me walk through what's happening here. i starts at 0. The condition says keep going as long as i is less than fruits.length which is 5. So i goes 0, 1, 2, 3, 4 and then stops because 5 is not less than 5. On each loop we access fruits[i] which gives us each element in order. Really clean.
There's also a simpler loop called for...of which is easier to read when you just want the values and don't need the index:
for (let fruit of fruits) {
console.log(fruit);
}
Same output, less code. I personally find for...of much easier to read. Use the regular for loop when you need the index number for something. Use for...of when you just want to go through the values one by one.
Quick Comparison – Individual Variables vs Array
Just to hammer home why arrays exist, here's the same data written both ways:
Without array:
let movie1 = "Inception";
let movie2 = "Interstellar";
let movie3 = "The Dark Knight";
let movie4 = "Parasite";
let movie5 = "3 Idiots";
console.log(movie1);
console.log(movie2);
console.log(movie3);
console.log(movie4);
console.log(movie5);
With array:
let movies = ["Inception", "Interstellar", "The Dark Knight", "Parasite", "3 Idiots"];
for (let movie of movies) {
console.log(movie);
}
Same result. Half the code. And if you had 50 movies the second version wouldn't change at all – the loop handles it automatically. The first version would be 100 lines. Yeah. Arrays win.
Assignment
Five Favourite Movies – Access, Update, and Loop
// Step 1 – Create the array
let movies = ["Inception", "Interstellar", "The Dark Knight", "Parasite", "3 Idiots"];
// Step 2 – Print first and last element
console.log("First movie: " + movies[0]); // Inception
console.log("Last movie: " + movies[movies.length - 1]); // 3 Idiots
// Step 3 – Update one value
movies[2] = "Oppenheimer";
console.log("Updated array: ");
console.log(movies);
// ["Inception", "Interstellar", "Oppenheimer", "Parasite", "3 Idiots"]
// Step 4 – Loop through and print all
console.log("All movies: ");
for (let i = 0; i < movies.length; i++) {
console.log((i + 1) + ". " + movies[i]);
}
Output:
First movie: Inception
Last movie: 3 Idiots
Updated array:
["Inception", "Interstellar", "Oppenheimer", "Parasite", "3 Idiots"]
All movies:
1. Inception
2. Interstellar
3. Oppenheimer
4. Parasite
5. 3 Idiots
A couple of things I did here intentionally. For the last element I used movies[movies.length - 1] instead of hardcoding movies[4]. That way even if the array changes size later the code still works correctly. And in the final loop I did i + 1 just so the printed list starts from 1 instead of 0 since that looks more natural when displaying to a user.
Quick Recap
An array stores multiple values in one variable in an ordered list
Square brackets are used to create an array – let arr = [val1, val2, val3]
Index starts at 0 so the first element is always at index 0
Access elements using arr[index], update them the same way with reassignment
arr.length gives the total number of elements
Last element is always at arr[arr.length - 1]
Use a for loop with index when you need the position, use for...of when you just need the values
Honestly arrays are one of those things that seem simple but you realise how important they are once you start writing anything slightly real. Like any time data comes from a user, a form, a database, an API – it almost always comes back as an array. Getting comfortable with this now is going to save a lot of pain later.