# JavaScript Arrays 101

Hey Everyone,

In this blog, we will learn about JavaScript arrays.

When writing programs, we often need to store **multiple values**.

For example:

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

Storing each value in a separate variable quickly becomes messy.

Let's see why.

* * *

### The Problem Without Arrays

Imagine you want to store 5 games.

```javascript
let game1 = "GTA 6";
let game2 = "FIFA 25";
let game3 = "F1 25";
let game4 = "God of war";
let game5 = "Call of duty";
```

Now imagine storing **50 games** like this.

It becomes very difficult to manage.

This is where **arrays** help.

* * *

### What is an Array?

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

Think of it like a **list**.

Example:

```javascript
let students = ["abhi", "sameer", "deku", "eren", "dhoni"];
```

Now all values are stored in **one variable** called `students`.

* * *

### How to Create an Array

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

Example:

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

Another example:

```javascript
let colors = ["Red", "Green", "Blue"];
```

Arrays can store different types of values.

```javascript
let data = ["Rahul", 25, true];
```

But usually arrays contain **similar types of values**.

* * *

### Array Index

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

Important rule:

**Array indexing starts from 0.**

Example:

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

Visual representation:

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

* * *

### Accessing Array Elements

We access elements using **index numbers**.

Example:

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

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

* * *

### Updating Array Elements

`You can also change values inside an array.`

Example:

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

console.log(fruits); // ["Apple", "Banana", "Mango"]

fruits[1] = "Orange";

console.log(fruits); // ["Apple", "Orange", "Mango"]
```

* * *

### Array Length Property

Arrays have a special property called **length**.

It tells us **how many elements are inside the array**.

Example:

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

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

This is very useful when working with loops.

* * *

### Looping Over Arrays

Instead of printing each element manually, we can use a **loop**.

Example using `for` loop:

```javascript
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 goes through **each element of the array**.

## Practice Assignment

Try this in your browser console.

* * *

### Step 1: Create an Array

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

Example:

```javascript
let movies = ["Inception", "Avengers", "Interstellar", "Batman", "Joker"];
```

* * *

### Step 2: Print First Element

```javascript
console.log(movies[0]);
```

* * *

### Step 3: Print Last Element

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

* * *

### Step 4: Update One Value

```javascript
movies[2] = "Spider-Man";

console.log(movies);
```

* * *

### Step 5: Loop Through the Array

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

* * *

And now, you know what arrays are.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!