Previous: JS Tutorial Next: Frameworks

How JavaScript Works

A simple breakdown of what happens when JavaScript code runs in a browser.

Engine Flow Execution Context Event Loop

Table of Contents

Overview

When JavaScript runs, the browser loads your files, the JS engine parses the code into an internal representation, then executes it line by line inside an execution context. For asynchronous work, the event loop coordinates callbacks so the main thread keeps moving.

console.log("Hello, World!");
// Press F12 -> Console to see this.

How JavaScript Works (Visual)

The diagram below summarizes the complete JavaScript execution lifecycle from writing code to output.

How JavaScript works flow diagram with browser loading, parser, execution context, and event loop
JavaScript execution flow: code -> browser -> engine -> execution context -> output -> event loop.

Execution Steps (Ordered)

  1. Write Code: JavaScript is written in external files or script tags.
  2. Browser Loads: Browser downloads HTML, CSS, and JS resources.
  3. Engine Parses: JavaScript engine tokenizes and parses code.
  4. Create Execution Context: Memory is allocated for variables/functions.
  5. Run Code: Statements execute line-by-line in call stack.
  6. Produce Output: Results appear in console or UI.
  7. Handle Async: Event loop schedules callbacks when stack is free.

Execution Context Explained

PhaseWhat HappensExample
Memory CreationVariables are allocated, functions are stored.var a -> undefined
ExecutionStatements execute line by line.a = 10, function calls run

Every function call creates its own execution context and is pushed onto the call stack.

Event Loop and Async Behavior

JavaScript uses one main thread, so it cannot run two JS lines at the exact same time. To keep apps responsive, asynchronous operations are handled outside the call stack and coordinated by the event loop.

  • Call Stack: Runs current synchronous JavaScript.
  • Web APIs / Runtime APIs: Handle timers, network, DOM events.
  • Task Queues: Completed async callbacks wait here.
  • Event Loop: Moves a callback to stack when stack becomes empty.
console.log("Start");
setTimeout(() => console.log("Timer done"), 0);
console.log("End");
// Output: Start, End, Timer done

Why output is not Start, Timer done, End? Because setTimeout callback is queued and only executes after current synchronous stack is finished.

How to Run JavaScript on Windows, Linux, macOS

Windows

  1. Install Node.js from nodejs.org
  2. Create file: app.js
  3. Run in PowerShell: node app.js

Linux

  1. Install Node.js (apt/dnf/pacman)
  2. Create file: app.js
  3. Run in terminal: node app.js

macOS

  1. Install Node.js (official installer or Homebrew)
  2. Create file: app.js
  3. Run in terminal: node app.js

10 JavaScript Engine Interview Q&A

1What is JavaScript runtime?easy
Answer: Runtime is the environment (browser/Node.js) that provides JS engine and APIs to execute JavaScript.
2What is AST in parsing?medium
Answer: AST (Abstract Syntax Tree) is a structured representation of source code used by engine internals.
3What is global execution context?easy
Answer: The default context created first when a JS file starts running.
4Why is JavaScript called single-threaded?easy
Answer: Because one call stack executes one JS task at a time.
5What is call stack overflow?medium
Answer: Too many nested calls (often recursion without base case) exceed stack capacity.
6Microtask queue examples?medium
Answer: Promise then/catch/finally callbacks and queueMicrotask jobs.
7Macrotask examples?medium
Answer: setTimeout, setInterval, DOM events, message channel tasks.
8How is Node.js async model different from browser?hard
Answer: Node uses libuv event loop and its own phases, while browsers use Web APIs and rendering pipeline.
9What is JIT compilation?hard
Answer: Just-In-Time compilation optimizes hot code paths to machine code at runtime for speed.
10Why understanding event loop matters in interviews?easy
Answer: It helps explain timing bugs, async ordering, performance issues, and non-blocking UI behavior.

10 JavaScript Engine MCQs

1

Which component executes synchronous JavaScript code?

ACallback Queue
BCall Stack
CWeb API
DHeap
Explanation: The call stack executes synchronous JavaScript one frame at a time.
2

What does parser produce before execution?

AToken table only
BAST
CCSSOM
DByte array only
Explanation: JavaScript parser builds an Abstract Syntax Tree (AST).
3

Which queue has higher priority in most runtimes?

AMacrotask queue
BRender queue
CMicrotask queue
DTimer queue
Explanation: Microtasks run before the next macrotask cycle.
4

Which is a microtask?

AsetTimeout callback
BPromise then callback
Cclick event
DsetInterval callback
Explanation: Promise handlers are scheduled in the microtask queue.
5

What happens first in execution context creation phase?

ADOM paint
BVariable/function allocation
CAPI request
DEvent dispatch
Explanation: Memory phase allocates references before execution starts.
6

JavaScript being single-threaded means:

ANo async possible
BOne JS task on stack at a time
COne CPU core always
DNo event loop
Explanation: A single call stack processes one frame at a time.
7

Which runtime commonly uses V8 engine?

AFirefox only
BSafari only
CChrome and Node.js
DEdge Legacy only
Explanation: Google Chrome and Node.js are both powered by V8.
8

What is a common reason for "Maximum call stack size exceeded"?

AInfinite recursion
BMissing semicolon
CLarge JSON parse
DPromise rejection
Explanation: Unbounded recursion keeps pushing stack frames until overflow.
9

Which statement about event loop is true?

ARuns before parser
BMoves callbacks when stack is free
CReplaces call stack
DExecutes CSS
Explanation: Event loop checks stack state and schedules queued callbacks.
10

In setTimeout(fn, 0), callback runs:

AImmediately before sync code
BAfter current stack completion
CDuring parse phase
DOnly on page reload
Explanation: Timer callback enters queue, then runs after synchronous stack is empty.
Previous: JS Tutorial Next: Frameworks