Concurrency

JavaScript is single-threaded. This means it has one call stack and can do one thing at a time.

If JS is single-threaded, how can we fetch data, set timers, and listen for clicks without freezing the entire page? The answer lies in the Concurrency Model and the Event Loop.

1. The Engine Room: The Event Loop

To understand concurrency, you must understand the architecture of the browser runtime.

The Key Players

1. Call Stack: Where code runs immediately. LIFO (Last In, First Out).

2. Web APIs: Browser features (fetch, DOM events, setTimeout) that run outside the main JS thread.

3. Callback Queue (Task Queue): A waiting area for callbacks from Web APIs (e.g., setTimeout finished).

4. Microtask Queue: A VIP waiting area for Promises. It has higher priority than the Callback Queue.

5. The Event Loop: An infinite loop that checks: Is the Stack empty? If yes, move the first item from the Queue to the Stack.

The Flow (Visualized)

1. JS executes sync code on the Stack.

2. Async operation (setTimeout) is handed off to Web APIs.

3. Sync code continues.

4. When Web API finishes, it drops the callback into the Queue.

5. Once the Stack is empty, the Event Loop pushes the callback onto the Stack.

2. Phase 1: Callbacks (The Old Ways)

Before ES6, callbacks were the only way to handle async operations. A callback is simply a function passed into another function to be executed later.

The Pattern

console.log('1. Start');

function fetchData(callback) {
    // Simulate a 2-second server request
    setTimeout(() => {
        const data = { id: 1, user: 'Alice' };
        callback(data);
    }, 2000);
}

fetchData((user) => {
    console.log('3. Data Received:', user);
});

console.log('2. End');

Output:

1. Start

2. End

3. Data Received (after 2 seconds)

The Problem: Callback Hell

When you need to perform sequential async operations (get ID -> get User -> get Posts), callbacks nest deeply, creating the "Pyramid of Doom."

getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            getMoreData(c, function(d) {
                // Unreadable and hard to debug
            });
        });
    });
});

3. Phase 2: Promises (The Revolution)

Introduced in ES6 (2015), a Promise is an object representing the eventual completion (or failure) of an asynchronous operation.

The 3 States

1. Pending: Initial state, neither fulfilled nor rejected.

2. Fulfilled (Resolved): Operation completed successfully.

3. Rejected: Operation failed.

The Syntax

Promises flatten the pyramid using .then() chains.

const checkServer = new Promise((resolve, reject) => {
    const isOnline = true;
    
    if (isOnline) {
        resolve('Server is Green');
    } else {
        reject('Server is Down');
    }
});

checkServer
    .then((status) => {
        console.log(status);
        return 'Connecting...'; // Passes to next .then
    })
    .then((msg) => console.log(msg))
    .catch((err) => console.error(err))
    .finally(() => console.log('Cleanup complete'));

The Microtask Queue Priority

Promises use the Microtask Queue, which runs immediately after the current script and before the next standard task (like setTimeout).

console.log('Start');

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

Promise.resolve().then(() => console.log('Promise (Microtask)'));

console.log('End');

/* Output Order:
   1. Start
   2. End
   3. Promise (Microtask runs BEFORE Timeout)
   4. Timeout
*/

4. Phase 3: Async/Await (The Present)

Introduced in ES2017, async/await is syntactic sugar built on top of Promises. It allows you to write asynchronous code that looks and behaves like synchronous code.

The Rules

1. async: Put in front of a function. It ensures the function returns a Promise.

2. await: Put in front of a Promise. It pauses the execution of the function until the Promise resolves.

The Example (Refactoring Promises)

// Function returns a Promise
function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function runProcess() {
    try {
        console.log('1. Processing...');
        
        // PAUSE here for 1 second. 
        // The rest of the app (UI) is NOT frozen, only this function pauses.
        await wait(1000); 
        
        console.log('2. Done waiting');
        
        const response = await fetch('[https://api.example.com/data](https://api.example.com/data)');
        const data = await response.json();
        
        console.log('3. Data:', data);
        
    } catch (error) {
        // Standard synchronous error handling works!
        console.error('Something went wrong:', error);
    }
}

runProcess();

5. Advanced: Parallel Concurrency

Sometimes you don't want to wait for A, then B, then C. You want A, B, and C to start at the same time.

Promise.all()

Fails if any promise fails. Ideal for dependent data.

const p1 = new Promise(resolve => setTimeout(() => resolve('User'), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve('Posts'), 2000));

async function fetchAll() {
    console.time('Fetch');
    
    // Starts both timers simultaneously
    const results = await Promise.all([p1, p2]);
    
    console.log(results); // ['User', 'Posts']
    console.timeEnd('Fetch'); // ~2000ms (not 3000ms)
}

Promise.allSettled()

Waits for all to finish, regardless of success or failure.

const p1 = Promise.resolve('Good');
const p2 = Promise.reject('Bad');

Promise.allSettled([p1, p2]).then(results => console.log(results));
/* Output:
[
  { status: 'fulfilled', value: 'Good' },
  { status: 'rejected', reason: 'Bad' }
]
*/