Closures and Callbacks

Nested Closures

Use an inner function that remembers outer values.

nested-closure A nested function can read variables from both its own function and the outer scope. Calling it immediately keeps the replay state scalar.

Nested Closures

factor
nested_closure.js
Replay: real traced execution (multi-file project)
const factor = 3;

function multiplyWithFactor(value) {
  function multiply() {
    return value * factor;
  }
  return multiply();
}

const result = multiplyWithFactor(4);

console.log("factor=" + factor);
console.log("result=" + result);

const factor = 2;

function multiplyWithFactor(value) {
  function multiply() {
    return value * factor;
  }
  return multiply();
}

const result = multiplyWithFactor(4);

console.log("factor=" + factor);
console.log("result=" + result);

const factor = 5;

function multiplyWithFactor(value) {
  function multiply() {
    return value * factor;
  }
  return multiply();
}

const result = multiplyWithFactor(4);

console.log("factor=" + factor);
console.log("result=" + result);

  1. factor ← 3

    1const factor→ 3 = 3; //@factor=2, 523function multiplyWithFactor(value) {4  function multiply() {5    return value * factor;6  }7  return multiply();8}910const result = multiplyWithFactor(4);

  2. //@factor=2, 5 function multiplyWithFactor(value)

    1const factor = 3; //@factor=2, 523function multiplyWithFactor(value4) {4  function multiply() {5    return value * factor;6  }7  return multiply();8}

  3. function multiply()

    3function multiplyWithFactor(value) {4  function multiply() {5    return value * factor3;6  }

  4. result ← 12

    7  return multiply();8}910const result→ 12 = multiplyWithFactor(4);1112console.log("factor=" + factor3);13console.log("result=" + result12);
    outputfactor=3
result=12

  1. factor ← 2

    1const factor→ 2 = 2;23function multiplyWithFactor(value) {4  function multiply() {5    return value * factor;6  }7  return multiply();8}910const result = multiplyWithFactor(4);

  2. function multiplyWithFactor(value)

    1const factor = 2;23function multiplyWithFactor(value4) {4  function multiply() {5    return value * factor;6  }7  return multiply();8}

  3. function multiply()

    3function multiplyWithFactor(value) {4  function multiply() {5    return value * factor2;6  }

  4. result ← 8

    7  return multiply();8}910const result→ 8 = multiplyWithFactor(4);1112console.log("factor=" + factor2);13console.log("result=" + result8);
    outputfactor=2
result=8

  1. factor ← 5

    1const factor→ 5 = 5;23function multiplyWithFactor(value) {4  function multiply() {5    return value * factor;6  }7  return multiply();8}910const result = multiplyWithFactor(4);

  2. function multiplyWithFactor(value)

    1const factor = 5;23function multiplyWithFactor(value4) {4  function multiply() {5    return value * factor;6  }7  return multiply();8}

  3. function multiply()

    3function multiplyWithFactor(value) {4  function multiply() {5    return value * factor5;6  }

  4. result ← 20

    7  return multiply();8}910const result→ 20 = multiplyWithFactor(4);1112console.log("factor=" + factor5);13console.log("result=" + result20);
    outputfactor=5
result=20