Prove that JavaScript runs in a single thread

JavaScript runs on a single thread

we might hear about this sentence many times in different situations like interviews, blogs, conferences, workplaces, etc.

Is that really true?

Official docs say:

despite the fact that JavaScript is single-threaded — by offloading operations to the system kernel whenever possible.

This is again completely true for web browser too,

Of course, Yes it is, But can you prove that by writing some code?

Take a moment to think about this and demonstrate it with a code example.

Solution

let loop = true;

setTimeout(() => { 
    loop = false;
});

while (loop) {
    console.log('loop', loop);    
}

console.log('after loop');

Explanation:

We have just declared a variable called loop and it's defaulted to true.

setTimeout(() => {
    loop = false;
});

Immediately after the above line encountered by JavaScript interpreter, JavaScript scheduled a task in the event loop since these are web API. JavaScript doesn't want to block the main thread so it moves the task to event loop. Here are some of the web APIs which browser provides like XMLHttpRequest, setInternal, setTimeout, etc.

while (loop) {
    console.log('loop', loop);    
}

Here is an interesting moment in our example. As many developers know the above code will execute infinitely. But take a moment to think about what was happened to our scheduled task in the event loop. Will modify loop value as false ?.

Actually, It will never be loop false, because until the main thread execution is completed fully, the main thread won’t get the opportunity to pick a task from task queue in the event loop even though it’s completed and added callback in the task queue.

In other words, In general, the main thread will able to pick a completed task from task queue in the event loop, only after the main thread cleared all of its calls in the stack. Even though it was scheduled before reaching infinity code, no other threads can modify the loop's variable value.

So note that

console.log('after loop');

line is unreachable code.

Solution with Comments

let loop = true;

setTimeout(() => {  // callback execution is unreachable because main thread is still busy with below infinite loop code. 
    console.log('It will never reach here :ohh');
    loop = false;
});

while (loop) {
    console.log('loop', loop);  // Infinite loop
}

console.log('after loop');  // Unreachable code 

Hence it's running on a single thread.

Further Readings:

• What the heck is the event loop anyway? by Philip Roberts - https://www.youtube.com/watch?v=8aGhZQkoFbQ
• https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
• https://nodejs.org/uk/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop