• 5 favorite movies

• 10 student marks

• A list of daily tasks

You could create separate variables like this:

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:

[ 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

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

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.

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

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

Structure:

fruits[index]

If you try to access a non-existing index:

console.log(fruits[10]);

It will return:

undefined

🔄 Updating Array Elements

You can change values using index.

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

fruits[1] = "Grapes";

console.log(fruits);

Before:

["Apple", "Banana", "Mango"]

After:

["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.

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

console.log(fruits.length);

Output:

3

Useful when looping through arrays.

🔁 Looping Over Arrays

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

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:

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

Each value occupies a position in memory.

🆚 Individual Variables vs Array

❌ Without Array

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

Hard to manage.

✅ With Array

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.