DEV Community

Himanshu Gupta
Himanshu Gupta

Posted on

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

🧠 What Is Execution Context?

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)