Functions and Scope

Lexical Scope

Read an outer variable from inside a function.

lexical-scope A function can read variables from the scope where it is defined. Here `addBase` uses the outer `base` every time it runs.

Lexical Scope

base
lexical_scope.js
Replay: real traced execution (multi-file project)
const base = 10;

function addBase(x) {
  return base + x;
}

const r1 = addBase(5);
const r2 = addBase(8);

console.log("r1=" + r1);
console.log("r2=" + r2);

const base = 5;

function addBase(x) {
  return base + x;
}

const r1 = addBase(5);
const r2 = addBase(8);

console.log("r1=" + r1);
console.log("r2=" + r2);

const base = 20;

function addBase(x) {
  return base + x;
}

const r1 = addBase(5);
const r2 = addBase(8);

console.log("r1=" + r1);
console.log("r2=" + r2);

  1. base ← 10

    1const base→ 10 = 10; //@base=5, 2023function addBase(x) {4  return base + x;5}67const r1 = addBase(5);8const r2 = addBase(8);

  2. //@base=5, 20 function addBase(x)

    pass 1 of 2
    1const base = 10; //@base=5, 2023function addBase(x5) {4  return base + x5;5}

  3. r1 ← 15

    4  return base + x;5}67const r1→ 15 = addBase(5);8const r2 = addBase(8);

  4. //@base=5, 20 function addBase(x)

    pass 2 of 2
    1const base = 10; //@base=5, 2023function addBase(x8) {4  return base + x8;5}

  5. r2 ← 18

    7const r1 = addBase(5);8const r2→ 18 = addBase(8);910console.log("r1=" + r115);11console.log("r2=" + r218);
    outputr1=15
r2=18

  1. base ← 5

    1const base→ 5 = 5;23function addBase(x) {4  return base + x;5}67const r1 = addBase(5);8const r2 = addBase(8);

  2. function addBase(x)

    pass 1 of 2
    1const base = 5;23function addBase(x5) {4  return base + x5;5}

  3. r1 ← 10

    4  return base + x;5}67const r1→ 10 = addBase(5);8const r2 = addBase(8);

  4. function addBase(x)

    pass 2 of 2
    1const base = 5;23function addBase(x8) {4  return base + x8;5}

  5. r2 ← 13

    7const r1 = addBase(5);8const r2→ 13 = addBase(8);910console.log("r1=" + r110);11console.log("r2=" + r213);
    outputr1=10
r2=13

  1. base ← 20

    1const base→ 20 = 20;23function addBase(x) {4  return base + x;5}67const r1 = addBase(5);8const r2 = addBase(8);

  2. function addBase(x)

    pass 1 of 2
    1const base = 20;23function addBase(x5) {4  return base + x5;5}

  3. r1 ← 25

    4  return base + x;5}67const r1→ 25 = addBase(5);8const r2 = addBase(8);

  4. function addBase(x)

    pass 2 of 2
    1const base = 20;23function addBase(x8) {4  return base + x8;5}

  5. r2 ← 28

    7const r1 = addBase(5);8const r2→ 28 = addBase(8);910console.log("r1=" + r125);11console.log("r2=" + r228);
    outputr1=25
r2=28