JavaScript Arrays: Storing Multiple Values the Smart Way

Imagine you are building a to-do app. You need to store five tasks. Without arrays, your code looks like this:

let task1 = "Buy groceries";
let task2 = "Call the bank";
let task3 = "Finish homework";
let task4 = "Go for a walk";
let task5 = "Read a book";

This works for five tasks. But what about fifty? Or five hundred? You would need hundreds of variables, and you could not loop over them, sort them, or manage them in any sensible way.

Arrays solve this problem entirely. An array lets you store a collection of values in a single variable, in a specific order.

let tasks = [
  "Buy groceries",
  "Call the bank",
  "Finish homework",
  "Go for a walk",
  "Read a book",
];

Same five tasks. One variable. Easy to manage.

---

What is an Array?

An array is an ordered list of values. Each value in the list is called an element. The position of each element is called its index.

Think of an array like a row of labeled boxes in a post office. Each box is numbered starting from 0, and each box holds one item.

┌─────────────────────────────────────────────────────────────┐
│                     tasks (array)                           │
├─────────────┬─────────────┬─────────────┬─────────────┬─────┤
│ "Buy        │ "Call the   │ "Finish     │ "Go for a   │"Read│
│ groceries"  │  bank"      │  homework"  │  walk"      │..." │
├─────────────┼─────────────┼─────────────┼─────────────┼─────┤
│   index 0   │   index 1   │   index 2   │   index 3   │  4  │
└─────────────┴─────────────┴─────────────┴─────────────┴─────┘

Two things to remember from this:

• Indexing starts at 0, not 1. The first element is always at index 0.

• The last element is always at index array.length - 1.

---

Creating an Array

There are two ways to create an array in JavaScript. The first, and most common, is using square bracket syntax:

// An array of strings
let fruits = ["apple", "banana", "mango", "orange", "grape"];

// An array of numbers
let marks = [88, 92, 75, 96, 61];

// An array of booleans
let switches = [true, false, true, true, false];

// An empty array — you can fill it later
let cart = [];

// Arrays can hold mixed types (though this is uncommon in practice)
let mixed = ["Arjun", 21, true, null];

The second way uses the Array constructor, but you will rarely see this in modern code:

// Constructor syntax — less common
let colors = new Array("red", "green", "blue");
console.log(colors); // ["red", "green", "blue"]

Stick with the square bracket syntax. It is shorter, cleaner, and the standard in modern JavaScript.

---

Accessing Elements by Index

To read a value from an array, you use the array name followed by the index inside square brackets.

let fruits = ["apple", "banana", "mango", "orange", "grape"];

// Accessing individual elements
console.log(fruits[0]); // "apple"   — first element
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "mango"
console.log(fruits[3]); // "orange"
console.log(fruits[4]); // "grape"   — last element

// Accessing an index that does not exist returns undefined
console.log(fruits[5]); // undefined
console.log(fruits[99]); // undefined

Since index starts at 0, the last element is always at fruits.length - 1. This is such a common pattern it is worth memorizing:

let fruits = ["apple", "banana", "mango", "orange", "grape"];

// Getting the last element reliably, no matter the array size
let lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // "grape"

// Getting the first element
let firstFruit = fruits[0];
console.log(firstFruit); // "apple"

---

Visualizing Index and Values

Here is how the fruits array looks in memory — each element occupies a numbered slot, starting from 0:

Array: fruits
 ┌───────┬──────────┬─────────┬──────────┬──────────┬─────────┐
 │ Index │    0     │    1    │    2     │    3     │    4    │
 ├───────┼──────────┼─────────┼──────────┼──────────┼─────────┤
 │ Value │ "apple"  │"banana" │ "mango"  │ "orange" │ "grape" │
 └───────┴──────────┴─────────┴──────────┴──────────┴─────────┘
           ↑                                           ↑
       fruits[0]                                  fruits[4]
      (first item)                               (last item)
                           fruits.length = 5
                       last index = 5 - 1 = 4

---

Updating Elements

Updating an element is as simple as accessing it by index and assigning a new value.

let fruits = ["apple", "banana", "mango", "orange", "grape"];

console.log(fruits[1]); // "banana"

// Update the element at index 1
fruits[1] = "blueberry";

console.log(fruits[1]); // "blueberry"
console.log(fruits);    // ["apple", "blueberry", "mango", "orange", "grape"]

You can update any element at any valid index the same way:

let marks = [88, 92, 75, 96, 61];

console.log("Before:", marks); // [88, 92, 75, 96, 61]

// Update the third mark (index 2)
marks[2] = 85;

console.log("After:", marks); // [88, 92, 85, 96, 61]

You can even assign to an index beyond the current length, though this leaves gaps of undefined and is rarely useful:

let arr = [1, 2, 3];
arr[5] = 99;
console.log(arr); // [1, 2, 3, undefined, undefined, 99]

---

The length Property

Every array has a built-in length property that tells you how many elements it contains.

