# JavaScript Arrays 101

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

An **array** is a collection of multiple values stored in a single variable, in an ordered way. You can think of it as a **box that holds multiple items**, and each item has a position (index).

Imagine you want to store a list of fruits:

*   Apple
    
*   Mango
    
*   Banana
    
*   Orange
    

Without arrays, you would write:

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

Now imagine storing **100 fruits** like this  
  
That’s messy and hard to manage.

**Arrays solve this problem.**

## Creating an Array

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

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

Now instead of 4 variables, we have **one array** called `fruits`.

## Understanding Index

In JavaScript, **index starts from 0**.

That means:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Index</p></th><th colspan="1" rowspan="1"><p>Value</p></th></tr><tr><td colspan="1" rowspan="1"><p>0</p></td><td colspan="1" rowspan="1"><p>Apple</p></td></tr><tr><td colspan="1" rowspan="1"><p>1</p></td><td colspan="1" rowspan="1"><p>Mango</p></td></tr><tr><td colspan="1" rowspan="1"><p>2</p></td><td colspan="1" rowspan="1"><p>Banana</p></td></tr><tr><td colspan="1" rowspan="1"><p>3</p></td><td colspan="1" rowspan="1"><p>Orange</p></td></tr></tbody></table>

### Visual Representation of Array

![https://miro.medium.com/v2/resize%3Afit%3A1176/1%2APnCdcTVaEOUS7mZ8zlPQBQ.gif](https://miro.medium.com/v2/resize%3Afit%3A1176/1%2APnCdcTVaEOUS7mZ8zlPQBQ.gif align="center")

![https://scaler.com/topics/images/introduction-to-the-javascript-array.webp](https://scaler.com/topics/images/introduction-to-the-javascript-array.webp align="center")

![https://i.sstatic.net/G4Y6z.png](https://images.openai.com/thumbnails/url/hBaSsXicu5meUVJSUGylr5-al1xUWVCSmqJbkpRnoJdeXJJYkpmsl5yfq5-Zm5ieWmxfaAuUsXL0S7F0Tw70zHLX9Te3ME9OrnRy8_EoSU219PX3LS3LjfAPTE_0N0lzDTYzTvPO9TYIVCu2NTQAAPbiJDY align="center")

Think of it like numbered boxes in memory.

## Accessing Elements Using Index

We access elements using square brackets and index number.

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

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

`fruits[0]` means:  
  
"Give me the element at index 0."

## Updating Elements

We can change any value using its index.

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

fruits[1] = "Pineapple";

console.log(fruits);
```

### Output:

```plaintext
["Apple", "Pineapple", "Banana", "Orange"]
```

We replaced **Mango** with **Pineapple**.

## Array Length Property

Arrays have a built-in property called `length`.

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

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

It tells us how many elements are inside the array.

Very useful when looping.

## Basic Looping Over Arrays

To print all elements, we use a `for` loop.

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

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

### How It Works:

*   Start from index `0`
    
*   Run until `length - 1`
    
*   Print each element
    

## Storing Values Individually vs Using Array

### Without Array

```plaintext
let mark1 = 85;
let mark2 = 90;
let mark3 = 78;
let mark4 = 88;
```

Hard to loop. Hard to manage.

### With Array

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

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

Much cleaner. Scalable. Manageable.