# 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.

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/79a25fa2-656d-4c11-a2e0-20ff3e5e99ce.png align="center")

* * *

## 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

```plaintext
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.

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Item</strong></p></td><td colspan="1" rowspan="1"><p><strong>Index</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p>"Milk"</p></td><td colspan="1" rowspan="1"><p>0</p></td></tr><tr><td colspan="1" rowspan="1"><p>"Bread"</p></td><td colspan="1" rowspan="1"><p>1</p></td></tr><tr><td colspan="1" rowspan="1"><p>"Eggs"</p></td><td colspan="1" rowspan="1"><p>2</p></td></tr></tbody></table>

**Accessing items in code:**

JavaScript

```plaintext
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

```plaintext
console.log(shoppingList.length); // Output: 4
```

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/4bd61ff9-7cc3-4a1e-9f61-5c4d6955b679.png align="center")

### Updating an Item

If you realize you actually wanted "Brown Bread" instead of "Bread", you can update that specific index.

JavaScript

```plaintext
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

```plaintext
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

```plaintext
// 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.