JavaScript is single-threaded, then how does it manage time-consuming tasks like downloading?

JavaScript supports synchronous execution of code (JS will execute everything one after another. If You have some time-consuming task, JS will wait for it to complete and then only move forward ).

function time_consuming(){
    for(let i = 0; i < 100000000; i++){

    }
    console.log("Start");
    time_consuming();
    console.log("End");
}

In this above piece of code, JS is running everything one after another. The for loop is a blocking piece of code. So JS has to wait for it to be complete before it can move forward. That means this time-consuming loop is not getting executed in a parallel fashion. It isis blocking our main thread.

The above statement of synchronous execution is only applicable to those piece of code which is native and known to JavaScript. ex loop, variables, functions.

Now you must be thinking, is there anything that JS doesn't know navtively? Yes, for example, the setTimeout function. You can execute it in your browser's Js Console. But this function is nowhere mentioned in the official JS docs. That means official JS is not shipped with this function. JS is somehow able to execute it But is not native to JS.

So the above blocking behaviors or synchronous behaviors will not be shown for nonnative features.

function time_consuming(){
    console.log("Start");
    setTimeout(function f(){
        console.log("Timer Complete");
    }, 10000);
    console.log("End");
}

In this piece of code, JS doen't wait for the timer to get complete in 10s and instead moves forward giving you an output like;

Start
End
Timer Complete

Now you should be getting two questions in your mind.

If setTimeout is not native and knows JS, How come it can execute it?
And how does handle the execution of these nonnative features? Does it become unpredictable?

To understand how exactly JS is running nonnative functions. We need to, first of all, understand where these are coming up.

Runtime Environment

A runtime environment is where your code/program will be executed and while executing this environment is going to provide multiple different aids to add more functionalities to our code. This runtime environment understands how the code should be run and what capabilities might be useful for the program during runtime.

For example:- We can run our JS code in a browser, here browser is a runtime environment. The browser provides additional capabilities for JS to run efficiently and be more productive. The browser provides JS functionalities.

Functionalities like setTimout or setInterval are provided to JS through the browser runtime.
The browser also gives JS functionality to download some data over the network, using fetch and XMLHttpRequest.
The browser also provides capabilities using which JS can interact with the DOM or HTML.
Similarly to the browser, we have another runtime environment as well where we can run JS. For ex:- NodeJs
NodeJs is neither a language nor a framework instead it is a Runtime environment.
Now NodeJs is a different runtime. It will be having different behavior than the browser. Because now we are not running JS in the browser. So there is no point in giving browser-based functionalities like reading HTML. Instead, we give it other functionalities.
Inside NodeJs. JS will be able to read files from our file system.
It gives access to process-level details.

Apart from some new Functionalities, there can some similar functionalities also. NodeJs also provide access to timers.

Note:-

As I said that functionalities can be similar they are not necessarily same. That's why if you run setTimeout in the browser it returns you an Id for the timer which is a Number, whereas in NodeJs it returns an object.

Even two different browsers can act as two different runtimes. Although nowadays most of the functionalities are consistent in major browsers.
For more information connect with us and follow.

Characteristics of JavaScript:

Runtime Environment

Note:-