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:

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:

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

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

2. Using the Array constructor

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.):

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

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

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

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:

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

Updating Elements

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

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.

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).

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.

 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:

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:

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:

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

| 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!