JavaScript runtime overview - Step-by-Step Execution

Concept Flow - JavaScript runtime overview

Start JS Program

↓

Parse Code

↓

Create Execution Context

↓

Run Global Code

↓

Call Functions

↓

Manage Call Stack

↓

Handle Async Tasks

↓

Event Loop Checks

↓

Execute Callback Queue

↓

Program Ends

JavaScript runtime starts by parsing code, creating an execution context, running code, managing function calls with a call stack, handling asynchronous tasks via event loop and callback queue, then ends.

Execution Sample

Javascript

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

This code logs 'Start', schedules a timeout callback, then logs 'End'. The timeout callback runs after the main code finishes.

Execution Table

Step	Action	Call Stack	Callback Queue	Output
1	Parse and start global code	Global Execution Context	Empty
2	Execute console.log('Start')	Global Execution Context	Empty	Start
3	Call setTimeout with callback	Global Execution Context	Timeout callback scheduled	Start
4	Execute console.log('End')	Global Execution Context	Timeout callback scheduled	Start End
5	Global code finished, call stack empty	Empty	Timeout callback scheduled	Start End
6	Event loop moves callback to call stack	Timeout callback	Empty	Start End
7	Execute callback console.log('Timeout')	Timeout callback	Empty	Start End Timeout
8	Callback finished, call stack empty	Empty	Empty	Start End Timeout

💡 Program ends when call stack and callback queue are empty

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
Call Stack	Global Execution Context	Global Execution Context	Empty	Empty
Callback Queue	Empty	Timeout callback scheduled	Timeout callback scheduled	Empty
Output		Start	Start End	Start End Timeout

Key Moments - 2 Insights

Why does 'Timeout' print after 'End' even though setTimeout delay is 0?

Because setTimeout callback goes to the callback queue and waits until the call stack is empty (see execution_table steps 5-7). The event loop ensures callbacks run only after main code finishes.

What is the call stack and why does it matter?

The call stack tracks which function is running. JavaScript runs one thing at a time. When the stack is empty, async callbacks can run (see execution_table steps 3, 6).

Visual Quiz - 3 Questions

Look at the execution table, what is in the call stack at step 4?

A Global Execution Context

B Timeout callback

C Empty

D Callback Queue

💡 Hint

Check the 'Call Stack' column at step 4 in the execution_table

At which step does the callback queue become empty?

A Step 3

B Step 6

C Step 8

D Step 7

💡 Hint

Look at the 'Callback Queue' column in the execution_table to see when it becomes empty

If we remove setTimeout, how would the output change?

A Output would be 'Timeout' only

B Output would be empty

C Output would be 'Start End' only

D Output would be 'Start Timeout End'

💡 Hint

Check the output column in execution_table steps 2 and 4 to see what prints without setTimeout

Concept Snapshot

JavaScript runtime parses code and creates an execution context.
It runs code using a call stack (one thing at a time).
Async tasks go to callback queue.
Event loop moves callbacks to call stack when empty.
This ensures non-blocking behavior.

Full Transcript

JavaScript runtime works by first parsing your code and creating an execution context where your code runs. It uses a call stack to keep track of what function is running. When you run code like console.log, it goes on the call stack and runs immediately. When you use asynchronous functions like setTimeout, the callback is placed in a callback queue. The event loop watches the call stack and when it is empty, it moves callbacks from the queue to the stack to run them. This is why even a setTimeout with zero delay runs after the main code finishes. This system lets JavaScript run code without waiting and keeps your program responsive.