# JavaScript Arrays 101

Remember when we first started learning JavaScript and created a separate variable for every value? That works fine when we are storing just one thing, like a user's name. But what happens when our data grows?

Imagine you want to store your **five favorite fruits**. Your first instinct might be to write something like this:

```javascript
let firstFruit = "Apple";
let secondFruit = "Banana";
let thirdFruit = "Mango";
let fourthFruit = "Orange";
let fifthFruit = "Pineapple";
```

This works, but it quickly becomes messy. What if you want to store **50 fruits**? Managing that many variables would be difficult.

It also becomes inconvenient if you want to **pass the whole list to a function** or **loop through all the fruits**. You would have to deal with each variable separately.

This is exactly the problem **arrays solve**. Arrays allow us to store multiple related values inside a **single variable**, making our code cleaner and easier to manage.

## What is an Array?

An **array** is a special variable that can hold *more than one value* at a time. Technically speaking, in JavaScript, arrays aren't primitives (like numbers or strings) but are instead `Array` **objects**. They enable us to store a collection of multiple items under a single variable name and come with built-in members (properties and methods) for performing common operations.

Think of it as a numbered list or a container that holds a collection of items in a specific order. Instead of having five separate movie variables, you can have one `movies` variable that holds them all.

### Core Characteristics of JavaScript Arrays

Before we dive into the code, there are a few important things to know about how arrays work in JavaScript:

1.  **They are resizable:** You don't have to declare how big an array will be upfront. You can add or remove items whenever you want.
    
2.  **They can hold mixed data types:** An array can contain numbers, strings, objects, or even other arrays—all at the same time.
    
3.  **They are zero-indexed:** This is crucial. The first element is at index `0`, the second at index `1`, and so on. The last element is always at the index of the array's `length` minus 1.
    
4.  **They create shallow copies:** When you copy an array using standard methods, it creates a shallow copy. This means that if your array contains other objects (like nested arrays), the copy will still reference the original objects.
    

## Creating an Array

The most common way to create an array is using **square brackets** `[]`.

Example:

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

Arrays can store different types of values:

```javascript
let mixedArray = ["Hello", 42, true];
```

Another way to create an array is using the **Array constructor**:

```javascript
const colors = new Array("Red", "Green", "Blue");
```

However, most developers prefer the **square bracket syntax** because it is simpler and clearer.

## Array Indexing

The real power of arrays comes from how we access the individual items inside them. Each item in an array has a numbered position called its **index**.

**Here's the golden rule that every developer must memorize:** Array indices start at `0`, not `1`. You cannot use arbitrary strings as indexes; you must use non-negative integers.

Let's look at our grocery list:

```javascript
const groceryList = [
  "Apples",
  "Milk",
  "Bread",
  "Eggs",
  "Chicken"
];
```

In our `groceryList` array, the items are stored like this:

| Index | Value |
| --- | --- |
| **0** | "Apples" |
| **1** | "Milk" |
| **2** | "Bread" |
| **3** | "Eggs" |
| **4** | "Chicken" |

![](https://cdn.hashnode.com/uploads/covers/6961554ef0df25b6fa3c1311/a56c5f05-3e85-4983-8216-5bb9877256f1.png align="center")

## Updating Array Elements

You can change a value in an array using its index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);
```

Output:

```plaintext
["Apple", "Orange", "Mango"]
```

Here we replaced **Banana** with **Orange**.

## The `.length` Property

JavaScript arrays have a built-in property called `length`.  
It tells us how many elements are inside the array.

Example:

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

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

Output:

```plaintext
3
```

A useful trick is accessing the **last element** of an array:

```javascript
const shoppingCart = ["Milk", "Eggs", "Bread", "Butter"];

let lastItem = shoppingCart[shoppingCart.length - 1];

console.log(lastItem); // Butter
```

### A Small Quirk of the `.length` Property

One interesting thing about the `.length` property is that it can also be **manually changed**. When we increase the length, JavaScript expands the array by adding **empty slots**.

Example:

```javascript
const arr = [1, 2];

console.log(arr);
// [1, 2]

arr.length = 5;

console.log(arr);
// [1, 2, <3 empty items>]
```

Originally, the array had **2 elements**, so its length was `2`.  
When we set `arr.length = 5`, JavaScript increased the size of the array. But instead of filling the new positions with values, it creates **empty slots**.

The array now looks like this:

```plaintext
Index:   0   1    2     3     4
Value:   1   2  empty empty empty
Length:  5
```

These empty positions are sometimes called **holes** in the array.

### Looping Over an Array

Storing data is great, but the real magic is being able to work with that data automatically. A `for` loop is a perfect match for an array.

We use the loop's counter (often named `i` for "index") to access each array element one by one. We start at `0` and continue while `i` is less than the array's `length`.

```javascript
let movies = ["The Matrix", "Inception", "Oppenheimer", "The Dark Knight", "Parasite"];

console.log("My updated movie list:");
for (let i = 0; i < movies.length; i++) {
    console.log(movies[i]); // This will print each movie on a new line
}
```

**Why is this better?**  
Imagine if you had 100 movies. With an array and a loop, your code to print them all is still just these 4 lines. Without them, you'd have 100 `console.log()` statements!

* * *

## Assignment

Try solving the following small problems to practice what you’ve learned about arrays.

### Create an Array

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

Example structure:

```javascript
const movies = ["Movie1", "Movie2", "Movie3", "Movie4", "Movie5"];
```

### Print the First and Last Element

Print the **first movie** and the **last movie** from the array.

Hint:

*   First element → index `0`
    
*   Last element → `length - 1`
    

### Update One Value

Change one movie name in the array and print the **updated array**.

Example idea:

```javascript
movies[2] = "New Movie Name";
```

### Loop Through the Array

Use a **for loop** to print all the movie names in the array.

Example structure:

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

## Conclusion

Arrays are a powerful way to store and manage multiple values in a single variable. They help keep our code cleaner and make it easier to work with collections of data.

In this article, we learned how to create arrays, access elements using indexes, update values, use the `.length` property, and loop through arrays.

Arrays are used everywhere in JavaScript, so understanding them is an important step toward writing better programs.

Happy Coding 💻

* * *

### Reference:

*   MDN Web Docs