let fruits = ["apple", "banana", "mango", "orange", "grape"];
console.log(fruits.length); // 5

let emptyArray = [];
console.log(emptyArray.length); // 0

let singleItem = ["only one"];
console.log(singleItem.length); // 1

length always reflects the current number of elements. If you add or remove items, it updates automatically.

let tasks = ["Task A", "Task B", "Task C"];
console.log(tasks.length); // 3

tasks[3] = "Task D"; // adding a fourth item
console.log(tasks.length); // 4

// Using length to get the last element — works regardless of array size
let lastTask = tasks[tasks.length - 1];
console.log(lastTask); // "Task D"

---

Looping Over Arrays

The real power of arrays shows up when you combine them with loops. Instead of accessing each element one by one, you iterate over the whole array automatically.

Using a for loop

The classic approach. The loop variable i goes from 0 to array.length - 1, covering every index.

let fruits = ["apple", "banana", "mango", "orange", "grape"];

for (let i = 0; i < fruits.length; i++) {
  console.log("Index", i, ":", fruits[i]);
}

// Output:
// Index 0 : apple
// Index 1 : banana
// Index 2 : mango
// Index 3 : orange
// Index 4 : grape

Using a for...of loop

When you only need the values and do not care about the index, for...of is cleaner:

let fruits = ["apple", "banana", "mango", "orange", "grape"];

for (let fruit of fruits) {
  console.log(fruit);
}

// Output:
// apple
// banana
// mango
// orange
// grape

Practical loop example — summing an array of numbers

let marks = [88, 92, 75, 96, 61];
let total = 0;

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

let average = total / marks.length;

console.log("Total marks:", total);     // 412
console.log("Number of subjects:", marks.length); // 5
console.log("Average:", average);       // 82.4

Practical loop example — building a sentence from an array

let tasks = ["Buy groceries", "Call the bank", "Finish homework"];

console.log("Your tasks for today:");
for (let i = 0; i < tasks.length; i++) {
  console.log((i + 1) + ". " + tasks[i]);
}

// Output:
// Your tasks for today:
// 1. Buy groceries
// 2. Call the bank
// 3. Finish homework

---

Memory Block Diagram

This is how JavaScript stores an array in memory internally. Each element occupies a contiguous slot, and the index maps directly to that slot:

 Variable        Memory Slots
 ─────────       ──────────────────────────────────────────────
                 ┌──────────┐
 marks ──────►  │    88    │  ◄── index 0  (marks[0])
                ├──────────┤
                │    92    │  ◄── index 1  (marks[1])
                ├──────────┤
                │    75    │  ◄── index 2  (marks[2])
                ├──────────┤
                │    96    │  ◄── index 3  (marks[3])
                ├──────────┤
                │    61    │  ◄── index 4  (marks[4])
                └──────────┘

 marks.length = 5
 First element: marks[0] = 88
 Last element:  marks[marks.length - 1] = marks[4] = 61

Compare this to storing values individually — with individual variables there is no connection between them, no way to loop, no way to know how many there are:

 Without array:         With array:
 ────────────────       ──────────────────────────────
 mark1 ──► 88           marks ──► [88, 92, 75, 96, 61]
 mark2 ──► 92                      ↑  ↑  ↑   ↑   ↑
 mark3 ──► 75                      0  1  2   3   4
 mark4 ──► 96
 mark5 ──► 61           Loop with: for (let i = 0; ...)
 No loop possible.      Length:    marks.length → 5

---

Assignment: Try It Yourself

Open your browser console or playcode.io and work through these steps.

Step 1: Create an array of 5 favorite movies

let movies = [
  "Interstellar",
  "The Dark Knight",
  "Inception",
  "3 Idiots",
  "Taare Zameen Par",
];

Step 2: Print the first and last element

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

// Output:
// First movie: Interstellar
// Last movie: Taare Zameen Par

Step 3: Update one element and print the updated array

// Change the movie at index 2
movies[2] = "Dune";

console.log("Updated movies:", movies);

// Output:
// Updated movies: ["Interstellar", "The Dark Knight", "Dune", "3 Idiots", "Taare Zameen Par"]

Step 4: Loop through the array and print all elements

console.log("All my favorite movies:");
for (let i = 0; i < movies.length; i++) {
  console.log((i + 1) + ". " + movies[i]);
}

// Output:
// All my favorite movies:
// 1. Interstellar
// 2. The Dark Knight
// 3. Dune
// 4. 3 Idiots
// 5. Taare Zameen Par

---

Quick Recap

• An array is an ordered collection of values stored in a single variable

• Arrays are created with square brackets: let arr = [1, 2, 3]

• Indexing starts at 0 — the first element is arr[0], not arr[1]

• The last element is always at arr[arr.length - 1]

• You can update any element by assigning to its index: arr[2] = "new value"

• The length property always reflects the current number of elements

• Use a for loop or for...of loop to iterate over every element