Foundations

Control Flow

Use if statements and loops to choose work and repeat work based on values.

branch An `if` statement runs one block when a condition is true and can run another block otherwise.

Control Flow

limit
control.ts
Replay: real traced execution (multi-file project)
const limit: number = 4;
let sum: number = 0;

for (let i = 1; i <= limit; i++) {
    sum += i;
    console.log(`i=${i}, sum=${sum}`);
}

if (sum >= 10) {
    console.log("sum reached double digits");
} else {
    console.log("sum stayed small");
}

const limit: number = 2;
let sum: number = 0;

for (let i = 1; i <= limit; i++) {
    sum += i;
    console.log(`i=${i}, sum=${sum}`);
}

if (sum >= 10) {
    console.log("sum reached double digits");
} else {
    console.log("sum stayed small");
}

const limit: number = 6;
let sum: number = 0;

for (let i = 1; i <= limit; i++) {
    sum += i;
    console.log(`i=${i}, sum=${sum}`);
}

if (sum >= 10) {
    console.log("sum reached double digits");
} else {
    console.log("sum stayed small");
}

  1. limit ← 4, sum ← 0

    1const limit→ 4: number = 4;  //@limit=2, 62let sum→ 0: number = 0;

  2. sum ← 1

    pass 1 of 4
    1const limit: number = 4;  //@limit=2, 62let sum: number = 0;34for (let i1 = 1; i <= limit4; i++) {5    sum += i1;6    console.log(`i=${i1}, sum=${sum1}`);7}
    outputi=1, sum=1
    All 4 passes — pass 1 is the card above
    passisum
    111
    223
    336
    4410

  3. if (sum >= 10)

    6    console.log(`i=${i}, sum=${sum}`);7}89if (sum10 >= 10) {10    console.log("sum reached double digits");11} else {
    outputsum reached double digits

  1. limit ← 2, sum ← 0

    1const limit→ 2: number = 2;2let sum→ 0: number = 0;

  2. sum ← 1

    pass 1 of 2
    1const limit: number = 2;2let sum: number = 0;34for (let i1 = 1; i <= limit2; i++) {5    sum += i1;6    console.log(`i=${i1}, sum=${sum1}`);7}
    outputi=1, sum=1

  3. sum ← 3

    pass 2 of 2
    1const limit: number = 2;2let sum: number = 0;34for (let i2 = 1; i <= limit2; i++) {5    sum += i2;6    console.log(`i=${i2}, sum=${sum3}`);7}
    outputi=2, sum=3

  4. else

    10    console.log("sum reached double digits");11} else {12    console.log("sum stayed small");13}
    outputsum stayed small

  1. limit ← 6, sum ← 0

    1const limit→ 6: number = 6;2let sum→ 0: number = 0;

  2. sum ← 1

    pass 1 of 6
    1const limit: number = 6;2let sum: number = 0;34for (let i1 = 1; i <= limit6; i++) {5    sum += i1;6    console.log(`i=${i1}, sum=${sum1}`);7}
    outputi=1, sum=1
    All 6 passes — pass 1 is the card above
    passisum
    111
    223
    336
    4410
    5515
    6621

  3. if (sum >= 10)

    6    console.log(`i=${i}, sum=${sum}`);7}89if (sum21 >= 10) {10    console.log("sum reached double digits");11} else {
    outputsum reached double digits

Follow the Loop

  1. limit starts at 4.
  2. sum starts at 0.
  3. The loop adds 1, then 2, then 3, then 4.
  4. The running sums are 1, 3, 6, and 10.
  5. Because sum is 10, the final line is sum reached double digits. | i | sum after add | | --- | --- | | 1 | 1 | | 2 | 3 | | 3 | 6 | | 4 | 10 | | limit | final sum | branch output | | --- | --- | --- | | 2 | 3 | sum stayed small | | 4 | 10 | sum reached double digits | | 6 | 21 | sum reached double digits |

Exercise: control.ts

Reproduce the default loop ending at sum 10, then try limit 2 and 6 and predict the final branch line.