JavaScript Arrays 101
Let's say we want to store the names of five students in our program. Without arrays, we would do something like this:
let student1 = "Gurjeet";
let student2 = "Priya";
let student3 = "Rahul";
let student4 = "Sneha";
let student5 = "Arjun";
That works for five students. But what about fifty? Or five hundred? We cannot create a separate variable for every single value. That is where arrays come in.
An array is a way to store multiple values in a single variable, in a specific order. Instead of five separate variables, we get one clean list.
let students = ["Gurjeet", "Priya", "Rahul", "Sneha", "Arjun"];
One variable, five values, all organised in order. That is the core idea behind arrays.
How to Create an Array
Creating an array in JavaScript is straightforward. We use square brackets and separate each value with a comma.
let fruits = ["apple", "banana", "mango"];
let marks = [85, 92, 76, 88];
let mixed = ["Gurjeet", 22, true]; // arrays can hold different data types too
An array can hold strings, numbers, booleans, or even a mix of all of them. Each value inside an array is called an element.
Accessing Elements Using Index
Every element in an array has a position, and that position is called an index. The important thing to know here is that arrays in JavaScript are zero-indexed. That means the counting starts from 0, not 1.
let fruits = ["apple", "banana", "mango"];
// 0 1 2
So if we want to access the first element, we use index 0. The second element is at index 1, and so on.
let fruits = ["apple", "banana", "mango"];
console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // mango
This trips up almost every beginner at least once. We naturally think of the first item as number 1, but in JavaScript it is always number 0. The sooner that becomes second nature, the better.
What happens if we try to access an index that does not exist?
console.log(fruits[5]); // undefined
JavaScript does not throw an error. It simply returns undefined because there is nothing at that position.
Updating Elements
Accessing an element and updating it follow the same logic. We use the index to target the position and assign a new value.
let fruits = ["apple", "banana", "mango"];
fruits[1] = "grapes"; // replacing "banana" with "grapes"
console.log(fruits); // ["apple", "grapes", "mango"]
We targeted index 1, which was "banana", and replaced it with "grapes". The rest of the array stays exactly as it was.
The length Property
Every array has a built-in property called length that tells us how many elements are in it.
let fruits = ["apple", "banana", "mango"];
console.log(fruits.length); // 3
This is more useful than it sounds. We use length constantly when looping through arrays, checking if an array is empty, or finding the last element.
Speaking of the last element, here is a neat trick. Since the last index is always one less than the total length, we can always access it like this:
let fruits = ["apple", "banana", "mango"];
console.log(fruits[fruits.length - 1]); // mango
This works no matter how many elements are in the array. Whether there are 3 items or 300, fruits.length - 1 will always point to the last one.
Looping Over an Array
Most of the time, we do not just want to access one element. We want to go through the entire array and do something with each item. That is where loops come in.
The most basic way is a for loop:
let fruits = ["apple", "banana", "mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output:
// apple
// banana
// mango
Let's break down what is happening here. We start i at 0 because that is the first index. We keep going as long as i is less than fruits.length, which is 3. Each time the loop runs, we access fruits[i] and print it, then increase i by 1.
So the loop runs three times, once for index 0, once for index 1, and once for index 2, printing each fruit along the way.
A cleaner and more modern way to loop over an array is for...of:
let fruits = ["apple", "banana", "mango"];
for (let fruit of fruits) {
console.log(fruit);
}
// Output:
// apple
// banana
// mango
The for...of loop handles all the index tracking behind the scenes. We just get each element directly, one at a time. When we do not need the index number and just want to work with the values, for...of is the cleaner choice.
