Member-only story
JavaScript, Single-Threaded but Non-Blocking
Those who just got in touch with JavaScript might be confused when people say that JavaScript is a single-threaded and non-blocking programming language. You might be thinking how could one be single-threaded but non-blocking?
Single-Threaded
JavaScript is known to be single-threaded because of its property of having only one call stack, which some other programming languages have multiple. JavaScript functions are executed on the call stack, by LIFO (Last In First Out). For example, we have a piece of code like this:
const foo = () => {
const bar = () => {
console.trace();
}
bar();
}foo();
And the call stack will have foo to enter into the call stack, then bar.
After bar() is done, it will be popped off from the call stack, followed by foo(). You will see an anonymous function underneath when printing out the stack trace, which is the main thread's global execution context.
This seems to be logical as JavaScript is a single-threaded language and there is only a single flow to execute all these functions. However, in the case that we are having some unpredictable or heavy tasks in the flow (for example making an API call), we do not want them to block the execution of the remaining codes (else users might be staring at a frozen screen). This is where the asynchronous JavaScript comes in.
Non-Blocking
Other than JavaScript Engine, we also have Web APIs, Callback Queue, and Event Loop to form JavaScript runtime in the browser. Let’s say we have a piece of code here:
console.log("1")
setTimeout(() => console.log("2"), 5000)
console.log("3")“setTimeout” is a Web API function that will execute a callback function after a certain amount of time (in milliseconds, in this case, is 5000 milliseconds). When you execute this script, you will see that “1” and “3” are printed out instantly, and “2” is printed out around 5 seconds later.
