# JavaScript Array 101

forgot everything , why do we need this .

suoppose you are building a code that store your favourite moment with your girl .

```javascript
let moment1 = "cuddling";
let moment2 = "teasing";
let moment3 = "swimminng";
```

this would workk but it quickly becomes messy, what if u have more moment (but do you actually have any one of these haha , even i dont have ) managing so many variable would be difficult, thats why they need something that could help them .

this is where array come into the picture .

An array allow us to store multiple value inside a single variable while keeping thwm organised and easy to access.

```javascript
let moments = ["Cuddling", "teasing", "Swimming"]
```

here instead of creating many variale , we store all value in a one structure.

Here:

*   `moment` is the array name
    
*   `"Cuddling"`, `"teasing"`, and `"Swimming"` are the elements inside the array
    

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

### Array Index Example

| Index | Value |
| --- | --- |
| 0 | Cuddling |
| 1 | teasing |
| 2 | Swimming |

One important rule in JavaScript:

array indexing starts frm 0, not one

did u see the meme you are my \[1\] priority this is that means

So:

*   `"Cuddling"` → index **0**
    
*   `"teasing"` → index **1**
    
*   `"swimming"` → index **2**
    

* * *

# Creation of an array

in simplest word possible arrays are created using bracket \[\]. inside these we store value by separting by a column

```javascript
let moments = ["Cuddling", "teasing", "Swimming"
```

### 1\. Basic Syntax

```javascript
let arrayName = [value1, value2, value3];
```

### 2\. Example with Strings

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

### 3\. Example with Numbers

```javascript
let marks = [80, 75, 90, 88];
```

### 4\. Example with Mixed Data Types

JavaScript arrays can store different types of values together.

```javascript
let mixed = ["Hello", 100, true];
```

### 5\. Creating an Empty Array

```javascript
let items = [];
```

An empty array means it has **no elements yet**, but values can be added later.

### Key Points

*   Arrays are created using `[]`
    
*   Elements are separated by commas
    
*   Arrays store values in order
    
*   Indexing starts from `0`
    

* * *

# Accessing element using indexing

We access array elements using their **index number**.

Remember:  
Indexing in JavaScript starts from **0**.

### Example

```javascript
let moments = ["Cuddling", "teasing", "Swimming"];

console.log(moments[0]);
console.log(moments[1]);
console.log(moments[2]);
```

### Output

```plaintext
Cuddling
teasing
Swimming
```

### How It Works

| Index | Value |
| --- | --- |
| 0 | Cuddling |
| 1 | teasing |
| 2 | Swimming |

To access an element, use this syntax:

```javascript
arrayName[index]
```

Example:

```javascript
moments[1]
```

This gives the value stored at position 1.

### What If You Use a Wrong Index?

If you try to access an index that does not exist:

```javascript
console.log(moments[5]);
```

JavaScript will return:

```plaintext
undefined
```

* * *

# Updating Elements in an Array

Arrays in JavaScript are **mutable**, which means their values can be changed after creation.

To update an element, we use its **index number** .

### Example

```javascript
let moments = ["Cuddling", "teasing", "Swimming"];

moments[1] = "Talking";

console.log(moments);
```

### Output

```id="upd002"
["Cuddling", "Talking", "Swimming"]
```

### How It Works

*   `moments[1]` refers to the second element.
    
*   We assign a new value using `=`.
    
*   The original value gets replaced.
    

### General Syntax

```javascript
arrayName[index] = newValue;
```

### Important Points

*   You must use a valid index.
    
*   If the index exists → value is replaced.
    
*   If the index does not exist → it creates empty slots
    

* * *

# Array Length Property

The `length` property tells us how many element are inside an array.

It is very useful when working with loops.

### Example

```javascript
let moments = ["Cuddling", "teasing", "Swimming"];

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

### Output

```id="len002"
3
```

Because there are **3 elements** in the array.

* * *

### Important Rule

```javascript
arrayName.length
```

*   It does not use brackets `[]`
    
*   It is a property, not an index
    
*   It always returns a number
    

* * *

### Why Length Is Important

If you want to access the last element:

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

This works because:

*   `length` = total elements
    
*   Last index = `length - 1`
    

For our array:

*   length = 3
    
*   last index = 2
    

## Basic Looping Over Arrays

When an array has many elements, printing them one by one is not practical.

Instead, we use a loop to go through each element automatically.

The most common way is using a **for loop**.

* * *

### Why We Need Loops

Without a loop:

```javascript
console.log(moments[0]);
console.log(moments[1]);
console.log(moments[2]);
```

This works only for small arrays.

If the array has 100 items, this method becomes useless.

That’s why we use loops.

* * *

### Using a For Loop

```javascript
let moments = ["Cuddling", "teasing", "Swimming"];

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

* * *

### How This Loop Works

Let’s break it down clearly:

#### 1️⃣ Initialization

```javascript
let i = 0;
```

We start from index 0 (first element).

#### 2️⃣ Condition

```javascript
i < moments.length;
```

The loop runs until `i` is less than the array length.

Since length = 3, loop runs for:

*   i = 0
    
*   i = 1
    
*   i = 2
    

#### 3️⃣ Increment

```javascript
i++
```

After each iteration, `i` increases by 1.

* * *

### Step-by-Step Execution

| i | moments\[i\] |
| --- | --- |
| 0 | Cuddling |
| 1 | teasing |
| 2 | Swimming |

* * *

### Final Output

```plaintext
Cuddling
teasing
Swimming
```

* * *

### Why We Use `length` in Loops

This is very important.

```javascript
i < moments.length
```

Using `length` makes the loop dynamic.

If you add more elements, the loop still works automatically.

That is professional coding practice.

* * *