How JavaScript Executes Your Code

Easy

Before you can write code effectively, you need to trace it mentally. The JavaScript engine reads your code top-to-bottom, line-by-line, maintaining state as it goes. This mental model is the foundation of debugging and understanding.

Interactive Visualization

CodeBefore Execution
1let x = 5;
2let y = x + 3;
3x = x + 1;
4console.log(x);
5console.log(y);
Current State
Empty (no variables yet)
Console Output
No output yet
Step 1/6Before execution, state is empty. The engine will process each line top-to-bottom.
💡 Key Insight:Variables store values, not links. When y = x + 3, y gets 8, not "whatever x is + 3".
State:
new variable
value changed
Phase:
before
executing
complete

Key Points

  • Code executes top-to-bottom, line-by-line (synchronous by default)
  • The engine maintains state: what variables exist, their current values
  • Comments are ignored - they are for humans only
  • Given the same input, code produces the same output (deterministic)
  • You can trace code by hand before running it
  • Understanding execution order prevents most beginner bugs

Code Examples

Tracing Simple Code

let x = 5;       // State: { x: 5 }
let y = x + 3;   // State: { x: 5, y: 8 }
x = x + 1;       // State: { x: 6, y: 8 }
console.log(x);  // Output: 6
console.log(y);  // Output: 8 (y didn't change!)

Each line changes state. y captured x's value at line 2 - it doesn't update when x changes

Order Matters

// This works:
let a = 10;
let b = a * 2;  // b is 20

// This fails:
// let c = d * 2;  // Error! d doesn't exist yet
// let d = 10;

Variables must be declared before use. The engine processes line-by-line.

Comments Are Invisible

let count = 0;

// TODO: add validation here
// count = count + 1;  <- This is a comment, not code!

count = count + 1;  // This actually runs

console.log(count);  // Output: 1

Comments starting with // are completely ignored by JavaScript

Tracing Function Calls

function double(n) {
  return n * 2;
}

let result = double(5);  // Call double with 5
// Inside double: n = 5, return 5 * 2 = 10
// result = 10

console.log(result);  // Output: 10

When you call a function, trace inside it, then return to where you called it

Common Mistakes

  • Assuming code runs in parallel (it runs one line at a time by default)
  • Not tracing state changes when debugging
  • Expecting variables to "link" to each other (y = x doesn't make y follow x)

Interview Tips

  • Practice tracing code by hand on paper - interviewers love seeing this
  • Verbalize your mental model: "After this line, x is 5..."
  • This skill directly transfers to debugging and code reviews