Why this topic is important
Understanding the phases of the JavaScript engine is essential to fully grasp how scope works (we talk about it here link) and why certain errors appear at specific times.
The process can be divided into 4 main phases:
Phase 1: Parsing
Phase 2: Compiling
Phase 3: Execution
Phase 4: Optimization
1. Parsing
In this phase, the source code is read by the engine.
If there are syntax errors, they are immediately raised as SyntaxError.
If the parsing succeeds, a tree structure called AST (Abstract Syntax Tree) is generated, which hierarchically represents the code and will be used during execution to establish the order of operations.
When you think of a SyntaxError, think of the Parsing phase
2. Compiling
In this phase:
Hoisting of variable, function, and class declarations takes place
The scope of each variable is determined
The Temporal Dead Zone (TDZ) is managed for variables declared with let and const
(we will talk about hoisting and TDZ in the article on Scope here (link))
3. Execution
This is the phase where the JavaScript program is actually executed according to the instructions provided by the AST.
Here runtime errors can occur, such as:
ReferenceError (when accessing variables that are not defined)
TypeError (when a value is used incorrectly, for example calling something as a function that is not).
When you think of ReferenceError or TypeError, think of the Execution phase
4. Optimization
In the final phase, the engine tries to run the program as efficiently as possible, optimizing performance based on the resources available on the operating system and hardware. Of course, the topic is more complex than this, and we may cover it in a future article.
When do transpiling and bundling come into play?
In reality, modern development does not stop here. JavaScript applications often go through a series of external tools even before the code reaches the engine:
Transpiler (like Babel, TypeScript compiler tsc)
Bundler (like Webpack or Vite)
Additional languages and syntaxes (TypeScript, JSX, etc.)
These tools, as we know, make the code compatible with different environments and browser versions, make writing more productive and maintainable, and produce a final optimized JavaScript ready to be processed by the engine.
Transpiling happens before the engine starts Parsing. It is therefore a blocking process: without it, the engine cannot even begin.
The Correct Order
The correct order for running a JS program is:
Transpiling (external tools) → Parsing → Compiling → Execution → Optimization
