JavaScript Arrays

An array is a single variable that holds an ordered list of values. A class has 40 students — you could make 40 variables, or one array called students that holds all 40 names. Think of a train: each coach has a number, and the coaches sit in order. In an array, each value sits in a numbered seat called an index, and the first seat is number 0.

Diagram — see how it fits together

Arrays are the workhorse of JavaScript. Menus, student lists, exam marks, cricket scores, photo galleries — any time you have more than one of something, an array is probably the right box for it.

Creating and reading an array

You create an array with square brackets, values separated by commas. You read one value by its index in square brackets.

let students = ["Rahul", "Priya", "Amit", "Sana"];
students[0];  // "Rahul" — the first seat is 0
students[2];  // "Amit"
students.length;  // 4 — the number of values

The length property tells you how many values the array holds. The last value is always at index length - 1 — for 4 students, the last one sits at index 3.

Adding and removing values

Four methods do almost all the adding and removing you will ever need. push() adds to the end, pop() removes from the end, unshift() adds to the start, and shift() removes from the start.

let queue = ["Rahul", "Priya"];
queue.push("Amit");    // ["Rahul", "Priya", "Amit"]
queue.pop();           // removes "Amit", returns it
queue.unshift("Sana"); // ["Sana", "Rahul", "Priya"]
queue.shift();         // removes "Sana", returns it

Notice that pop() and shift() return the value they removed. That is handy: you can take the next student from a queue and use their name in the same line.

Changing a value and looping

You change a value by assigning to its index: students[1] = "Priya Sharma". And you visit every value with a for loop — the loop counter walks from 0 to length - 1. You will learn loops properly in the next lessons, but here is the pattern you will use a hundred times:

for (let i = 0; i < students.length; i++) {
  console.log(students[i]);
}

Common mistakes

• Starting to count from 1 — the first element is at index 0, not 1.
• Reading past the end — students[4] in a 4-item array is undefined, not an error, so it fails silently.
• Using <= length in a loop — one step too far, one undefined at the end.
• Forgetting that push() returns the new length, not the array — let x = queue.push("Amit") makes x a number.

Remember

• An array is an ordered list in square brackets: ["Rahul", "Priya", "Amit"].
• Indexing starts at 0; the last value is at length - 1.
• push() / pop() work at the end; unshift() / shift() work at the start.
• Array.isArray() is the real test for "is this an array?"
• Arrays count from zero — the first student sits in seat number 0.

Example explained

• let students = ["Rahul", "Priya", "Amit"]; — one array holding three names, in order. Rahul sits at index 0.
• students.push("Sana") — adds Sana to the end of the list, so the array grows to 4 names.
• students.pop() — removes the last name from the list and returns it, so the page can say who was removed.
• students.length — after each change, the page shows the new count, so the visitor sees the list grow and shrink.
• document.getElementById("list").innerHTML = ... — rebuilds the visible list from the array, so the page always matches the data.