Iterables and Generators

For Of Iterables

for...of reads values from arrays, strings, maps, sets, and other iterable objects.

for of `for...of` asks an iterable for each next value and runs the loop body once per value.

For Of Iterables

count
forof.ts
Replay: real traced execution (multi-file project)
const count: number = 3;
const values: number[] = [1, 2, 3, 4];
let total: number = 0;

for (const value of values.slice(0, count)) {
    total = total + value;
    console.log(`step=${total}`);
}

console.log(`total=${total}`);

const count: number = 2;
const values: number[] = [1, 2, 3, 4];
let total: number = 0;

for (const value of values.slice(0, count)) {
    total = total + value;
    console.log(`step=${total}`);
}

console.log(`total=${total}`);

const count: number = 4;
const values: number[] = [1, 2, 3, 4];
let total: number = 0;

for (const value of values.slice(0, count)) {
    total = total + value;
    console.log(`step=${total}`);
}

console.log(`total=${total}`);

  1. count ← 3

    1const count→ 3: number = 3;  //@count=2, 42const values: number[] = [1, 2, 3, 4];

  2. values ← 1,2,3,4

    1const count: number = 3;  //@count=2, 42const values→ 1,2,3,4: number[] = [1, 2, 3, 4];3let total: number = 0;

  3. total ← 0

    1const count: number = 3;  //@count=2, 42const values: number[] = [1, 2, 3, 4];3let total→ 0: number = 0;

  4. total ← 1

    5for (const value of values.slice(0, count)) {6    total = total→ 1 + value1;7    console.log(`step=${total}`);

  5. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total1}`);8}
    outputstep=1

  6. total ← 3

    5for (const value of values.slice(0, count)) {6    total = total→ 3 + value2;7    console.log(`step=${total}`);

  7. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total3}`);8}
    outputstep=3

  8. total ← 6

    5for (const value of values.slice(0, count)) {6    total = total→ 6 + value3;7    console.log(`step=${total}`);

  9. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total6}`);8}
    outputstep=6

  10. console.log(`total=${total}`);

    7    console.log(`step=${total}`);8}910console.log(`total=${total6}`);
    outputtotal=6

  1. count ← 2

    1const count→ 2: number = 2;2const values: number[] = [1, 2, 3, 4];

  2. values ← 1,2,3,4

    1const count: number = 2;2const values→ 1,2,3,4: number[] = [1, 2, 3, 4];3let total: number = 0;

  3. total ← 0

    1const count: number = 2;2const values: number[] = [1, 2, 3, 4];3let total→ 0: number = 0;

  4. total ← 1

    5for (const value of values.slice(0, count)) {6    total = total→ 1 + value1;7    console.log(`step=${total}`);

  5. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total1}`);8}
    outputstep=1

  6. total ← 3

    5for (const value of values.slice(0, count)) {6    total = total→ 3 + value2;7    console.log(`step=${total}`);

  7. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total3}`);8}
    outputstep=3

  8. console.log(`total=${total}`);

    7    console.log(`step=${total}`);8}910console.log(`total=${total3}`);
    outputtotal=3

  1. count ← 4

    1const count→ 4: number = 4;2const values: number[] = [1, 2, 3, 4];

  2. values ← 1,2,3,4

    1const count: number = 4;2const values→ 1,2,3,4: number[] = [1, 2, 3, 4];3let total: number = 0;

  3. total ← 0

    1const count: number = 4;2const values: number[] = [1, 2, 3, 4];3let total→ 0: number = 0;

  4. total ← 1

    5for (const value of values.slice(0, count)) {6    total = total→ 1 + value1;7    console.log(`step=${total}`);

  5. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total1}`);8}
    outputstep=1

  6. total ← 3

    5for (const value of values.slice(0, count)) {6    total = total→ 3 + value2;7    console.log(`step=${total}`);

  7. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total3}`);8}
    outputstep=3

  8. total ← 6

    5for (const value of values.slice(0, count)) {6    total = total→ 6 + value3;7    console.log(`step=${total}`);

  9. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total6}`);8}
    outputstep=6

  10. total ← 10

    5for (const value of values.slice(0, count)) {6    total = total→ 10 + value4;7    console.log(`step=${total}`);

  11. console.log(`step=${total}`);

    5for (const value of values.slice(0, count)) {6    total = total + value;7    console.log(`step=${total10}`);8}
    outputstep=10

  12. console.log(`total=${total}`);

    7    console.log(`step=${total}`);8}910console.log(`total=${total10}`);
    outputtotal=10