Event loop overview in Javascript - Mini Project: Build & Apply

Event loop overview

📖 Scenario: Imagine you are organizing a small party. You have a list of tasks to do, like setting up music, preparing snacks, and greeting guests. Some tasks take time, like waiting for the oven to heat up, while others are quick. You want to understand how JavaScript handles tasks that take time and tasks that are quick, so your party runs smoothly.

🎯 Goal: You will create a simple JavaScript program that shows how the event loop works by running tasks immediately and scheduling tasks to run later. You will see how JavaScript handles these tasks step by step.

📋 What You'll Learn

Create an array called tasks with three strings: 'Task 1', 'Task 2', and 'Task 3'.

Create a variable called delay and set it to 1000 (milliseconds).

Use a for loop with variable i to iterate over tasks.

Inside the loop, use setTimeout to schedule a function that logs the current task after delay milliseconds.

Immediately log 'Starting tasks' before the loop.

Immediately log 'All tasks scheduled' after the loop.

💡 Why This Matters

🌍 Real World

Understanding the event loop helps you write programs that handle waiting times without freezing, like loading images or responding to clicks.

💼 Career

Many jobs require writing smooth web apps or servers that handle many tasks at once without delays.

1

Create the tasks array

Create an array called tasks with these exact strings: 'Task 1', 'Task 2', and 'Task 3'.

Javascript

# Create the tasks array
# Your code here

Hint

Use square brackets [] to create an array and separate strings with commas.

2

Set the delay time

Create a variable called delay and set it to 1000 (milliseconds).

Javascript

const tasks = ['Task 1', 'Task 2', 'Task 3'];
# Create the delay variable
# Your code here

Hint

Use const to create a variable that does not change.

3

Schedule tasks with setTimeout

Use a for loop with variable i to iterate over tasks. Inside the loop, use setTimeout to schedule a function that logs tasks[i] after delay milliseconds.

Javascript

const tasks = ['Task 1', 'Task 2', 'Task 3'];
const delay = 1000;
# Use a for loop to schedule tasks
# Your code here

Hint

Use setTimeout with an arrow function to delay logging each task.

4

Add immediate logs for start and end

Before the loop, write console.log('Starting tasks'). After the loop, write console.log('All tasks scheduled').

Javascript

const tasks = ['Task 1', 'Task 2', 'Task 3'];
const delay = 1000;
# Log 'Starting tasks' before the loop
console.log('Starting tasks');
for (let i = 0; i  {
        console.log(tasks[i]);
    }, delay);
}
# Log 'All tasks scheduled' after the loop
# Your code here

Hint

Remember that console.log runs immediately, but setTimeout delays the logs.

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