Why JavaScript is a single-thread language that can be non-blocking ?
Last Updated :
18 Jan, 2023
The JavaScript within a chrome browser is implemented by a V8 engine.
Memory Heap: It is used to allocate the memory used by your JavaScript program. Remember memory heap is not the same as the heap data structures, they are totally different. It is the free space inside your OS.
Call Stack: Within the call stack, your JS code is read and gets executed line by line.
Now, JavaScript is a single-threaded language, which means it has only one call stack that is used to execute the program. The call stack is the same as the stack data structure that you might read in Data structures. As we know stacks are FILO that is First In Last Out. Similarly, within the call stack, whenever a line of code gets inside the call stack it gets executed and moves out of the stack. In this way, JavaScript is a single-thread language because of only one call stack.
JavaScript is a single-threaded language because while running code on a single thread, it can be really easy to implement as we don’t have to deal with the complicated scenarios that arise in the multi-threaded environment like a deadlock.
Since JavaScript is a single-threaded language, it is synchronous in nature. Now, you will wonder if you have used async calls in JavaScript so is it possible then?
So, let me explain to you the concept of async calls within JavaScript and how it is possible with single-threaded language. Before explaining it let’s discuss briefly why we require the async call or asynchronous calls. As we know within the synchronous calls, all the work is done line by line i.e. the first task is executed then the second task is executed, no matter how much time one task will take. This arises the problem of time wastage as well as resource wastage. These two problems are overcome by asynchronous calls, where one doesn’t wait for one call to complete instead it runs another task simultaneously. So, when we have to do things like image processing or making requests over the network like API calls, we use async calls.
Now, coming back to the previous question of how to use async calls within JS. Within JS we have a lexical environment, syntax parser, and an execution context (memory heap and call stack) that is used to execute the JS code. But these browsers also have Event Loops, Callback queue, and WebAPIs that are also used to run the JS code. Although these are not part of JS it also helps to execute the JS properly as we sometimes used the browser functions within the JS.
JavaScript RunTime Environment
As you can see in the above diagram, DOM, AJAX, and Timeout are not actually part of JavaScript but part of RunTime Environment or browser, so these can be run asynchronously within the WebAPI using the callback queue and again put in the call stack using event loop to execute.
Example: Let us take an example to be very clear of the concept. Suppose we have the following piece of code that we want to execute in the JS run-time environment.
javascript
<script>
console.log('A');
setTimeout(() => {
console.log('B');
}, 3000);
console.log('C');
</script>
|
Output:
A
C
B
Let’s see why this happens as JavaScript is a single-threaded language so, the output should be A B C but it is not.
When JS tries to execute the above program, it places the first statement in the call stack which gets executed and prints A in the console and it gets to pop out of the stack. Now, it places the second statement in the call stack and when it tries to execute the statement, it finds out that setTimeout() doesn’t belong to JS so it pops out the function and puts in the WebAPI to get executed there. Since the call stack is now again empty, it places the third statement in the stack and executes it thus printing C in the console.
In the meanwhile, the WebAPI executes the timeout function and places the code in the callback queue. The event loop checks if the call stack is empty or not or whether there is any statement in the callback queue that needs to be executed all the time. As soon as the event loop checks that the call stack is empty and there is something in the callback queue that needs to be executed, it places the statement in the call stack and the call stack executes the statement and prints B in the console of the browser.
Similar Reads
Why Node.js is a Single Threaded Language ?
Node.js is a popular runtime environment that allows developers to build scalable network applications using JavaScript. One of the most distinctive features of Node.js is its single-threaded architecture, which often raises questions among new developers about why it was designed this way. This art
4 min read
How the Single Threaded Non Blocking IO Model Works in NodeJS ?
Node.js has revolutionized the way server-side applications are built by introducing a unique single-threaded, non-blocking I/O model. This model provides significant advantages in terms of performance and scalability, particularly for I/O-bound operations. In this article, we will delve into how th
4 min read
Is Node.js entirely based on a single-thread ?
Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. In this article, we'll try to dig a little deeper and understand if Node.js is entirely based on a single thread. However, before starting out, let's clear a few of our basics: Process:
4 min read
How to run a function in a separate thread by using a Web Worker in JavaScript ?
JavaScript is a popular lightweight, interpreted compiled client-side scripting language. Most Web Applications use JavaScript on the client side. By providing JavaScript with a runtime environment, it can also be used on the server-side (Node.js). In this article, we will cover how to run a functio
3 min read
Why Node.js is famous over other environments in JavaScript ?
Node.js is a platform that allows developers to build web applications with JavaScript. It is particularly useful for building real-time, high-concurrency applications, such as chat systems, online games, and real-time data processing pipelines. Let me explain to you node.js in a more fun and simple
5 min read
What is An Event Loop in JavaScript?
The event loop is an important concept in JavaScript that enables asynchronous programming by handling tasks efficiently. Since JavaScript is single-threaded, it uses the event loop to manage the execution of multiple tasks without blocking the main thread. [GFGTABS] JavaScript console.log("Sta
4 min read
What are the Pros and Cons of JavaScript Frameworks ?
JavaScript is the most widely used language in the field of development over the world. For more than 25 years JavaScript Frameworks have been driving the web. But JavaScript code has been gently processed in JavaScript frameworks at least over the last decade. In this article, I will elaborate on J
10 min read
If Node.js is single threaded then how to handles concurrency ?
Node js is an open-source virtual machine that uses javascript as its scripting language. Despite being single-threaded, it is one of the most popular web technologies. The reason why node js is popular despite being single-threaded is the asynchronous nature that makes it possible to handle concurr
4 min read
How JavaScript works and code is executed behind the scene ?
JavaScript is an interesting language in the world and its working procedure quite be different from other languages. JavaScript is synchronous(specific order of execution), single-threaded language(it means JavaScript can only execute one command at a time). Everything in JavaScript happens insides
3 min read
Explain the concept of non-blocking I/O in Node
In traditional synchronous programming models, I/O operations such as reading from a file or making network requests block the execution of the program until the operation completes. This means that if there are multiple I/O operations, they are processed sequentially, leading to potential bottlenec
3 min read