JavaScript Arrays 101
We are making steady progress through the MasterJi dashboard. Now that we have covered how to build blueprints with Classes, we need a way to store multiple items without creating a mess of variables. This brings us to JavaScript Arrays.
In day-to-day life, we use lists for everything: a shopping list, a list of tasks, or the names of students in a cohort. In JavaScript, an Array is the ultimate "inventory" system for your data.
Level 1: Why Use Arrays?
Imagine you are organizing a cricket team. Without an array, you would have to create eleven separate variables:
let player1 = "Rohit";
let player2 = "Virat";
// ... and so on.
This is impossible to manage once the list grows. An array allows you to store all these related values in a single variable, keeping your "inventory" organized and easy to search.
Level 2: Creating Your Inventory
To create an array, we use square brackets []. You can put numbers, strings, or even other objects inside.
Example: A Shopping List
JavaScript
const shoppingList = ["Milk", "Bread", "Eggs", "Butter"];
Level 3: The Rule of Zero (Indexing)
This is the most important rule in JavaScript arrays: Counting starts at 0, not 1.
If you want the first item in your list, you ask for index 0. If you want the second, you ask for index 1.
Item | Index |
"Milk" | 0 |
"Bread" | 1 |
"Eggs" | 2 |
Accessing items in code:
JavaScript
console.log(shoppingList[0]); // Output: Milk
console.log(shoppingList[2]); // Output: Eggs
Level 4: Managing the Inventory
Arrays are flexible. You can check how many items are inside and change them as needed.
Checking the Size
The length property tells you exactly how many items are in the array. This is useful for knowing when a list is full.
JavaScript
console.log(shoppingList.length); // Output: 4
Updating an Item
If you realize you actually wanted "Brown Bread" instead of "Bread", you can update that specific index.
JavaScript
shoppingList[1] = "Brown Bread";
console.log(shoppingList); // ["Milk", "Brown Bread", "Eggs", "Butter"]
Level 5: Processing the List (Looping)
What if you want to print every item in your shopping list? Instead of writing console.log four times, we use a loop. The for loop is the standard tool for moving through an array from the start to the end.
JavaScript
for (let i = 0; i < shoppingList.length; i++) {
console.log("Item " + (i + 1) + ": " + shoppingList[i]);
}
Final Quest: The Movie Library
To complete this assignment, let's build a small library of movies and perform some basic operations.
Assignment Implementation
JavaScript
// 1. Create an array of 5 favorite movies
const myMovies = ["Inception", "The Dark Knight", "3 Idiots", "Interstellar", "Dangal"];
// 2. Print the first and last element
console.log("First Movie: " + myMovies[0]);
console.log("Last Movie: " + myMovies[myMovies.length - 1]);
// 3. Change one value and print updated array
myMovies[2] = "Lagaan";
console.log("Updated List: ", myMovies);
// 4. Loop through the array and print all elements
console.log("Complete Movie List:");
for (let i = 0; i < myMovies.length; i++) {
console.log(i + 1 + ". " + myMovies[i]);
}
By mastering arrays, you have moved from storing single pieces of data to managing entire collections. This is a massive step forward in building real-world applications.