Arrays and Iteration

For-Of Iteration

Visit each element of an array with for-of.

for-of A `for...of` loop reads each element in turn without needing an index. Here it accumulates a running total.

For-Of Iteration

factor
for_of.js
Replay: real traced execution (multi-file project)
const factor = 2;
const nums = [1, 2, 3];
let total = 0;
for (const n of nums) {
  total += n * factor;
}

console.log("factor=" + factor);
console.log("total=" + total);

const factor = 3;
const nums = [1, 2, 3];
let total = 0;
for (const n of nums) {
  total += n * factor;
}

console.log("factor=" + factor);
console.log("total=" + total);

const factor = 5;
const nums = [1, 2, 3];
let total = 0;
for (const n of nums) {
  total += n * factor;
}

console.log("factor=" + factor);
console.log("total=" + total);

  1. factor ← 2

    1const factor→ 2 = 2; //@factor=3, 52const nums = [1, 2, 3];

  2. nums ← 1,2,3

    1const factor = 2; //@factor=3, 52const nums→ 1,2,3 = [1, 2, 3];3let total = 0;

  3. total ← 0

    1const factor = 2; //@factor=3, 52const nums = [1, 2, 3];3let total→ 0 = 0;4for (const n of nums) {

  4. total ← 2, n ← 1

    3let total = 0;4for (const n of nums) {5  total += n→ 1 * factor2;6}
    values this step2total

  5. total ← 6, n ← 2

    3let total = 0;4for (const n of nums) {5  total += n→ 2 * factor2;6}
    values this step6total

  6. total ← 12, n ← 3

    3let total = 0;4for (const n of nums) {5  total += n→ 3 * factor2;6}
    values this step12total

  7. console.log("factor=" + factor);

    5  total += n * factor;6}78console.log("factor=" + factor2);9console.log("total=" + total);
    outputfactor=2

  8. console.log("total=" + total);

    8console.log("factor=" + factor);9console.log("total=" + total12);
    outputtotal=12

  1. factor ← 3

    1const factor→ 3 = 3;2const nums = [1, 2, 3];

  2. nums ← 1,2,3

    1const factor = 3;2const nums→ 1,2,3 = [1, 2, 3];3let total = 0;

  3. total ← 0

    1const factor = 3;2const nums = [1, 2, 3];3let total→ 0 = 0;4for (const n of nums) {

  4. total ← 3, n ← 1

    3let total = 0;4for (const n of nums) {5  total += n→ 1 * factor3;6}
    values this step3total

  5. total ← 9, n ← 2

    3let total = 0;4for (const n of nums) {5  total += n→ 2 * factor3;6}
    values this step9total

  6. total ← 18, n ← 3

    3let total = 0;4for (const n of nums) {5  total += n→ 3 * factor3;6}
    values this step18total

  7. console.log("factor=" + factor);

    5  total += n * factor;6}78console.log("factor=" + factor3);9console.log("total=" + total);
    outputfactor=3

  8. console.log("total=" + total);

    8console.log("factor=" + factor);9console.log("total=" + total18);
    outputtotal=18

  1. factor ← 5

    1const factor→ 5 = 5;2const nums = [1, 2, 3];

  2. nums ← 1,2,3

    1const factor = 5;2const nums→ 1,2,3 = [1, 2, 3];3let total = 0;

  3. total ← 0

    1const factor = 5;2const nums = [1, 2, 3];3let total→ 0 = 0;4for (const n of nums) {

  4. total ← 5, n ← 1

    3let total = 0;4for (const n of nums) {5  total += n→ 1 * factor5;6}
    values this step5total

  5. total ← 15, n ← 2

    3let total = 0;4for (const n of nums) {5  total += n→ 2 * factor5;6}
    values this step15total

  6. total ← 30, n ← 3

    3let total = 0;4for (const n of nums) {5  total += n→ 3 * factor5;6}
    values this step30total

  7. console.log("factor=" + factor);

    5  total += n * factor;6}78console.log("factor=" + factor5);9console.log("total=" + total);
    outputfactor=5

  8. console.log("total=" + total);

    8console.log("factor=" + factor);9console.log("total=" + total30);
    outputtotal=30

Follow the Loop

  1. factor starts as 2.
  2. nums is [1, 2, 3].
  3. The loop visits each number once.
  4. Each pass adds number * factor to total.
  5. The script prints factor=2 and total=12. | number | added | running total | | --- | --- | --- | | 1 | 2 | 2 | | 2 | 4 | 6 | | 3 | 6 | 12 |

Exercise: for_of.js

Reproduce factor=2 and total=12, then use the pinned factor variants 3 and 5 to predict totals 18 and 30.