How JavaScript Works

Understanding how JavaScript runs behind the scenes will help you write better code and debug more efficiently. Let's break it down!



JavaScript is Single-Threaded

JavaScript uses a single-threaded model, meaning it can do one thing at a time. It follows a synchronous execution model, but thanks to features like callbacks, promises, and async/await, it can handle asynchronous operations efficiently.



The JavaScript Runtime Environment

JavaScript doesn’t work alone — it runs inside an environment (usually the browser or Node.js). Here’s what that environment includes:


1. JavaScript Engine

  • Compiles and executes your code.

2. Web APIs

  • These are features provided by the browser, like setTimeout, DOM, fetch, etc. JavaScript itself doesn’t know how to handle these, so it relies on the browser.

3. Callback Queue

  • Stores async callbacks (like setTimeout, event listeners) that wait to be executed.

4. Event Loop

  • Constantly checks if the call stack is empty. If it is, it pushes a task from the callback queue to the stack.


Execution Flow

Here's a simplified flow of how JS runs code:

  • Code goes to the Call Stack
  • JavaScript runs functions one by one, from top to bottom.
  • If it hits a Web API (e.g., setTimeout), it sends the task to the Web API and continues.
  • Once the Web API finishes, the callback is sent to the Callback Queue.
  • The Event Loop checks if the call stack is empty. If so, it pushes the callback to the call stack and runs it.


Example

console.log("Start");

setTimeout(() => {
  console.log("Inside setTimeout");
}, 0);

console.log("End");

Output

Start
End
Inside setTimeout

Even though the setTimeout delay is 0, it runs last because it goes through the Web API and Callback Queue.