JavaScript runtime overview - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of asynchronous code with setTimeout

What is the output of this JavaScript code snippet?

Javascript

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

A "Timeout" "Start" "End"

B "Start" "End" "Timeout"

C "Start" "Timeout" "End"

D "End" "Start" "Timeout"

💡 Hint

Remember that setTimeout callbacks run after the current call stack is empty.

The synchronous console.log('Start') runs first, then setTimeout schedules the callback to run later, and finally console.log('End') runs. The callback runs after the synchronous code, so the output order is Start, End, Timeout.

🧠 Conceptual

intermediate

Understanding the call stack and event loop

Which statement best describes the role of the event loop in the JavaScript runtime?

A It handles asynchronous callbacks by moving them from the callback queue to the call stack when the stack is empty.

B It manages the execution of synchronous code only.

C It pauses the call stack until all asynchronous operations complete.

D It executes all asynchronous code immediately before synchronous code.

💡 Hint

Think about how JavaScript handles asynchronous events without blocking synchronous code.

The event loop waits for the call stack to be empty and then moves callbacks from the callback queue to the call stack to execute them. This allows asynchronous code to run without blocking synchronous code.

❓ Predict Output

advanced

Output of Promise and microtasks

What will be the output of this code snippet?

Javascript

console.log('A');
Promise.resolve().then(() => console.log('B'));
console.log('C');

A "B" "A" "C"

B "A" "B" "C"

C "A" "C" "B"

D "C" "A" "B"

💡 Hint

Promises use microtasks which run after the current synchronous code but before setTimeout callbacks.

First, console.log('A') runs. Then the promise callback is scheduled as a microtask. Next, console.log('C') runs synchronously. After the synchronous code finishes, the microtask runs, printing B.

🔧 Debug

advanced

Identify the error in this asynchronous code

What error will this code produce when run?

Javascript

setTimeout(() => {
  console.log(x);
  let x = 10;
}, 0);

A SyntaxError

B undefined

C 10

D ReferenceError: Cannot access 'x' before initialization

💡 Hint

Consider how variable declarations with let behave inside blocks.

The variable x is declared with let after it is accessed. This causes a temporal dead zone error, so accessing x before its declaration throws a ReferenceError.

🚀 Application

expert

Predict the output of nested asynchronous calls

What is the output order of this code?

Javascript

console.log('1');
setTimeout(() => {
  console.log('2');
  Promise.resolve().then(() => console.log('3'));
}, 0);
Promise.resolve().then(() => console.log('4'));
console.log('5');

A "1" "5" "4" "2" "3"

B "1" "2" "3" "4" "5"

C "1" "5" "2" "4" "3"

D "1" "4" "5" "2" "3"

💡 Hint

Remember microtasks run after synchronous code but before setTimeout callbacks. Also, microtasks inside setTimeout run after that callback.

First, console.log('1') runs. Then setTimeout schedules a callback. Next, Promise.resolve().then(() => console.log('4')) schedules a microtask. Then console.log('5') runs. After the synchronous code finishes, the microtask runs printing 4. Then the setTimeout callback runs printing 2. Inside it, a promise microtask is scheduled and runs right after the callback finishes, printing 3.

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