JavaScript Arrays 101
When we start learning programming, we often store information in variables. But what happens when we need to store multiple related values? Writing many variables quickly becomes messy.
This is where arrays help us.
In this article, we will understand what arrays are, why we use them, and how to work with them in JavaScript using simple examples.
1. What Are Arrays and Why Do We Need Them?
An array is a collection of multiple values stored in a single variable.
Instead of writing many variables like this:
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
We can store all of them in one array:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
This makes our code:
Cleaner
Easier to manage
Easier to loop through
You can think of an array as a list of items stored together.
Example lists:
List of fruits
Student marks
Daily tasks
Favorite movies
2. How to Create an Array in JavaScript
In JavaScript, arrays are created using square brackets [ ].
Example
let fruits = ["Apple", "Banana", "Mango"];
Another example:
let marks = [85, 90, 78, 92];
Arrays can store different types of values:
let data = ["John", 25, true];
But usually we store similar types of values together for better clarity.
3. Accessing Elements Using Index
Each value inside an array has a position number, called an index.
Important rule:
Array indexing starts from 0.
Example array:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
| Index | Value |
|---|---|
| 0 | Apple |
| 1 | Banana |
| 2 | Mango |
| 3 | Orange |
Accessing values
console.log(fruits[0]); // Apple
console.log(fruits[2]); // Mango
So:
fruits[0]→ First elementfruits[1]→ Second elementfruits[2]→ Third element
4. Updating Elements in an Array
We can change any value in an array using its index.
Example
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Grapes";
console.log(fruits);
Output:
["Apple", "Grapes", "Mango"]
Here we replaced Banana with Grapes.
5. The Array Length Property
JavaScript arrays have a built-in property called length.
It tells us how many elements are inside the array.
Example:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.length);
Output:
4
This is very useful when working with loops.
6. Looping Through an Array
Often we want to process every element in an array.
The easiest way to do this is using a for loop.
Example
let fruits = ["Apple", "Banana", "Mango", "Orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Output:
Apple
Banana
Mango
Orange
Explanation:
istarts from0Loop runs until
i < fruits.lengthfruits[i]prints each element
Visualizing an Array
Arrays can be visualized like a row of boxes in memory.
Index: 0 1 2 3
--------------------------------
Value: | Apple | Banana | Mango | Orange |
--------------------------------
Each box stores one value, and the index tells us where the value is stored.
Real-Life Example
Imagine a student marks list.
Instead of this:
let mark1 = 85;
let mark2 = 90;
let mark3 = 78;
let mark4 = 88;
We can simply write:
let marks = [85, 90, 78, 88];
Now we can easily:
Access marks
Update marks
Loop through them
Assignment Practice
Try this small exercise to test your understanding.
1️⃣ Create an array of 5 favorite movies
Example:
let movies = ["Inception", "Avengers", "Interstellar", "Titanic", "Joker"];
2️⃣ Print the first and last element
console.log(movies[0]);
console.log(movies[4]);
3️⃣ Change one value
movies[2] = "Avatar";
4️⃣ Print the updated array
console.log(movies);
5️⃣ Loop through the array
for (let i = 0; i < movies.length; i++) {
console.log(movies[i]);
}
Final Thoughts
Arrays are one of the most important data structures in JavaScript.
They help us:
Store multiple values in one place
Organize data easily
Loop through collections efficiently
Once you are comfortable with basic arrays, you can start learning powerful array methods like map(), filter(), and reduce().
But mastering the basics first will make everything else much easier.