Using JavaScript with Event Loop & Concurrency Mode

You are reading Part 27 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 5]

Introduction

JavaScript is a single-threaded language, meaning it can only execute one operation at a time. However, through its event loop and concurrency model, JavaScript efficiently handles asynchronous operations, allowing for non-blocking execution of tasks such as API calls, timers, and event listeners.

1. Understanding the JavaScript Execution Model

JavaScript follows an event-driven architecture where code execution is managed by an execution stack and an event loop.

Execution Flow:

1. Call Stack – Holds function calls and executes them sequentially.

2. Web APIs – Browser APIs that handle asynchronous tasks (e.g., setTimeout, fetch, event listeners).

3. Callback Queue – Stores asynchronous callbacks waiting to be executed.

4. Microtask Queue – Stores promises and MutationObserver callbacks, executed before the callback queue.

5. Event Loop – Monitors and pushes tasks from the callback and microtask queues to the call stack when it's empty.

Example:

console.log("Start");

setTimeout(() => console.log("setTimeout callback"), 0);

Promise.resolve().then(() => console.log("Promise callback"));

console.log("End");

Expected Output:

Start
End
Promise callback
setTimeout callback

• Synchronous code (console.log("Start") and console.log("End")) executes first.

• Promise callbacks (Microtasks) execute before setTimeout (Macrotasks).

2. Handling Asynchronous Tasks

JavaScript uses different mechanisms to handle asynchronous tasks, including callbacks, promises, and async/await.

Callbacks

Callbacks are functions passed as arguments to be executed later.

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched successfully");
    }, 2000);
}

fetchData(data => console.log(data));

Promises

Promises provide a better way to handle async operations by avoiding callback hell.

function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data fetched successfully"), 2000);
    });
}

fetchData().then(data => console.log(data));

Async/Await

Async/Await simplifies promise-based code, making it look synchronous.

async function fetchData() {
    let response = await new Promise(resolve => setTimeout(() => resolve("Data fetched successfully"), 2000));
    console.log(response);
}

fetchData();

3. Understanding Microtasks & Macrotasks

JavaScript differentiates between microtasks and macrotasks when scheduling asynchronous operations.

Microtasks (Higher Priority)

• Promises

• MutationObserver

Macrotasks (Lower Priority)

• setTimeout, setInterval

• I/O tasks (fetch, XMLHttpRequest)

• DOM events (click, scroll, keypress)

Example:

console.log("Script start");

setTimeout(() => console.log("setTimeout"), 0);
Promise.resolve().then(() => console.log("Promise"));

console.log("Script end");

Expected Output:

Script start
Script end
Promise
setTimeout

• Promises execute before setTimeout due to their microtask priority.

4. Best Practices for Handling Asynchronous Code

• Use async/await over nested callbacks to improve readability.

• Combine Promise.all() for parallel async operations.

  async function fetchMultipleData() {
      let [user, posts] = await Promise.all([
          fetch("https://jsonplaceholder.typicode.com/users/1").then(res => res.json()),
          fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json())
      ]);
      console.log(user, posts);
  }
  fetchMultipleData();
  

• Avoid blocking the main thread with synchronous long-running tasks.

• Use web workers for intensive computations.

You are reading Part 27 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 5]