Closures and Callbacks

Closure Updates

Update outer state from a function.

closure-updates Closures can read and update outer variables. This is useful, but it also means the function carries state between calls.

Closure Updates

start
closure_updates.js
Replay: real traced execution (multi-file project)
const start = 1;
let count = start;

function nextCount() {
  count += 1;
  return count;
}

const first = nextCount();
const second = nextCount();

console.log("start=" + start);
console.log("first=" + first);
console.log("second=" + second);

const start = 5;
let count = start;

function nextCount() {
  count += 1;
  return count;
}

const first = nextCount();
const second = nextCount();

console.log("start=" + start);
console.log("first=" + first);
console.log("second=" + second);

const start = 10;
let count = start;

function nextCount() {
  count += 1;
  return count;
}

const first = nextCount();
const second = nextCount();

console.log("start=" + start);
console.log("first=" + first);
console.log("second=" + second);

  1. start ← 1, count ← 1

    1const start→ 1 = 1; //@start=5, 102let count→ 1 = start→ 1;34function nextCount() {5  count += 1;6  return count;7}89const first = nextCount();10const second = nextCount();

  2. count ← 2

    pass 1 of 2
    1const start = 1; //@start=5, 102let count = start;34function nextCount() {5  count += 1;6  return count2;7}

  3. first ← 2

    6  return count;7}89const first→ 2 = nextCount();10const second = nextCount();

  4. count ← 3

    pass 2 of 2
    1const start = 1; //@start=5, 102let count = start;34function nextCount() {5  count += 1;6  return count3;7}

  5. second ← 3

    9const first = nextCount();10const second→ 3 = nextCount();1112console.log("start=" + start1);13console.log("first=" + first2);14console.log("second=" + second3);
    outputstart=1
first=2
second=3

  1. start ← 5, count ← 5

    1const start→ 5 = 5;2let count→ 5 = start→ 5;34function nextCount() {5  count += 1;6  return count;7}89const first = nextCount();10const second = nextCount();

  2. count ← 6

    pass 1 of 2
    1const start = 5;2let count = start;34function nextCount() {5  count += 1;6  return count6;7}

  3. first ← 6

    6  return count;7}89const first→ 6 = nextCount();10const second = nextCount();

  4. count ← 7

    pass 2 of 2
    1const start = 5;2let count = start;34function nextCount() {5  count += 1;6  return count7;7}

  5. second ← 7

    9const first = nextCount();10const second→ 7 = nextCount();1112console.log("start=" + start5);13console.log("first=" + first6);14console.log("second=" + second7);
    outputstart=5
first=6
second=7

  1. start ← 10, count ← 10

    1const start→ 10 = 10;2let count→ 10 = start→ 10;34function nextCount() {5  count += 1;6  return count;7}89const first = nextCount();10const second = nextCount();

  2. count ← 11

    pass 1 of 2
    1const start = 10;2let count = start;34function nextCount() {5  count += 1;6  return count11;7}

  3. first ← 11

    6  return count;7}89const first→ 11 = nextCount();10const second = nextCount();

  4. count ← 12

    pass 2 of 2
    1const start = 10;2let count = start;34function nextCount() {5  count += 1;6  return count12;7}

  5. second ← 12

    9const first = nextCount();10const second→ 12 = nextCount();1112console.log("start=" + start10);13console.log("first=" + first11);14console.log("second=" + second12);
    outputstart=10
first=11
second=12