# 📚 JavaScript Arrays 101

Imagine you want to store:

*   5 favorite movies
    
*   10 student marks
    
*   A list of daily tasks
    

You *could* create separate variables like this:

```plaintext
let movie1 = "Inception";
let movie2 = "Interstellar";
let movie3 = "Avatar";
```

But what if you have 100 values?

That’s messy.

This is where **arrays** help.

* * *

# 📌 What Are Arrays?

An **array** is a collection of multiple values stored in a single variable.

Think of it like a row of boxes:

```plaintext
[ value, value, value, value ]
```

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

* * *

# 🏗️ How to Create an Array

We use square brackets `[]` to create an array.

### Example: List of Fruits

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

Now all fruits are stored inside one variable.

Much cleaner than creating 4 separate variables.

* * *

# 📊 Visual Representation of an Array

```plaintext
Index:   0        1        2        3
        --------------------------------
Value:  Apple   Banana   Mango   Orange
```

⚠ Important: Indexing starts from **0**, not 1.

That’s very important in JavaScript.

* * *

# 🔎 Accessing Elements Using Index

To access a value, use its index number.

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

console.log(fruits[0]);  // Apple
console.log(fruits[1]);  // Banana
```

Structure:

```plaintext
fruits[index]
```

If you try to access a non-existing index:

```plaintext
console.log(fruits[10]);
```

It will return:

```plaintext
undefined
```

* * *

# 🔄 Updating Array Elements

You can change values using index.

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

fruits[1] = "Grapes";

console.log(fruits);
```

Before:

```plaintext
["Apple", "Banana", "Mango"]
```

After:

```plaintext
["Apple", "Grapes", "Mango"]
```

Arrays are mutable — meaning values can be changed.

* * *

# 📏 The `length` Property

To know how many elements are in an array, use `.length`.

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

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

Output:

```plaintext
3
```

Useful when looping through arrays.

* * *

# 🔁 Looping Over Arrays

To print all elements, we can use a simple `for` loop.

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

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

How it works:

1.  Start from index 0
    
2.  Continue until `i < fruits.length`
    
3.  Print each element
    

* * *

# 🧠 Memory-Style Block Diagram

Think of array storage like this:

```plaintext
fruits
   ↓
 -------------------------
 | Apple | Banana | Mango |
 -------------------------
    0        1        2
```

Each value occupies a position in memory.

* * *

# 🆚 Individual Variables vs Array

### ❌ Without Array

```plaintext
let mark1 = 85;
let mark2 = 90;
let mark3 = 78;
```

Hard to manage.

* * *

### ✅ With Array

```plaintext
let marks = [85, 90, 78];
```

Cleaner. Scalable. Easier to loop.

* * *

# 💡 Final Thoughts

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

They are used in:

*   Storing API data
    
*   Managing lists
    
*   Working with loops
    
*   Building real-world applications
    

If you understand:

*   Indexing
    
*   Updating
    
*   Length
    
*   Looping
    

You’re building strong fundamentals.

Advanced array methods (map, filter, reduce) come next — but mastering the basics first is very important.