EP-01 | How JavaScript Works 🔥& Execution Context

Source: Dev.to

What Is Execution Context? (Simple Words)

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

In this classroom:

• Whiteboard – where all important notes (variables & functions) are written → Memory Component
• Teacher – 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:

1. Say hello to the students
2. Explain the lesson
3. Ask a question
4. Wait for an answer
5. 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 simultaneously. That’s how JavaScript works—step‑by‑step, one‑by‑one.

Full Real‑Life Example Putting It All Together

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)
  1. Goes to sayHi()
  2. Executes it → prints "Hi Sara"

JavaScript finishes this before moving to the next line.