JavaScript Arrays & Loops: Working with Lists of Data

Almost everything a program handles comes in lists: scores, messages, products, users. In JavaScript, lists live in arrays, and loops are how you visit each item. Master these two together and most beginner code suddenly makes sense.

Arrays: ordered boxes with numbered slots

const scores = [72, 88, 95, 64, 81];

scores[0];        // 72 — indexes start at 0!
scores[4];        // 81
scores.length;    // 5
scores[scores.length - 1]; // 81 — the classic "last element" trick

Adding and removing from the end:

scores.push(90);  // add to the end → [72, 88, 95, 64, 81, 90]
scores.pop();     // remove from the end → back to 5 items

Note: even though scores is a const, we can still push and pop. const means the variable cannot be reassigned to a different array — the contents may change.

The classic for loop

for (let i = 0; i < scores.length; i++) {
  console.log("Player " + (i + 1) + " scored " + scores[i]);
}

Three parts: start (i = 0), condition (i < scores.length), step (i++). Use this form when you need the index i.

for...of — when you only need the values

for (const s of scores) {
  console.log(s);
}

Shorter, and impossible to get the bounds wrong. This is what the editor code below uses to build the list and add up the total.

map and filter — loops without writing loops

Two array methods you will use daily:

const doubled = scores.map((s) => s * 2);     // [144, 176, 190, 128, 162]
const high = scores.filter((s) => s > 80);    // [88, 95, 81]

• map transforms every element → same length, new values
• filter keeps elements that pass a test → usually fewer

Both return a new array and never touch the original.

What the editor code does

The starter code loops over scores with for...of, creates an <li> per score (the DOM technique from our DOM manipulation tutorial), sums the total as it goes, then prints players, total and average.

Try these challenges:

1. Add a sixth score to the array — watch every stat update.
2. Change the loop to also show the player number ("Player 1: 72") — you will need the classic for loop with i.
3. Change toFixed(1) to toFixed(0). What happens to the average?
4. Bonus: sort the scores before rendering with scores.sort((a, b) => b - a) — highest first.

Press Run after each change to see the result instantly.

Practice exercises

Each exercise extends the scores page in the editor.

Exercise 1 (easy): Use push to add score 100 at the end of the array in code, then find the highest score with Math.max(...scores) and show it in the stats line.

Solution:

scores.push(100);
// in the stats line, add:
" | Best: " + Math.max(...scores);

Exercise 2 (medium): Use filter to count how many players scored above 80, and add "High scorers: N" to the stats.

Solution:

const high = scores.filter((s) => s > 80);
// in the stats line, add:
" | High scorers: " + high.length;

Exercise 3 (challenge): Use map to render grades instead of raw scores: 90+ = "A", 80+ = "B", otherwise "C". Show "Score: 95 (A)" in each list item. (Hint: build the grade inside the loop, or map scores to strings first.)

Solution:

for (const s of scores) {
  const grade = s >= 90 ? "A" : s >= 80 ? "B" : "C";
  const li = document.createElement("li");
  li.textContent = "Score: " + s + " (" + grade + ")";
  list.appendChild(li);
  total = total + s;
}