In programming, we often need to work with multiple related values. For example, a list of fruits, student marks, or daily tasks. Storing each value in a separate variable quickly becomes messy and hard to manage.
This is where arrays become useful. Arrays allow us to store multiple values in a single variable and access them easily using their position.
What Are Arrays and Why Do We Need Them?
An array is a data structure used to store a collection of values in a specific order.
Instead of creating many variables like this:
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
We can store them in a single array:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
Benefits of using arrays:
- Store multiple related values in one place
- Easier to manage and organize data
- Simplifies looping through data
- Makes code cleaner and more scalable
How to Create an Array
Arrays are created using square brackets [].
Example
let fruits = ["Apple", "Banana", "Mango"];
Another example with numbers:
let marks = [85, 90, 78, 92];
Each value inside the array is called an element.
Accessing Elements Using Index
Every element in an array has a position, called its index.
Important rule:
Array indexing starts from **0, not 1.
Example array:
let fruits = ["Apple", "Banana", "Mango"];
| Index | Value |
|---|---|
| 0 | Apple |
| 1 | Banana |
| 2 | Mango |
Accessing elements:
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango
The number inside the brackets tells JavaScript which position to retrieve.
Updating Elements
Array elements can be updated by assigning a new value to a specific index.
Example:
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);
Output:
["Apple", "Orange", "Mango"]
Here we replaced "Banana" with "Orange".
Array Length Property
The length property tells us how many elements are in the array.
Example:
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.length);
Output:
4
The length property is also useful when working with loops.
Basic Looping Over Arrays
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"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Output:
Apple
Banana
Mango
Explanation:
-
istarts at0(first index) - The loop runs until
ireaches the array length - Each iteration prints the element at position
i
Assignment
Try the following exercises to practice working with arrays.
Questions
Create an array containing 5 of your favorite movies.
Print the first element and last element of the array.
Change one value in the array and print the updated array.
Loop through the array and print all elements.
Answers
1. Create an Array of Movies
let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
2. Print the First and Last Element
let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
console.log(movies[0]); // first movie
console.log(movies[movies.length - 1]); // last movie
3. Change One Value
let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
movies[2] = "Your Name";
console.log(movies);
4. Loop Through the Array
let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
for (let i = 0; i < movies.length; i++) {
console.log(movies[i]);
}
Conclusion
Arrays are an essential part of JavaScript because they allow us to store and manage collections of data efficiently. By understanding how to create arrays, access elements, update values, and loop through them, you build a strong foundation for working with larger datasets in real-world applications.
Top comments (1)
The 'length' property of an array doesn't actually give you the number of elements stored in the array - it gives you the length of the array, which is not necessarily the same thing.
Arrays in JS are sparse arrays, which means they can have empty slots. Such slots are truly empty and are different from slots that contain undefined. Empty slots are skipped by most array methods.
The following array only contains 2 elements, but has a length of 3:
[1,, 3]
If you use the forEach method on this array, your callback will only run twice as the array only contains two elements