# JavaScript Arrays: A Beginner's Guide

When learning JavaScript, you will often need to store multiple values together. For example, a list of fruits, student marks, or tasks for the day.

Instead of creating many separate variables, JavaScript provides a powerful structure called an **array**.

In this article, we will learn the basics of arrays and how to use them in everyday programming.

### What Are Arrays?

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

For example, imagine you want to store the names of fruits.

### Without an Array

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

This works, but it quickly becomes messy when the number of values increases.

### With an Array

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

Now all values are stored inside **one variable**.

Arrays help us:

*   Store multiple values together
    
*   Access values easily
    
*   Loop through data efficiently
    

### How to Create an Array

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

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

Another example:

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

Arrays can store:

*   Strings
    
*   Numbers
    
*   Booleans
    
*   **Even mixed values**
    

Example:

```plaintext
let data = ["Chetan", 22, true];
```

### Array Index (Important Concept)

Each element in an array has an **index** that represents its position.

**Indexing starts from 0, not 1.**

### Array Index Diagram

![](https://cdn-images-1.medium.com/max/1130/1*pjQMGgS5lFWrwPOx2FN4fw.png align="center")

So:

`fruits[0]` → Apple

`fruits[1]` → Banana

`fruits[2]` → Mango

### Accessing Array Elements

You can access elements using the **index number**.

Example:

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

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

Output:

```plaintext
Apple
Banana
Mango
```

### Updating Array Elements

You can update a value by assigning a new value to its index.

Example:

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

```plaintext
fruits[1] = "Orange";
```

```plaintext
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"];
```

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

Output:

```plaintext
4
```

This is very useful when working with loops.

### Looping Through an Array

Often we want to access **every element in an array**.

A simple way is using a **for loop**.

Example:

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

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

Output:

```plaintext
Apple
Banana
Mango
```

### How it Works

![](https://cdn-images-1.medium.com/max/1130/1*iyitcdAOLHASvd3dZe8mLg.png align="center")

The loop runs until `i < fruits.length`.

### Memory Style Representation of an Array

You can imagine arrays stored in memory like blocks.

```plaintext
fruits
```

```plaintext
+-------+-------+-------+-------+
| Apple | Banana| Mango |Orange |
+-------+-------+-------+-------+
   0       1       2       3
```

Each value has its **own position (index)**.

### Final Thoughts

Arrays are one of the most useful data structures in JavaScript.

They allow you to:

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

Once you are comfortable with arrays, you will be able to work with **lists, data collections, APIs, and real-world applications** much more effectively.

< Happy Coding />