# JavaScript Arrays 101

## Introduction

When programming, we often need to store **multiple values together**.

For example, imagine keeping track of your favorite anime characters:

*   Naruto
    
*   Luffy
    
*   Goku
    
*   Tanjiro
    

Instead of creating many separate variables, JavaScript provides something called an **array**.

An array helps store **multiple values inside a single variable**.

Think of it like a **list of ninja trainees in a squad from** Naruto.

* * *

# What Are Arrays?

An **array** is a collection of values stored in **order**.

Example:

```plaintext
let ninjas = ["Naruto", "Sasuke", "Sakura"];
```

Here:

| Index | Value |
| --- | --- |
| 0 | Naruto |
| 1 | Sasuke |
| 2 | Sakura |

Arrays store values **in order**, and each value has a **position called an index**.

* * *

# Why Do We Need Arrays?

Without arrays, we would need multiple variables.

Example without arrays:

```plaintext
let ninja1 = "Naruto";
let ninja2 = "Sasuke";
let ninja3 = "Sakura";
```

This becomes difficult when the list grows.

Using arrays is much cleaner:

```plaintext
let ninjas = ["Naruto", "Sasuke", "Sakura"];
```

Now everything is stored **in one place**.

* * *

# How to Create an Array

Arrays are created using **square brackets** `[]`.

Example:

```plaintext
let fruits = ["Apple", "Banana", "Mango"];
```

Another example:

```plaintext
let powerLevels = [100, 250, 900];
```

Arrays can store:

*   Strings
    
*   Numbers
    
*   Booleans
    

* * *

# Accessing Elements Using Index

Each element in an array has an **index number**.

Important rule:

⚡ **Indexing starts from 0**

Example:

```plaintext
let characters = ["Luffy", "Zoro", "Sanji"];

console.log(characters[0]);
```

Output:

```plaintext
Luffy
```

Another example:

```plaintext
console.log(characters[2]);
```

Output:

```plaintext
Sanji
```

* * *

# Updating Elements

We can change values inside an array.

Example:

```plaintext
let characters = ["Naruto", "Sasuke", "Sakura"];

characters[1] = "Kakashi";

console.log(characters);
```

Updated array:

```plaintext
["Naruto", "Kakashi", "Sakura"]
```

The value at index **1** was updated.

* * *

# The Array Length Property

JavaScript arrays have a built-in property called **length**.

It tells us how many elements are inside the array.

Example:

```plaintext
let heroes = ["Goku", "Naruto", "Luffy", "Tanjiro"];

console.log(heroes.length);
```

Output:

```plaintext
4
```

This is very useful when working with loops.

* * *

# Looping Through Arrays

Often we want to **go through every element in the array**.

We can do this using a `for` loop.

Example:

```plaintext
let heroes = ["Goku", "Naruto", "Luffy"];

for (let i = 0; i < heroes.length; i++) {
  console.log(heroes[i]);
}
```

Output:

```plaintext
Goku
Naruto
Luffy
```

How it works:

1️⃣ `i` starts at **0**  
  
2️⃣ Loop runs until `i < heroes.length`  
  
3️⃣ Each iteration prints one element

* * *

# Example: Anime Watchlist

Let’s store an anime watchlist.

```plaintext
let watchlist = ["Naruto", "One Piece", "Demon Slayer"];

console.log(watchlist[0]);
console.log(watchlist[1]);
console.log(watchlist[2]);
```

Output:

```plaintext
Naruto
One Piece
Demon Slayer
```

Arrays make it easy to manage lists like this.

* * *

# Assignment for Readers 🚀

Try these exercises in your **browser console**.

* * *

## 1️⃣ Create an Array

Create an array of **5 favorite movies**.

Example idea:

```plaintext
let movies = ["Movie1", "Movie2", "Movie3", "Movie4", "Movie5"];
```

* * *

## 2️⃣ Print First and Last Element

Example idea:

```plaintext
First movie → movies[0]
Last movie → movies[4]
```

* * *

## 3️⃣ Change One Value

Update one movie in the array.

Example:

```plaintext
movies[2] = "New Movie";
```

Print the updated array.

* * *

## 4️⃣ Loop Through the Array

Use a loop to print every movie.

Example output:

```plaintext
Movie1
Movie2
Movie3
Movie4
Movie5
```

* * *

# Conclusion

Arrays are one of the most important data structures in JavaScript.

Key points:

*   Arrays store **multiple values in order**
    
*   Elements are accessed using **indexes**
    
*   Indexing starts from **0**
    
*   We can **update values**
    
*   The `length` property tells us how many elements exist
    
*   Loops allow us to process **all elements easily**
    

Understanding arrays is essential because they are used **everywhere in JavaScript programming**.