JavaScript / Arrays

Arrays with loops and for...of

Go through every value of an array with a for loop or for...of, and work out totals, averages and how many values meet a condition. Baccalaureate

To print every value of a long array, we do not write one line per value. We use a for loop and let the counter i be the index: it starts at 0 and stops before length.

JavaScript
let degreeList = [2, 1, 2, 1, 0];
for (let i = 0; i < degreeList.length; i++) {
  console.log(degreeList[i]);
}
Console
2
1
2
1
0
Write i < list.length, not i <= list.length; the last index is length - 1. Using length instead of typing the number keeps the program working however many values there are.

Totals, averages and counting

For a total, start a variable at 0 and add each value to it inside the loop. After the loop, divide the total by length to get the average:

JavaScript
let runLogs = [5, 2, 4, 1, 3, 3];
let total = 0;
for (let i = 0; i < runLogs.length; i++) {
  total = total + runLogs[i];
}
console.log(total);
console.log(total / runLogs.length);
Console
18
3

Put an if inside the loop to check each value. Here we count the scores of 80 or more, and print the count after the loop:

JavaScript
let scoreList = [52, 90, 70, 83, 63, 72, 89];
let count = 0;
for (let i = 0; i < scoreList.length; i++) {
  if (scoreList[i] >= 80) {
    count = count + 1;
  }
}
console.log("80 or more: " + count);
Console
80 or more: 3

The for...of loop

When you only need the values and not their positions, there is a shorter way: for...of takes the array's values one at a time, in order, and puts each in a variable, with no counter and no length.

JavaScript
let degreeList = [8, 6, 11, 10];
for (let degree of degreeList) {
  console.log(degree);
}
Console
8
6
11
10

Example: in a ticket draw, a winning number divides exactly by 7 (remainder 0). Check each ticket and print only the winners:

JavaScript
const numList = [128, 254, 581, 12, 783, 49, 429];
for (const num of numList) {
  if (num % 7 == 0) {
    console.log(num);
  }
}
Console
581
49
In for...of the variable holds the value itself, not its index, so do not write numList[num]. It can be declared with const because it is created fresh each round; the i of a normal for loop must use let because it changes.

Practice

1Fill in the blankCurriculum practice

Fill both blanks with tempList.length instead of typing 14, so the program prints the average temperature.

JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
let tempList = [36.0, 36.5, 37.0, 36.5, 36.0, 37.0, 36.5, 36.5, 37.0, 36.0, 36.5, 37.0, 36.5, 36.0];
let sum = 0;
for (let i = 0; i < ___; i++) {
  sum = sum + tempList[i];
}
console.log(sum / ___);
Console
Press Run to see the result.
2Write the programCurriculum practice

With a for loop that runs once per value of scoreList, print Pass for every score of 80 or more.

JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
let scoreList = [52, 90, 70, 83, 63, 72, 89];
Console
Press Run to see the result.
3Write the programCurriculum practice

Create the array wordList with "apple", "banana" and "orange", then print each value on its own line using for...of and the variable word.

JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
Console
Press Run to see the result.
4Fill in the blankCurriculum practice

Complete the condition so the program prints only the ticket numbers that divide exactly by 7.

HintThe remainder % after dividing by 7 must be 0.
JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
const numList = [128, 254, 458, 547, 125, 305, 581, 12, 783, 429];

for (const num of numList) {
  if (___) {
    console.log(num);
  }
}
Console
Press Run to see the result.
5Edit the programCurriculum practice

This program prints the values with a counter loop. Rewrite it using for...of and the variable num, and make each line read Number 2, then Number 4, and so on.

JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
const numList = [2, 4, 6, 8];
for (let i = 0; i < numList.length; i++) {
  console.log(numList[i]);
}
Console
Press Run to see the result.
6Write the programExtra practice

This is what a student spent from their pocket money over 7 days. Use for...of to add it up, then print Total: 140 and then Average: 20 (average = total ÷ length).

JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
const spent = [15, 20, 10, 25, 30, 20, 20];
Console
Press Run to see the result.
7Write the programExtra practice

An attendance record: "P" is present and "A" is absent. Count the absent days with for...of and print Absent days: 3.

HintStart a counter at 0, increase it inside if, and print it after the loop.
JavaScript Ctrl/⌘ + Enter to run · Esc then Tab to leave the editor
const attendance = ["P", "A", "P", "P", "A", "P", "A", "P"];
Console
Press Run to see the result.

Key points

  • for (let i = 0; i < list.length; i++) with list[i] visits every value by its index.
  • for (const x of list) gives you the values themselves, in order, with no counter.
  • A total starts at 0 and grows inside the loop; the average sum / list.length comes after it.