What Happens Before the Event Loop

Source: Dev.to

JavaScript code is not executed natively by an engine the moment a task appears in the call stack. Most articles focus on how the Event Loop works, leaving out the path that developer‑written instructions take before reaching that point. Consequently, concepts such as scope, closures, the Temporal Dead Zone, and other execution details are often memorized as a kind of “technomagic”.

In this short series of posts we trace the path from source‑code input to actual execution. To avoid diving too deeply into the implementation details of specific engines (V8, SpiderMonkey, JavaScriptCore, etc.), the discussion stays at the abstraction level defined by the ECMAScript 262 specification.

The specification intentionally does not describe JavaScript execution as a linear sequence of steps—implementation details are left to engine authors. Nevertheless, the spec (along with practical knowledge of engine implementations) allows us to identify four conditional stages:

• Determination of the execution environment: Host, Agent, Realm
• Parsing of the source code
• Creation of meta‑objects: Module Record / Script Record
• Program execution

Execution Preparation Phase

Parsing and initialisation of the script occur here. The engine creates the necessary internal records (e.g., ScriptRecord, ModuleRecord) and sets up the global environment before any user code runs.

Instruction Execution Phase

The engine walks the compiled bytecode / abstract syntax tree, creating execution contexts, evaluating expressions, and ultimately performing the side‑effects defined by the program.

Execution Environment Layers

The specification defines three key layers of the execution environment that must exist before any developer instructions can run.

Host

The external program in which JavaScript code is executed: browsers, Node.js, Deno, etc.

Agent

An isolated part of the execution environment (independent from other agents) that has its own Execution Context Stack and Running Execution Context. Examples include a browser tab, a Web Worker, or an iframe.

Realm

A logical entity that defines the global object, global methods, and global variables, and is responsible for creating the Global Execution Context. In the V8 engine implementation this corresponds to the v8::Context class (in C++):

// Example: creating a new V8 context
v8::Isolate* isolate = ...;
v8::Local context = v8::Context::New(isolate);

Understanding the structure of the execution environment and its isolation model explains:

• The absence of race conditions between tabs in the same browser.
• Why a Worker has no access to the global object and variables of the main application.
• The isolation of overridden global JavaScript methods within a single Host.