Classes

Class Basics

Classes group data and behavior so related code can move together.

class A class is a blueprint for objects that share properties and methods.

Class Basics

increments
basics.ts
Replay: real traced execution (multi-file project)
class Counter {
    value: number = 0;

    increment(): void {
        this.value = this.value + 1;
    }
}

const increments: number = 2;
const counter: Counter = new Counter();

for (let i = 0; i < increments; i++) {
    counter.increment();
}

console.log(`value=${counter.value}`);

class Counter {
    value: number = 0;

    increment(): void {
        this.value = this.value + 1;
    }
}

const increments: number = 1;
const counter: Counter = new Counter();

for (let i = 0; i < increments; i++) {
    counter.increment();
}

console.log(`value=${counter.value}`);

class Counter {
    value: number = 0;

    increment(): void {
        this.value = this.value + 1;
    }
}

const increments: number = 4;
const counter: Counter = new Counter();

for (let i = 0; i < increments; i++) {
    counter.increment();
}

console.log(`value=${counter.value}`);

  1. increments ← 2, counter ← [object Object]

    6    }7}89const increments→ 2: number = 2;  //@increments=1, 410const counter→ [object Object]: Counter = new Counter();

  2. for (let i = 0; i < increments; i++)

    pass 1 of 2
    9const increments: number = 2;  //@increments=1, 410const counter: Counter = new Counter();1112for (let i0 = 0; i < increments2; i++) {13    counter.increment();14}
    values this step[object Object]counter

  3. this.value ← 1

    pass 1 of 2
    1class Counter {2    value: number = 0;34    increment(): void {5        this.value = this.value→ 1 + 1;6    }

  4. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

  5. for (let i = 0; i < increments; i++)

    pass 2 of 2
    9const increments: number = 2;  //@increments=1, 410const counter: Counter = new Counter();1112for (let i1 = 0; i < increments2; i++) {13    counter.increment();14}
    values this step[object Object]counter

  6. this.value ← 2

    pass 2 of 2
    1class Counter {2    value: number = 0;34    increment(): void {5        this.value = this.value→ 2 + 1;6    }

  7. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

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

    13    counter.increment();14}1516console.log(`value=${counter.value2}`);
    outputvalue=2

  1. increments ← 1, counter ← [object Object]

    6    }7}89const increments→ 1: number = 1;10const counter→ [object Object]: Counter = new Counter();

  2. for (let i = 0; i < increments; i++)

    9const increments: number = 1;10const counter: Counter = new Counter();1112for (let i0 = 0; i < increments1; i++) {13    counter.increment();14}
    values this step[object Object]counter

  3. this.value ← 1

    1class Counter {2    value: number = 0;34    increment(): void {5        this.value = this.value→ 1 + 1;6    }

  4. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

  5. console.log(`value=${counter.value}`);

    13    counter.increment();14}1516console.log(`value=${counter.value1}`);
    outputvalue=1

  1. increments ← 4, counter ← [object Object]

    6    }7}89const increments→ 4: number = 4;10const counter→ [object Object]: Counter = new Counter();

  2. for (let i = 0; i < increments; i++)

    pass 1 of 4
    9const increments: number = 4;10const counter: Counter = new Counter();1112for (let i0 = 0; i < increments4; i++) {13    counter.increment();14}
    All 4 passes — pass 1 is the card above
    passi
    10
    21
    32
    43

  3. this.value ← 1

    pass 1 of 4
    1class Counter {2    value: number = 0;34    increment(): void {5        this.value = this.value→ 1 + 1;6    }
    All 4 passes — pass 1 is the card above
    passthis.value
    11
    22
    33
    44

  4. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

  5. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

  6. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

  7. for (let i = 0; i < increments; i++)

    12for (let i = 0; i < increments; i++) {13    counter.increment();14}
    values this step[object Object]counter

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

    13    counter.increment();14}1516console.log(`value=${counter.value4}`);
    outputvalue=4

Follow the Object

  1. A new counter starts with value 0.
  2. increments starts at 2.
  3. The loop calls increment() twice.
  4. Each call adds 1 to the counter.
  5. The program prints value=2. | increments | calls made | final value | | --- | --- | --- | | 1 | 1 | 1 | | 2 | 2 | 2 | | 4 | 4 | 4 |

Exercise: basics.ts

Reproduce value=2, then use increments 1 and 4 to predict each final value.