Why javascript is single thread?

JavaScript is a single-threaded language, meaning that it executes one operation at a time on a single thread. This characteristic is often misunderstood as a limitation, but JavaScript can still be non-blocking, which enables it to handle asynchronous operations like reading from a file, fetching data from an API, or waiting for user input without blocking the main thread.

Let's explore how JavaScript achieves this, and why it's an important feature for web development.

What Does Single-Threaded Mean?
A single-threaded language means that only one operation or task can be executed at any given time. This is different from multi-threaded languages, where multiple tasks can run at the same time in separate threads.

Single-Threaded Execution in JavaScript:

JavaScript is traditionally single-threaded because it operates in a single execution context — there is one call stack where functions are pushed and popped as they are executed. In JavaScript, the call stack operates on a LIFO (Last In, First Out) basis, where functions are executed in the order they are pushed onto the stack.

However, just because JavaScript is single-threaded doesn’t mean it’s inefficient or incapable of handling multiple tasks. The secret lies in JavaScript’s ability to handle asynchronous operations using non-blocking features.

How Does JavaScript Achieve Non-Blocking Behavior?

Even though JavaScript runs in a single thread, it can still perform tasks asynchronously without blocking the main thread. This is achieved through the use of the event loop, callback queues, and asynchronous APIs provided by the environment (like the browser or Node.js).

1. The Event Loop

The event loop is the mechanism that allows JavaScript to handle asynchronous operations while running in a single thread. It’s responsible for managing the execution of code, events, and messages in a non-blocking manner.

Here’s how it works:

Call Stack: JavaScript starts by pushing the execution context of functions onto the call stack, executing them one at a time.

Web APIs / Node APIs:

When JavaScript encounters asynchronous operations like setTimeout(), fetch(), or I/O operations in Node.js, it delegates these operations to the Web APIs (in the browser) or Node APIs (in Node.js).
Callback Queue: After the asynchronous operation is complete, the callback (the function that was passed as an argument) is added to the callback queue.

Event Loop:

The event loop constantly monitors the call stack and the callback queue. If the call stack is empty (i.e., all synchronous code has been executed), the event loop pushes the first callback from the queue onto the call stack for execution.

This process allows JavaScript to initiate tasks, move on to other tasks, and later return to handle the results of those tasks without blocking the execution of the main thread.

Now, let us understand with the help of the example:

console.log("Start");

setTimeout(() => {
console.log("This is asynchronous.");
}, 2000);

console.log("End");
Output

Start
End
This is asynchronous.

In this example:

The first console.log("Start") is executed and removed from the stack.

The setTimeout() function is encountered and placed in the call stack. It sets the callback function to await in the Web API (which handles the asynchronous operation), then the setTimeout() function is popped off the stack.

The third console.log("End") is pushed onto the stack and executed, and then it's popped off.

After 2 seconds, the callback function passed to setTimeout() is moved to the Callback Queue (or Event Queue), where it waits for the call stack to be empty.
The Event Loop checks if the call stack is empty. Once it is, the callback function is pushed to the call stack, executed, and printed as "This is asynchronous".