How JavaScript Works Internally Beginner-Friendly Guide

If you've ever been asked questions like:

• Why is JavaScript called single-threaded?

• Why does setTimeout(..., 0) run later?

• What is the Call Stack?

• What are the Task Queue and Microtask Queue?

• What does the Event Loop actually do?

then you're in the right place.

These are some of the most common JavaScript interview questions, and they often confuse beginners because many tutorials explain them using complicated terms.

In this article, we'll understand how JavaScript executes code internally in the simplest way possible. By the end, you'll not only understand the concepts but also be able to explain them confidently in interviews.

Let's begin.

What Happens When You Run JavaScript?

Whether you run JavaScript in a browser or in Node.js, the execution process follows the same basic idea.

JavaScript Code
       ↓
JavaScript Engine
       ↓
Execution Context
       ↓
Call Stack
       ↓
Code Starts Executing

The JavaScript engine (like V8 in Chrome and Node.js) reads your code, creates an execution environment, and starts executing it line by line.

Before we understand asynchronous JavaScript, we first need to understand how synchronous code works.

What is an Execution Context?

An Execution Context is simply the environment where JavaScript executes your code.

Whenever JavaScript starts running a file, it creates a Global Execution Context.

It has two phases:

Phase	What Happens
Memory Creation Phase	Variables and functions are stored in memory.
Execution Phase	JavaScript executes the code line by line.

Think of it like preparing a classroom before teaching begins.

• First, all the students enter the classroom (Memory Phase).

• Then, the teacher starts teaching (Execution Phase).

The Call Stack

The Call Stack is one of the most important concepts in JavaScript.

It is responsible for executing JavaScript code.

Whenever JavaScript wants to execute something, it pushes it into the Call Stack.

The Call Stack follows the LIFO (Last In, First Out) rule.

For example:

console.log("A");
console.log("B");
console.log("C");

Execution happens like this:

Push A
↓

Execute A
↓

Pop A
↓

Push B
↓

Execute B
↓

Pop B
↓

Push C
↓

Execute C
↓

Pop C

Output:

A
B
C

The Call Stack executes only one operation at a time.

Why is JavaScript Single-Threaded?

This is probably the most asked interview question.

JavaScript has one Call Stack, which means it executes one piece of JavaScript code at a time.

Imagine a restaurant with only one chef.

Customers
   │
   ▼
👨‍🍳 One Chef

The chef cannot cook five dishes at the same time.

He finishes one order before starting the next.

JavaScript works exactly the same way.

One Call Stack = One Thread = One JavaScript operation at a time.

This is why JavaScript is called single-threaded.

Then How Does JavaScript Handle Asynchronous Code?

Consider this example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 2000);

console.log("End");

Most beginners expect JavaScript to wait for two seconds.

But the output is:

Start
End
Timeout

Why?

Because JavaScript itself doesn't wait.

Instead, it delegates asynchronous work to the environment (Browser APIs or Node.js APIs).

The execution looks like this:

Call Stack
      │
      ▼
setTimeout()
      │
      ▼
Browser / Node API
      │
      ▼
Timer Starts
      │
      ▼
Call Stack Continues

While the timer is running, JavaScript continues executing the remaining code.

That's why "End" prints immediately.

Is setTimeout Part of JavaScript?

This is one of the biggest misconceptions.

No.

setTimeout() is not part of the JavaScript language.

It is provided by the environment.

Environment	Provides
Browser	Web APIs
Node.js	Node APIs

When JavaScript sees setTimeout(), it asks the browser (or Node.js) to handle the timer.

JavaScript itself never manages timers.

What Happens After the Timer Finishes?

When the timer completes, the callback does not go directly into the Call Stack.

Instead, it goes into a queue called the Task Queue.

You might also hear different names for the same queue.

Name	Meaning
Task Queue	Same
Callback Queue	Same
Macrotask Queue	Same

All three names usually refer to the same queue.

So if an interviewer says Callback Queue, Task Queue, or Macrotask Queue, don't get confused.

They're talking about the same thing.

Then What is the Event Loop?

Now imagine the callback is waiting inside the Task Queue.

Who moves it back to the Call Stack?

The answer is the Event Loop.

The Event Loop continuously checks two things:

