Event loop overview in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code snippet?

Consider the following JavaScript code. What will be printed to the console?

Javascript

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

A

Start
Promise
End
Timeout

B

Start
End
Promise
Timeout

C

Start
End
Timeout
Promise

D

Start
Timeout
Promise
End

💡 Hint

Remember that Promise callbacks go to the microtask queue, which runs before the macrotask queue where setTimeout callbacks go.

The synchronous console.log calls run first: 'Start' then 'End'. The Promise callback runs next because microtasks have priority, printing 'Promise'. Finally, the setTimeout callback runs, printing 'Timeout'.

❓ Predict Output

intermediate

What will this code print and why?

Analyze the following code and select the correct console output.

Javascript

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

A

1
5
3
4
2

B

1
5
2
3
4

C

1
4
5
3
2

D

1
5
4
3
2

💡 Hint

Microtasks run before any timers, even if the timer delay is zero.

First, synchronous logs '1' and '5'. Then microtask logs '4'. Then timers with 0ms delay logs '3', and finally timer with 100ms delay logs '2'.

❓ Predict Output

advanced

What is the output of this nested asynchronous code?

Look at this code with nested setTimeout and Promise. What will it print?

Javascript

console.log('A');
setTimeout(() => {
  console.log('B');
  Promise.resolve().then(() => console.log('C'));
}, 0);
Promise.resolve().then(() => {
  console.log('D');
  setTimeout(() => console.log('E'), 0);
});
console.log('F');

A

A
F
D
B
C
E

B

A
F
B
D
C
E

C

A
F
D
B
E
C

D

A
F
D
C
B
E

💡 Hint

Remember microtasks run immediately after the current task, before the next macrotask.

First synchronous logs 'A' and 'F'. Then microtask logs 'D' and schedules a timer for 'E'. Next macrotask logs 'B' and schedules a microtask for 'C'. That microtask runs immediately after 'B', printing 'C'. Finally, the timer for 'E' runs.

❓ Predict Output

advanced

What error does this code produce?

Consider this code snippet. What error will it raise when run?

Javascript

setTimeout(() => {
  throw new Error('Oops');
}, 0);

Promise.reject('Fail').catch(e => console.log('Caught:', e));

A Caught: Fail

B Uncaught Error: Oops

C No output, silent failure

D Caught: Oops

💡 Hint

Errors thrown inside setTimeout callbacks are not caught by Promise.catch.

The Promise.reject is caught and logs 'Caught: Fail'. The error thrown inside setTimeout is asynchronous and not caught here, so it causes an uncaught error in the environment but does not affect this output.

🧠 Conceptual

expert

Which option correctly describes the event loop phases order?

Which of the following lists the correct order of event loop phases in Node.js?

A Timers → Poll → Pending callbacks → Check → Close callbacks → Idle, prepare

B Poll → Timers → Check → Pending callbacks → Close callbacks → Idle, prepare

C Timers → Pending callbacks → Idle, prepare → Poll → Check → Close callbacks

D Pending callbacks → Timers → Poll → Check → Close callbacks → Idle, prepare

💡 Hint

Recall the Node.js event loop phases as documented in official docs.

The Node.js event loop phases run in this order: Timers, Pending callbacks, Idle/prepare, Poll, Check, and Close callbacks.

Practice

1. What is the main role of the JavaScript event loop?

easy

A. To manage execution of multiple tasks without stopping the program

B. To compile JavaScript code into machine code

C. To store variables and functions in memory

D. To style HTML elements dynamically

Solution

1. Step 1: Understand event loop purpose

   The event loop allows JavaScript to handle many tasks smoothly by managing task execution order.

2. Step 2: Compare options with event loop role

   Only To manage execution of multiple tasks without stopping the program describes managing multiple tasks without stopping, which matches the event loop's job.

3. Final Answer:

   To manage execution of multiple tasks without stopping the program -> Option A

4. Quick Check:

   Event loop = manages tasks smoothly [OK]

Hint: Event loop runs tasks one by one without freezing [OK]

Common Mistakes:

• Confusing event loop with code compilation
• Thinking event loop handles styling
• Believing event loop stores variables

2. Which of the following is the correct syntax to schedule a function to run after the current code using the event loop?

easy

A. setTimeout(myFunction, 0);

B. runLater(myFunction);

C. delay(myFunction, 0);

D. executeAfter(myFunction);

Solution

1. Step 1: Identify standard JavaScript function for scheduling

   setTimeout is the built-in function to schedule code after current execution.

2. Step 2: Check options for correct syntax

   Only setTimeout(myFunction, 0) is valid JavaScript syntax to schedule a function immediately after current code.

3. Final Answer:

   setTimeout(myFunction, 0); -> Option A

4. Quick Check:

   Use setTimeout(fn, 0) to schedule tasks [OK]

Hint: Remember setTimeout(fn, 0) delays after current code [OK]

Common Mistakes:

• Using non-existent functions like runLater or delay
• Omitting the delay argument in setTimeout
• Confusing setTimeout with synchronous calls

3. What will be the output of the following code?

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

medium

A. StartTimeoutEnd

B. StartEndTimeout

C. TimeoutStartEnd

D. EndStartTimeout

Solution

1. Step 1: Understand synchronous and asynchronous order

   console.log('Start') runs first, then setTimeout schedules 'Timeout' to run later, then console.log('End') runs immediately.

2. Step 2: Determine output order

   'Start' prints, then 'End' prints, then after current code finishes, 'Timeout' prints from the event loop.

3. Final Answer:

   Start
   End
   Timeout -> Option B

4. Quick Check:

   Sync logs first, then setTimeout logs [OK]

Hint: setTimeout runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Mixing order of synchronous logs
• Ignoring event loop delay

4. Identify the error in this code snippet related to the event loop:

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

medium

A. setTimeout requires three arguments

B. Arrow functions cannot be used with setTimeout

C. Missing parentheses after console.log

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

Solution

1. Step 1: Check setTimeout delay argument type

   The delay argument must be a number, but here it is a string '1000'.

2. Step 2: Understand effect of wrong type

   Passing a string may cause unexpected behavior or be coerced, but best practice is to use a number.

3. Final Answer:

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

4. Quick Check:

   Delay must be number in setTimeout [OK]

Hint: Use number for delay in setTimeout, not string [OK]

Common Mistakes:

• Using string instead of number for delay
• Thinking arrow functions are invalid here
• Assuming setTimeout needs 3 arguments

5. You want to run two functions, first() and second(), so that second() runs only after first() finishes, but first() contains asynchronous code using setTimeout. How can you ensure second() runs after first() completes all its tasks?

hard

A. Use two separate setTimeout calls with the same delay

B. Call second() immediately after calling first()

C. Call second() inside the callback of setTimeout in first()

D. Use a loop to wait until first() finishes

Solution

1. Step 1: Understand asynchronous behavior of setTimeout

   setTimeout runs code later, so code after first() runs immediately without waiting.

2. Step 2: Ensure second() runs after first()'s async code

   To guarantee order, call second() inside the setTimeout callback in first(), so it runs after the async task.

3. Final Answer:

   Call second() inside the callback of setTimeout in first() -> Option C

4. Quick Check:

   Chain async calls inside callbacks to keep order [OK]

Hint: Put second() inside first()'s async callback [OK]

Common Mistakes:

• Calling second() immediately after first() ignoring async
• Using multiple setTimeouts with same delay expecting order
• Trying to block with loops instead of callbacks