# JavaScript Arrays 101

When writing programs, we often need to store **multiple related values**.  
For example:

*   A list of fruits
    
*   Marks of students
    
*   Daily tasks
    
*   Favorite movies
    

If we store each value separately, our code quickly becomes messy.

```plaintext
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
```

Managing many variables like this is difficult.

JavaScript provides a better solution: **Arrays**.

Arrays allow us to **store multiple values inside a single variable**.

* * *

# What Are Arrays?

An **array** is a collection of values stored in **ordered positions**.

Each value in an array is called an **element**.

Example:

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

Here:

*   `fruits` is the array
    
*   `"Apple"`, `"Banana"`, `"Mango"`, `"Orange"` are elements
    
*   Elements are stored in a specific order
    

Arrays are useful when we need to **group related data together**.

* * *

# How to Create an Array

In JavaScript, arrays are created using **square brackets** `[]`.

Example:

```plaintext
let numbers = [10, 20, 30, 40];
```

Another example:

```plaintext
let tasks = ["Study", "Exercise", "Read", "Code"];
```

An array can store **different types of values**:

```plaintext
let mixedArray = ["Hello", 25, true];
```

However, usually arrays store **similar types of data** for clarity.

* * *

# Accessing Elements Using Index

Each element in an array has a position called an **index**.

Important rule:

**Array indexing starts from** `0`**.**

Example:

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

| Index | Value |
| --- | --- |
| 0 | Apple |
| 1 | Banana |
| 2 | Mango |
| 3 | Orange |

Access elements like this:

```plaintext
console.log(fruits[0]); // Apple
console.log(fruits[2]); // Mango
```

* * *

# Updating Elements

We can update a value in an array by assigning a new value to its index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);
```

Output:

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

Here we replaced **Banana** with **Orange**.

* * *

# Array Length Property

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

It tells us how many elements are in the array.

Example:

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

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

Output:

```plaintext
4
```

This means the array contains **4 elements**.

* * *

# Looping Through Arrays

Often we want to perform an action on **every element in an array**.

We can use a **for loop**.

Example:

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

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

Output:

```plaintext
Apple
Banana
Mango
Orange
```

The loop runs from index `0` to `length - 1`.

* * *

# Why Arrays Are Useful

Arrays help us:

*   Store multiple values in one variable
    
*   Keep related data organized
    
*   Process many values using loops
    

Instead of writing many variables, we can store everything in a single **structured collection**.

* * *

# Assignment Idea

Try this small exercise:

### 1️⃣ Create an array of 5 favorite movies

Example:

```plaintext
let movies = ["Inception", "Interstellar", "Avengers", "Titanic", "Joker"];
```

### 2️⃣ Print the first and last movie

```plaintext
console.log(movies[0]);
console.log(movies[movies.length - 1]);
```

### 3️⃣ Change one movie

```plaintext
movies[2] = "The Dark Knight";

console.log(movies);
```

### 4️⃣ Loop through the array

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