DEV Community

Himanshu Gupta
Himanshu Gupta

Posted on

EP-01 | How JavaScript Works πŸ”₯& Execution Context

🧠 What Is Execution Context? (Simple Words)

Think of the execution context like a classroom where JavaScript works.

In this classroom:

There is a whiteboard where all important notes (variables & functions) are written β†’ Memory Component

There is a teacher who reads and executes each instruction one-by-one β†’ Thread of Execution

πŸ“Œ 1. Memory Component (Variable Environment)
🧠 Simple Meaning:

A place where JavaScript stores data before running the code.

πŸŽ’ Real-Life Example:

Imagine you enter a classroom and the teacher writes names on the board:

studentName = "Ali"

age = 10

greet = function(){...}

The whiteboard is the memory component, storing data before the lesson starts.

πŸ“Œ 2. Code Component (Thread of Execution)
🧠 Simple Meaning:

The part where JavaScript executes code line by line, like a teacher reading instructions one after another.

πŸŽ’ Real-Life Example:

After writing on the whiteboard (memory),
the teacher starts reading the notebook:

Say hello to the students

Explain the lesson

Ask a question

Wait for an answer

Move to next instruction

The teacher cannot read two lines at the same time.

That is the thread of execution.

πŸ“Œ 3. JavaScript Is Synchronous & Single-Threaded
🧠 Simple Meaning:

JavaScript does ONE thing at a time and in order.

πŸŽ’ Real-Life Example:

Imagine a student reading a book aloud.

They must finish one sentence before starting the next.

They cannot read two sentences at the same time.

That’s how JavaScript worksβ€”step-by-step, one-by-one.

πŸ’‘ Full Real-Life Example Putting It All Together
`Code:
var name = "Sara";
function sayHi() {
console.log("Hi " + name);
}

sayHi();`

🧠 Real-Life Breakdown:

Memory Component (Whiteboard)

name: "Sara"

sayHi: function

Thread of Execution (Teacher reading steps)

Goes to sayHi()

Executes it β†’ prints "Hi Sara"

JavaScript finishes this before moving to the next line.

Top comments (0)