# JavaScript Arrays 101

When we start programming, we often need to store multiple values. Imagine storing a **list of fruits**, **student marks**, or **daily tasks**. Instead of creating many separate variables, JavaScript provides a much better solution — **arrays**.

In this article, we will understand what arrays are, why we need them, and how to use them in JavaScript.

* * *

## What Are Arrays and Why Do We Need Them?

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

Instead of doing this:

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

We can store them in **one variable using an array**:

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

### Why Arrays Are Useful

Arrays help us:

*   Store multiple values in one variable
    
*   Keep data organized
    
*   Access elements easily using indexes
    
*   Loop through many values efficiently
    

Think of an array like a **row of boxes**, where each box stores a value.

* * *

## How to Create an Array

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

Example:

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

Another example with numbers:

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

Arrays can store:

*   Strings
    
*   Numbers
    
*   Booleans
    
*   Even mixed values
    

Example:

```plaintext
let mixedArray = ["Parth", 21, true];
```

* * *

## Accessing Elements Using Index

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

Important rule:

**Array indexing starts from 0 in JavaScript.**

Example:

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

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

Accessing elements:

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

* * *

## Updating Elements in an Array

We can change any value in an array using 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**.

* * *

## The Array Length Property

JavaScript provides a **length property** to check how many elements are in an array.

Example:

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

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

Output:

```plaintext
4
```

This tells us that the array contains **4 elements**.

* * *

## Looping Over Arrays

When working with arrays, we often need to **go through each element**.

A simple way to do this is using 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 starts from index **0** and continues until the last element.

* * *

## Assignment Example

Let’s solve the assignment step by step.

### Step 1: Create an array of 5 favorite movies

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

### Step 2: Print the first and last element

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

### Step 3: Change one value

```plaintext
movies[2] = "Spider-Man";
console.log(movies);
```

### Step 4: Loop through the array

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

* * *

## Visual Representation of an Array

Example array:

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

```plaintext
Index:   0        1        2
       -----    -----    -----
       Apple    Banana   Mango
       -----    -----    -----
```

Each value is stored in a **separate memory location** and accessed using its **index**.

* * *

## Conclusion

Arrays are one of the most important data structures in JavaScript. They allow us to store and manage multiple values efficiently in a single variable.

In this article, we learned:

*   What arrays are
    
*   Why they are useful
    
*   How to create arrays
    
*   How indexing works
    
*   How to update elements
    
*   How to loop through arrays
    

Once you understand arrays well, working with larger datasets in JavaScript becomes much easier.