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.

Practice

1. What is the main role of the JavaScript runtime environment?

easy

A. To compile JavaScript into machine code before running

B. To design the user interface of a web page

C. To execute JavaScript code and provide necessary tools

D. To store JavaScript files on the server

Solution

1. Step 1: Understand what a runtime environment does

   The runtime environment is where JavaScript code runs and interacts with other parts like APIs and event loop.

2. Step 2: Identify the main role

   Its main role is to execute JavaScript code and provide tools like APIs and event handling.

3. Final Answer:

   To execute JavaScript code and provide necessary tools -> Option C

4. Quick Check:

   Runtime runs code and tools = B [OK]

Hint: Runtime runs code and tools, not UI or storage [OK]

Common Mistakes:

• Confusing runtime with compiler
• Thinking runtime designs UI
• Assuming runtime stores files

2. Which of the following is the correct way to access the global object in a JavaScript runtime?

easy

A. globalThis

B. window

C. document

D. runtime

Solution

1. Step 1: Recall the global object in modern JavaScript

   The global object is accessible via globalThis in all environments.

2. Step 2: Compare options

   window is global in browsers only, document is for DOM, runtime is not a valid object.

3. Final Answer:

   globalThis -> Option A

4. Quick Check:

   Universal global object = globalThis [OK]

Hint: Use globalThis for universal global access [OK]

Common Mistakes:

• Using window in non-browser environments
• Confusing document with global object
• Assuming runtime is a global object

3. What will the following code output in a typical JavaScript runtime?

console.log(typeof setTimeout);

medium

A. "undefined"

B. "function"

C. "object"

D. "number"

Solution

1. Step 1: Understand what setTimeout is

   setTimeout is a timer API function provided by the runtime environment.

2. Step 2: Determine the type of setTimeout

   Since setTimeout is a function, typeof setTimeout returns "function".

3. Final Answer:

   "function" -> Option B

4. Quick Check:

   setTimeout is a function = "function" [OK]

Hint: setTimeout is a function, so typeof returns "function" [OK]

Common Mistakes:

• Thinking setTimeout is undefined
• Confusing setTimeout with a number
• Assuming setTimeout is an object

4. Identify the error in this code snippet related to JavaScript runtime APIs:

setTimeout(() => {
  console.log('Hello');
}, '1000');

medium

A. The delay should be a number, not a string

B. Arrow functions cannot be used with setTimeout

C. console.log is not available in runtime

D. setTimeout requires three arguments

Solution

1. Step 1: Check the setTimeout parameters

   setTimeout expects the delay as a number, but here it is a string '1000'.

2. Step 2: Understand the impact

   Passing a string may cause the delay to be treated as 0 or converted, which is incorrect usage.

3. Final Answer:

   The delay should be a number, not a string -> Option A

4. Quick Check:

   Delay must be number, not string [OK]

Hint: Delay argument must be a number, not a string [OK]

Common Mistakes:

• Using string instead of number for delay
• Thinking arrow functions are invalid here
• Assuming console.log is unavailable

5. You want to run a piece of JavaScript code repeatedly every 2 seconds using the runtime environment. Which code snippet correctly achieves this?

hard

A. repeat(() => console.log('Repeat'), 2000);

B. setTimeout(() => console.log('Repeat'), 2000);

C. while(true) { console.log('Repeat'); }

D. setInterval(() => console.log('Repeat'), 2000);

Solution

1. Step 1: Identify the correct API for repeated execution

   setInterval runs a function repeatedly at specified intervals.

2. Step 2: Compare options

   setTimeout runs once, while loop blocks execution, and repeat is not a valid function.

3. Final Answer:

   setInterval(() => console.log('Repeat'), 2000); -> Option D

4. Quick Check:

   Repeated runs use setInterval [OK]

Hint: Use setInterval for repeated actions every interval [OK]

Common Mistakes:

• Using setTimeout for repeated calls
• Using infinite while loop causing freeze
• Assuming repeat is a valid function