Functions

Callbacks

A callback is a function passed as a value so another function can call it later.

callback Function types such as `(value: number) => number` describe callbacks.

Callbacks

example
callbacks.ts
Replay: real traced execution (multi-file project)
function applyTwice(value: number, transform: (input: number) => number): number {
    const once: number = transform(value);
    const twice: number = transform(once);
    return twice;
}

const startValue: number = 2;
const step: number = 4;

const addStep = (input: number): number => input + step;
const result: number = applyTwice(startValue, addStep);

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

function applyTwice(value: number, transform: (input: number) => number): number {
    const once: number = transform(value);
    const twice: number = transform(once);
    return twice;
}

const startValue: number = 3;
const step: number = 4;

const addStep = (input: number): number => input + step;
const result: number = applyTwice(startValue, addStep);

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

function applyTwice(value: number, transform: (input: number) => number): number {
    const once: number = transform(value);
    const twice: number = transform(once);
    return twice;
}

const startValue: number = 5;
const step: number = 4;

const addStep = (input: number): number => input + step;
const result: number = applyTwice(startValue, addStep);

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

function applyTwice(value: number, transform: (input: number) => number): number {
    const once: number = transform(value);
    const twice: number = transform(once);
    return twice;
}

const startValue: number = 2;
const step: number = 1;

const addStep = (input: number): number => input + step;
const result: number = applyTwice(startValue, addStep);

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

function applyTwice(value: number, transform: (input: number) => number): number {
    const once: number = transform(value);
    const twice: number = transform(once);
    return twice;
}

const startValue: number = 2;
const step: number = 10;

const addStep = (input: number): number => input + step;
const result: number = applyTwice(startValue, addStep);

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

  1. startValue ← 2, step ← 4, addStep ← (input) => input + step

    4    return twice;5}67const startValue→ 2: number = 2;  //@startValue=3, 58const step→ 4: number = 4;  //@step=1, 10910const addStep→ (input) => input + step = (input: number): number => input + step;11const result: number = applyTwice(startValue2, addStep(input) => input + step);

  2. once ← 6, twice ← 10

    1function applyTwice(value2: number, transform(input) => input + step: (input: number) => number): number {2    const once→ 6: number = transform(value2);3    const twice→ 10: number = transform(once6);4    return twice10;5}

  3. result ← 10

    10const addStep = (input: number): number => input + step;11const result→ 10: number = applyTwice(startValue2, addStep(input) => input + step);1213console.log(`result=${result10}`);
    outputresult=10

  1. startValue ← 3, step ← 4, addStep ← (input) => input + step

    4    return twice;5}67const startValue→ 3: number = 3;8const step→ 4: number = 4;910const addStep→ (input) => input + step = (input: number): number => input + step;11const result: number = applyTwice(startValue3, addStep(input) => input + step);

  2. once ← 7, twice ← 11

    1function applyTwice(value3: number, transform(input) => input + step: (input: number) => number): number {2    const once→ 7: number = transform(value3);3    const twice→ 11: number = transform(once7);4    return twice11;5}

  3. result ← 11

    10const addStep = (input: number): number => input + step;11const result→ 11: number = applyTwice(startValue3, addStep(input) => input + step);1213console.log(`result=${result11}`);
    outputresult=11

  1. startValue ← 5, step ← 4, addStep ← (input) => input + step

    4    return twice;5}67const startValue→ 5: number = 5;8const step→ 4: number = 4;910const addStep→ (input) => input + step = (input: number): number => input + step;11const result: number = applyTwice(startValue5, addStep(input) => input + step);

  2. once ← 9, twice ← 13

    1function applyTwice(value5: number, transform(input) => input + step: (input: number) => number): number {2    const once→ 9: number = transform(value5);3    const twice→ 13: number = transform(once9);4    return twice13;5}

  3. result ← 13

    10const addStep = (input: number): number => input + step;11const result→ 13: number = applyTwice(startValue5, addStep(input) => input + step);1213console.log(`result=${result13}`);
    outputresult=13

  1. startValue ← 2, step ← 1, addStep ← (input) => input + step

    4    return twice;5}67const startValue→ 2: number = 2;8const step→ 1: number = 1;910const addStep→ (input) => input + step = (input: number): number => input + step;11const result: number = applyTwice(startValue2, addStep(input) => input + step);

  2. once ← 3, twice ← 4

    1function applyTwice(value2: number, transform(input) => input + step: (input: number) => number): number {2    const once→ 3: number = transform(value2);3    const twice→ 4: number = transform(once3);4    return twice4;5}

  3. result ← 4

    10const addStep = (input: number): number => input + step;11const result→ 4: number = applyTwice(startValue2, addStep(input) => input + step);1213console.log(`result=${result4}`);
    outputresult=4

  1. startValue ← 2, step ← 10, addStep ← (input) => input + step

    4    return twice;5}67const startValue→ 2: number = 2;8const step→ 10: number = 10;910const addStep→ (input) => input + step = (input: number): number => input + step;11const result: number = applyTwice(startValue2, addStep(input) => input + step);

  2. once ← 12, twice ← 22

    1function applyTwice(value2: number, transform(input) => input + step: (input: number) => number): number {2    const once→ 12: number = transform(value2);3    const twice→ 22: number = transform(once12);4    return twice22;5}

  3. result ← 22

    10const addStep = (input: number): number => input + step;11const result→ 22: number = applyTwice(startValue2, addStep(input) => input + step);1213console.log(`result=${result22}`);
    outputresult=22

Apply the Callback Twice

  1. startValue starts as 2.
  2. step is 4.
  3. addStep(2) returns 6.
  4. addStep(6) returns 10.
  5. applyTwice returns 10.
2 -> addStep -> 6 -> addStep -> 10

Exercise: callbacks.ts

Pass an addStep callback into applyTwice and print the result after two calls