JavaScript Arrays 101

Imagine you are planning a trip and need to write down a checklist of items to pack. You wouldn't write each item on a separate, loose scrap of paper and scatter them across your desk. You would write them all down on a single, neat piece of paper—a list.
In programming, we constantly deal with lists of data: a list of user names, a collection of exam marks, or a queue of tasks. Storing these individually in separate variables would look like this:

let item1 = "Passport";
let item2 = "Camera";
let item3 = "Charger";

This quickly becomes a nightmare to manage. What if you have 50 items? You would need 50 variables!

That is why we need Arrays. An array is a single variable that holds a collection of values stored in a specific order. It’s your digital packing list.

1. How to Create an Array

Creating an array in JavaScript is incredibly straightforward. We wrap our list of items inside square brackets [] and separate each item with a comma.

// Creating an array of packing items
let packingList = ["Passport", "Camera", "Charger", "Sunglasses"];

An array can hold any type of data—strings, numbers, or even a mix of both—though it is best practice to keep the items inside an array related to each other.

2. Accessing Elements Using Index (The Zero-Based Rule)

Every item in an array has a specific position, known as its index.

Here is the golden rule of programming: Counting always starts at 0, not 1.

• The first item is at index 0

• The second item is at index 1

• The third item is at index 2

To grab a specific item from your array, type the name of the array followed by the index number inside square brackets.

let packingList = ["Passport", "Camera", "Charger", "Sunglasses"];

console.log(packingList[0]); // Output: "Passport"
console.log(packingList[2]); // Output: "Charger"

3. Updating Array Elements

Arrays are not set in stone; they are mutable, meaning you can alter their contents at any time. If you want to change an item, look up its index and assign a new value to it using the = operator.

let packingList = ["Passport", "Camera", "Charger", "Sunglasses"];

// Let's swap out "Camera" for "Phone"
packingList[1] = "Phone";

console.log(packingList); 
// Output: ["Passport", "Phone", "Charger", "Sunglasses"]

4. The length Property

How do you keep track of how many items are in your array? JavaScript automatically tracks this for you using the .length property.

let packingList = ["Passport", "Phone", "Charger", "Sunglasses"];
console.log(packingList.length); // Output: 4

Pro-Tip: Because indices start at 0, the last item in any array is always located at index length - 1.

5. Basic Looping Over Arrays

The real power of arrays comes alive when you combine them with loops. Instead of manually printing index 0, then 1, then 2, you can write a short for loop to step through the array automatically from start to finish.

let packingList = ["Passport", "Phone", "Charger", "Sunglasses"];

for (let i = 0; i < packingList.length; i++) {
    console.log("Don't forget your: " + packingList[i]);
}

How this runs step-by-step:

1. i starts at 0. The loop prints packingList[0] ("Passport").

2. i becomes 1. The loop prints packingList[1] ("Phone").

3. i becomes 2. The loop prints packingList[2] ("Charger").

4. i becomes 3. The loop prints packingList[3] ("Sunglasses").

5. i becomes 4. Since 4 is not less than packingList.length (which is 4), the loop stops.