JavaScript, the language, is not single-threaded, and there exist multi-threaded environments that run JavaScript (for instance, the Java virtual machine via its scripting support). The language itself is largely silent on the topic of threads. It does define a job queue (browser-oriented folks call it an "event loop") and run-to-completion semantics for jobs (see Jobs and Job Queues in the spec). More on that in a moment.
However, most environments (including browsers) run one thread per global environment (or sometimes one thread for multiple global environments), which is why "JavaScript is single-threaded" is so commonly believed. But even on browsers, you can have multiple threads via web workers. They do not share a common global environment, with all the complications that causes, but they can communicate.
Back to your question:
Running on a single thread and having asynchronous callbacks are not at all in conflict. A JavaScript thread works on the basis of a job queue that jobs get added to. A job is a unit of code that runs to completion. When that unit of code is done running to completion, the thread picks up the next job from the queue and runs that. One job cannot interrupt another job (spec link). Jobs running on the main UI thread cannot be suspended in the middle (mostly¹), though jobs on worker threads can be (via Atomics.wait
). A thread with a suspended job is completely suspended, it does not pick up other jobs from its queue until it's resumed and completes the job that was suspend.
So for instance, consider:
console.log("one");
setTimeout(function() {
console.log("three");
}, 10);
console.log("two");
When you run that, you see
one
two
three
in the console. Here's what happened:
- A job for the main script execution was added to the job queue
- The main JavaScript thread for the browser picked up that job
- It ran the first
console.log
, setTimeout
, and last console.log
- The job terminated
- The main JavaScript thread idled for a bit
- The browser's timer mechanism determined that it was time for that
setTimeout
callback and added a job to the job queue to run it
- The main JavaScript thread picked up that job and ran that final
console.log
If the main JavaScript thread were tied up (for instance, while (true);
), jobs would just pile up in the queue and never get processed, because that job never completes.
¹ "A job is a unit of code that runs to completion." and "A job cannot be suspended in the middle..." Two caveats here:
alert
, confirm
, and prompt
— those 90's synchronous user interactions — suspend a job on the main UI thread while waiting on the user. This is antiquated behavior that's grandfathered in (and is being at least partially phased out).
Naturally, the host process — browser, etc. — can terminate the entire environment a job is running in while the job is running. For instance, when a web page becomes "unresponsive," the browser can kill it. But that's not just the job, it's the entire environment the job was running in.