Protected members are available inside a class and its subclasses, but not to outside callers.

protected `protected` marks a member that subclasses can use while ordinary callers cannot.

Protected Members

rate
protected.ts
Replay: real traced execution (multi-file project)
class Account {
    protected cents: number;

    constructor(cents: number) {
        this.cents = cents;
    }
}

class SavingsAccount extends Account {
    addInterest(rate: number): void {
        const interest: number = this.cents * rate;
        this.cents = this.cents + interest;
    }

    balance(): number {
        return this.cents;
    }
}

const rate: number = 0.10;
const account: SavingsAccount = new SavingsAccount(1000);
account.addInterest(rate);

console.log(`balance=${account.balance()}`);
class Account {
    protected cents: number;

    constructor(cents: number) {
        this.cents = cents;
    }
}

class SavingsAccount extends Account {
    addInterest(rate: number): void {
        const interest: number = this.cents * rate;
        this.cents = this.cents + interest;
    }

    balance(): number {
        return this.cents;
    }
}

const rate: number = 0.05;
const account: SavingsAccount = new SavingsAccount(1000);
account.addInterest(rate);

console.log(`balance=${account.balance()}`);
class Account {
    protected cents: number;

    constructor(cents: number) {
        this.cents = cents;
    }
}

class SavingsAccount extends Account {
    addInterest(rate: number): void {
        const interest: number = this.cents * rate;
        this.cents = this.cents + interest;
    }

    balance(): number {
        return this.cents;
    }
}

const rate: number = 0.20;
const account: SavingsAccount = new SavingsAccount(1000);
account.addInterest(rate);

console.log(`balance=${account.balance()}`);
  1. rate ← 0.1, this.cents ← 1000, account ← [object Object]

    4    constructor(cents: number) {5        this.cents = cents1000;6    }7}89class SavingsAccount extends Account {10    addInterest(rate: number): void {11        const interest: number = this.cents * rate;12        this.cents = this.cents + interest;13    }1415    balance(): number {16        return this.cents;17    }18}1920const rate→ 0.1: number = 0.10;  //@rate=0.05, 0.2021const account→ [object Object]: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate0.1);
    values this step1000this.cents
  2. interest ← 100, this.cents ← 1000

    9class SavingsAccount extends Account {10    addInterest(rate0.1: number): void {11        const interest→ 100: number = this.cents→ 1000 * rate0.1;12        this.cents = this.cents→ 1100 + interest100;13    }
  3. const account: SavingsAccount = new SavingsAccount(1000);

    20const rate: number = 0.10;  //@rate=0.05, 0.2021const account: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate0.1);2324console.log(`balance=${account[object Object].balance()}`);
  4. balance(): number

    12    this.cents = this.cents + interest;13}1415balance(): number {16    return this.cents1100;17}
  5. console.log(`balance=${account.balance()}`);

    21const account: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate);2324console.log(`balance=${account[object Object].balance()}`);
    outputbalance=1100
  1. rate ← 0.05, this.cents ← 1000, account ← [object Object]

    4    constructor(cents: number) {5        this.cents = cents1000;6    }7}89class SavingsAccount extends Account {10    addInterest(rate: number): void {11        const interest: number = this.cents * rate;12        this.cents = this.cents + interest;13    }1415    balance(): number {16        return this.cents;17    }18}1920const rate→ 0.05: number = 0.05;21const account→ [object Object]: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate0.05);
    values this step1000this.cents
  2. interest ← 50, this.cents ← 1000

    9class SavingsAccount extends Account {10    addInterest(rate0.05: number): void {11        const interest→ 50: number = this.cents→ 1000 * rate0.05;12        this.cents = this.cents→ 1050 + interest50;13    }
  3. const account: SavingsAccount = new SavingsAccount(1000);

    20const rate: number = 0.05;21const account: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate0.05);2324console.log(`balance=${account[object Object].balance()}`);
  4. balance(): number

    12    this.cents = this.cents + interest;13}1415balance(): number {16    return this.cents1050;17}
  5. console.log(`balance=${account.balance()}`);

    21const account: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate);2324console.log(`balance=${account[object Object].balance()}`);
    outputbalance=1050
  1. rate ← 0.2, this.cents ← 1000, account ← [object Object]

    4    constructor(cents: number) {5        this.cents = cents1000;6    }7}89class SavingsAccount extends Account {10    addInterest(rate: number): void {11        const interest: number = this.cents * rate;12        this.cents = this.cents + interest;13    }1415    balance(): number {16        return this.cents;17    }18}1920const rate→ 0.2: number = 0.20;21const account→ [object Object]: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate0.2);
    values this step1000this.cents
  2. interest ← 200, this.cents ← 1000

    9class SavingsAccount extends Account {10    addInterest(rate0.2: number): void {11        const interest→ 200: number = this.cents→ 1000 * rate0.2;12        this.cents = this.cents→ 1200 + interest200;13    }
  3. const account: SavingsAccount = new SavingsAccount(1000);

    20const rate: number = 0.20;21const account: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate0.2);2324console.log(`balance=${account[object Object].balance()}`);
  4. balance(): number

    12    this.cents = this.cents + interest;13}1415balance(): number {16    return this.cents1200;17}
  5. console.log(`balance=${account.balance()}`);

    21const account: SavingsAccount = new SavingsAccount(1000);22account.addInterest(rate);2324console.log(`balance=${account[object Object].balance()}`);
    outputbalance=1200

Follow the Protected Value

  1. The account starts with 1000 cents.
  2. rate starts as 0.10.
  3. SavingsAccount.addInterest can read protected cents.
  4. Interest is 1000 * 0.10, which is 100.
  5. The balance becomes 1100, so the output is balance=1100. | rate | interest | balance | | --- | --- | --- | | 0.10 | 100 | 1100 | | 0.05 | 50 | 1050 | | 0.20 | 200 | 1200 |

Exercise: protected.ts

Reproduce balance=1100, then use the pinned rate variants 0.05 and 0.20 to predict balance=1050 and balance=1200.