JavaScript Arrays 101

Imagine you are a teacher recording the exam scores for five students. Without a specialized way to group them, you would have to create five separate variables:

let score1 = 85;

let score2 = 92;

let score3 = 78;

let score4 = 95;

let score5 = 88;

Now, imagine you have 100 students. Managing 100 different variable names would be a nightmare. This is exactly why we need Arrays.

What are Arrays and Why Do We Need Them?

An Array is a special variable that can hold more than one value at a time. Think of it as a single, labeled box with multiple compartments inside. Instead of having dozens of individual boxes scattered around your room, you have one organized chest where everything is stored in a specific order.

In programming, we use arrays to store collections of data—like a list of fruits, a set of high scores, or a sequence of daily tasks—under a single name. This makes our code cleaner, more efficient, and much easier to scale.

How to Create an Array

Creating an array in JavaScript is straightforward. You use square brackets [] and separate your values with commas.

JavaScript

// A list of fruits
let fruits = ["Apple", "Banana", "Cherry"];

// A list of test marks
let marks = [85, 92, 78, 95];

Accessing Elements Using Index

The most important rule of arrays is that indexing starts at 0. The first item is not at position 1; it is at position 0.

Think of it like floors in some buildings: the "ground floor" is 0, and you go up from there. To get a specific value, you use the array name followed by the index in square brackets.

JavaScript

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana
console.log(fruits[2]); // Output: Cherry

Updating Elements

Arrays are "mutable," meaning you can change their contents after they are created. To update a value, simply target its index and assign a new value to it.

JavaScript

let tasks = ["Clean room", "Buy milk", "Study JS"];

// Changed your mind? Let's update the second task.
tasks[1] = "Go for a run";

console.log(tasks); // Output: ["Clean room", "Go for a run", "Study JS"]

The Array Length Property

How do you know how many items are in your list? JavaScript provides a built-in property called .length. This is incredibly useful when you don't know exactly how much data is being stored.

JavaScript

let marks = [85, 92, 78, 95];

console.log(marks.length); // Output: 4

Note: The length is always one higher than the highest index. In the example above, the length is 4, but the last index is 3.

Basic Looping Over Arrays

The real power of arrays shines when you use a loop to process every item automatically. Instead of writing console.log for every single fruit, you can use a for loop to do it in three lines of code.

JavaScript

let fruits = ["Apple", "Banana", "Cherry", "Mango"];

for (let i = 0; i < fruits.length; i++) {
  console.log("I want to eat a " + fruits[i]);
}

In this loop, i starts at 0 and goes up to (but not including) the length of the array, hitting every index perfectly.

Arrays are the foundation of data handling in JavaScript. By grouping related values together, you move from writing "manual" code to writing "smart" code that can handle any amount of information.