1. Is the Call Stack empty?

2. Is there any callback waiting?

If the Call Stack is empty, it moves the callback from the queue into the Call Stack.

A simple mental model looks like this:

while (true) {

    Is Call Stack Empty?

        Yes

          ↓

    Run Microtasks

          ↓

    Run One Task
}

This isn't the real implementation, but it's a great way to understand how the Event Loop behaves.

Microtask Queue vs Task Queue

JavaScript actually has two queues.

                Event Loop
                     │
         ┌───────────┴───────────┐
         │                       │
         ▼                       ▼
Microtask Queue           Task Queue
   (Higher Priority)     (Lower Priority)

The Microtask Queue has higher priority than the Task Queue.

Microtask Queue

Examples:

• Promise.then()

• Promise.catch()

• Promise.finally()

• queueMicrotask()

Task Queue

Examples:

• setTimeout()

• setInterval()

• DOM Events

• MessageChannel

This priority difference is very important for interviews.

Let's Understand with an Example

console.log("Start");

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

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

What do you think the output will be?

It is:

Start
End
Promise
Timeout

Let's understand why.

Step 1

JavaScript executes the synchronous code.

Output:

Start
End

Step 2

The Promise callback goes into the Microtask Queue.

The setTimeout callback goes into the Task Queue.

Current state:

Microtask Queue

Promise

Task Queue

Timeout

Step 3

The Event Loop checks the queues.

It always executes all Microtasks first.

So JavaScript executes:

Promise

Step 4

Now the Microtask Queue is empty.

The Event Loop takes one callback from the Task Queue.

Timeout

Final output:

Start
End
Promise
Timeout

This is why Promises always execute before setTimeout() callbacks, even when the timeout is 0.

Complete JavaScript Execution Flow

Here's the complete picture.

JavaScript Code
        │
        ▼
Execution Context
        │
        ▼
Call Stack
        │
        ▼
Async Operation?
        │
   ┌────┴────┐
   │         │
 No         Yes
   │         │
Execute   Browser / Node API
             │
             ▼
      Operation Completes
             │
             ▼
      Queue (Microtask / Task)
             │
             ▼
         Event Loop
             │
             ▼
        Call Stack
             │
             ▼
          Output

Quick Interview Tips

1. Is JavaScript Single-Threaded?

Yes.

JavaScript has only one Call Stack and executes one operation at a time.

2. Does JavaScript Handle Timers?

No.

Timers are handled by Browser APIs or Node.js APIs.

3. Does setTimeout(..., 0) Run Immediately?

No.

It first enters the Task Queue and waits until the Call Stack is empty.

4. Which Queue Has Higher Priority?

The Microtask Queue.

All pending microtasks execute before the Event Loop processes the next task from the Task Queue.

5. Are Task Queue, Callback Queue, and Macrotask Queue Different?

No.

Most of the time, these are simply different names for the same queue.

JavaScript Execution Cheat Sheet

Concept	Remember This
JavaScript	Single-threaded language
Execution Context	Environment where code runs
Call Stack	Executes synchronous JavaScript code
Browser APIs / Node APIs	Handle asynchronous operations
Task Queue	Stores callbacks from setTimeout, setInterval, DOM events
Callback Queue	Another name for Task Queue
Macrotask Queue	Another name for Task Queue
Microtask Queue	Stores Promise callbacks and queueMicrotask()
Event Loop	Moves callbacks into the Call Stack when it becomes empty
Execution Order	Synchronous Code → All Microtasks → One Task → Repeat

Conclusion

Understanding JavaScript execution isn't about memorizing definitions—it's about understanding the flow.

Every JavaScript program follows the same lifecycle:

1. JavaScript creates an Execution Context.

2. Code starts executing inside the Call Stack.

3. Asynchronous operations are delegated to the environment.

4. Completed callbacks are placed into either the Microtask Queue or the Task Queue.

5. The Event Loop waits for the Call Stack to become empty, executes all pending microtasks, then processes one task, and repeats the cycle.

Once you understand this flow, concepts like Promises, async/await, the Event Loop, setTimeout, and asynchronous programming become much easier to reason about.

If you're preparing for JavaScript interviews, mastering these concepts will help you answer some of the most frequently asked questions with confidence.