Understanding JavaScript Variable Lookup and Scope from the ECMAScript Specification and V8 Engine Perspective

In the fourth installment of the series "Understanding JavaScript from the ECMAScript specification and browser engine perspective," the author challenges the common mental model that variable lookup occurs only at runtime and explores how scope is actually resolved during compilation.

The article first clarifies that JavaScript is both a compiled and interpreted language: V8 initially interprets code to bytecode, then JIT‑compiles hot functions to native machine code, applying type specialization and de‑optimization when assumptions change.

It explains that lexical scope is established at compile time. Except for rare cases involving eval() or with , the compiler determines where each identifier belongs, creating a map of lexical environments that the runtime later materialises.

The compilation pipeline is broken down into three stages: tokenizing/lexing, parsing into an Abstract Syntax Tree (AST), and code generation. These steps produce the lexical scope information used later.

Using a simple function example, the article shows how V8 parses source code into an AST and then generates bytecode. Example code:

function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

The generated AST and scope listings illustrate how variables are represented as VAR PROXY nodes that later link to actual variable slots or dynamic lookups.

Lazy parsing is introduced: when a function declaration is encountered, V8 initially skips parsing its body, postponing AST and bytecode generation until the function is first invoked. Commenting out the call to console.log(add(1, 2)) reduces the printed AST, demonstrating lazy parsing.

Dynamic lookups arise when eval() introduces variables that cannot be resolved statically. The article shows an example where a variable declared inside eval is marked with mode = DYNAMIC , explaining why eval hampers optimization.

Finally, the article describes how the AST is fed to the BytecodeGenerator of V8’s Ignition interpreter, producing executable bytecode. A snippet of the generated bytecode is shown:

$ out/Debug/d8 --print-bytecode add.js
…
[generated bytecode for function: add]
Parameter count 3
Frame size 0
   12 E> 0x37738712a02a @    0 : 94                StackCheck
   23 S> 0x37738712a02b @    1 : 1d 02             Ldar a1
   32 E> 0x37738712a02d @    3 : 29 03 00          Add a0, [0]
   36 S> 0x37738712a030 @    6 : 98                Return

The author concludes that understanding scope from the engine’s viewpoint reveals why JavaScript can achieve high performance and sets the stage for the next article, which will examine scope from the ECMAScript standard itself.