JavaScript Arrays 101
When we start programming, we often need to store multiple values. Imagine storing a list of fruits, student marks, or daily tasks. Instead of creating many separate variables, JavaScript provides a much better solution — arrays.
In this article, we will understand what arrays are, why we need them, and how to use them in JavaScript.
What Are Arrays and Why Do We Need Them?
An array is a collection of multiple values stored in a single variable.
Instead of doing this:
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
We can store them in one variable using an array:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
Why Arrays Are Useful
Arrays help us:
Store multiple values in one variable
Keep data organized
Access elements easily using indexes
Loop through many values efficiently
Think of an array like a row of boxes, where each box stores a value.
How to Create an Array
In JavaScript, arrays are created using square brackets [].
Example:
let fruits = ["Apple", "Banana", "Mango"];
Another example with numbers:
let marks = [85, 90, 78, 92];
Arrays can store:
Strings
Numbers
Booleans
Even mixed values
Example:
let mixedArray = ["Parth", 21, true];
Accessing Elements Using Index
Each element in an array has an index number.
Important rule:
Array indexing starts from 0 in JavaScript.
Example:
let fruits = ["Apple", "Banana", "Mango"];
| Index | Value |
|---|---|
| 0 | Apple |
| 1 | Banana |
| 2 | Mango |
Accessing elements:
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango
Updating Elements in an Array
We can change any value in an array using its index.
Example:
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);
Output:
["Apple", "Orange", "Mango"]
Here we replaced Banana with Orange.
The Array Length Property
JavaScript provides a length property to check how many elements are in an array.
Example:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.length);
Output:
4
This tells us that the array contains 4 elements.
Looping Over Arrays
When working with arrays, we often need to go through each element.
A simple 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
The loop starts from index 0 and continues until the last element.
Assignment Example
Let’s solve the assignment step by step.
Step 1: Create an array of 5 favorite movies
let movies = ["Inception", "Interstellar", "Avengers", "Joker", "Titanic"];
Step 2: Print the first and last element
console.log(movies[0]);
console.log(movies[movies.length - 1]);
Step 3: Change one value
movies[2] = "Spider-Man";
console.log(movies);
Step 4: Loop through the array
for (let i = 0; i < movies.length; i++) {
console.log(movies[i]);
}
Visual Representation of an Array
Example array:
let fruits = ["Apple", "Banana", "Mango"];
Index: 0 1 2
----- ----- -----
Apple Banana Mango
----- ----- -----
Each value is stored in a separate memory location and accessed using its index.
Conclusion
Arrays are one of the most important data structures in JavaScript. They allow us to store and manage multiple values efficiently in a single variable.
In this article, we learned:
What arrays are
Why they are useful
How to create arrays
How indexing works
How to update elements
How to loop through arrays
Once you understand arrays well, working with larger datasets in JavaScript becomes much easier.