# JavaScript Arrays: Store Multiple Values in One Place

Arrays let you keep a list of values—like fruits, marks, or tasks—in order and work with them easily. This guide covers what arrays are, how to create and use them, and how to loop over them.

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

Imagine you need to store the names of fruits you want to buy. Without arrays, you might do this:

```javascript
const fruit1 = "Apple";
const fruit2 = "Banana";
const fruit3 = "Mango";
const fruit4 = "Orange";
// ... and so on
```

Problems with this approach:

\- Too many variables to manage

\- Hard to "go through" all values (e.g. print or process each one)

\- Adding or removing items is messy

**An array is a single variable that holds a collection of values in order.** Same example with an array:

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

One variable, multiple values, in a fixed order. You can add more items, loop over them, and access any value by its position. That’s why we need arrays.

## **How to Create an Array**

You can create an array in two common ways.

**1\. Square brackets** `[]` **(array literal) — most common**

```javascript
const fruits = ["Apple", "Banana", "Mango"];
const marks = [85, 92, 78, 88];
const tasks = ["Read", "Code", "Exercise"];
```

**2\. Using the** `Array` **constructor**

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

For everyday use, prefer the square bracket syntax: it’s short and clear.

Arrays can hold any mix of types (numbers, strings, booleans, etc.):

```javascript
const mixed = [1, "hello", true, 42, "world"];
```

## **Accessing Elements Using Index**

Each slot in an array has a position number called an **index**. In JavaScript, **indexing starts from 0**.

\- First element → index **0**

\- Second element → index **1**

\- Third element → index **2**

\- and so on.

**Visual: array index and values**

```plaintext
Index:    0        1        2        3        4
            ┌────────┬────────┬────────┬────────┬────────┐
   Value:   │ "Apple"│"Banana"│ "Mango"│"Orange"│ "Grape"│
            └────────┴────────┴────────┴────────┴────────┘
```

You access an element by putting the index in square brackets:

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

console.log(fruits[0]);   // "Apple"  (first)
console.log(fruits[1]);   // "Banana" (second)
console.log(fruits[4]);   // "Grape"  (last in this array)
```

Accessing an index that doesn’t exist returns `undefined`:

```javascript
console.log(fruits[10]);  // undefined
```

## **Updating Elements**

You can change a value at any index by assigning to that index:

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

fruits[1] = "Berry";   // change index 1
console.log(fruits);   // ["Apple", "Berry", "Mango"]
```

You’re not adding a new slot; you’re replacing the value at that position.

## **Array Length Property**

Every array has a `length` property: the number of elements in it.

```javascript
const fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.length);   // 4
```

**Why it’s useful:**

\- To get the **last element** without knowing the size: use `length - 1` (because index starts at 0).

```javascript
const lastIndex = fruits.length - 1;
console.log(fruits[lastIndex]);   // "Orange"
```

**Memory-style idea:** think of the array as a row of boxes; `length` is how many boxes you have.

```plaintext
 Array:  [ "Apple" ] [ "Banana" ] [ "Mango" ] [ "Orange" ]
  Index:      0            1           2           3
  Length = 4  ← number of boxes
```

## **Basic Looping Over Arrays**

To do something with every element, loop through the array. The most straightforward way is a `for` **loop** using the index and `length`.

**Print each element:**

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

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

\- `i` starts at 0 (first index)

\- Loop runs while `i < fruits.length`

\- Each time we use `fruits[i]` to get the current element

## **Sum of numbers in an array:**

```javascript
const marks = [85, 92, 78];
let total = 0;

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

This article stays with this basic loop; advanced methods (like `forEach`, `map`, etc.) can come later.

## **Practice Assignment**

Do this in your browser console or a small script:

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

2\. **Print the first and last element** (use index 0 and `length - 1`).

3\. **Change one value** (e.g. replace the second movie), then print the updated array.

4\. **Loop through the array** and print each movie.

**Starter code:**

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

// 1. First and last
console.log("First:", movies[0]);
console.log("Last:", movies[movies.length - 1]);

// 2. Change one value
movies[1] = "NewFavoriteMovie";
console.log("Updated array:", movies);

// 3. Loop and print all
for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}
```

Replace the movie names with your own and run it.

## **Summary**

```plaintext
| Concept | Takeaway |
|--------|----------|
| **What** | Array = ordered collection of values in one variable |
| **Create** | `const arr = [value1, value2, ...];` |
| **Access** | `arr[index]` — index starts at 0 |
| **Update** | `arr[index] = newValue;` |
| **Length** | `arr.length` — use `arr[arr.length - 1]` for last element |
| **Loop** | `for (let i = 0; i < arr.length; i++) { ... arr[i] ... }` |
```

*Happy coding!*