An execution context is a container with a memory side (variable environment) and a code side (thread of execution). JavaScript creates one for every program and every function call.

Think of the execution context as a workshop table with two sides. On the left side, you have a drawer where you store all your tools and labels (variables and functions). On the right side, you have the actual workspace where you do the work (run the code). JavaScript always sets up both sides before it starts working.

The two components:

// Every execution context has two parts:

// 1. Memory Component (Variable Environment)
//    - Stores variables and functions as key-value pairs
//    - Like a dictionary: name -> value

// 2. Code Component (Thread of Execution)
//    - Where your code runs, line by line
//    - Only one line executes at a time

What this looks like in practice:

var name = "Sarah";
var age = 25;

function greet() {
  console.log("Hello!");
}

// Behind the scenes, JS created a container like this:
// MEMORY SIDE          | CODE SIDE
// name: "Sarah"        | (runs line by line)
// age: 25              |
// greet: function(){..}|

Key Insight: JavaScript is a synchronous, single-threaded language. That means it does one thing at a time, in order. It finishes the current line before moving to the next. No multitasking, no skipping ahead. This is why understanding the execution context matters so much: it is the stage where everything happens, one step at a time.

If the memory component is your toolbox, the code component is the assembly line. JavaScript picks up one instruction, completes it, then moves to the next. No parallel processing. No jumping around.

One line at a time:

console.log("Step 1");  // Runs first
console.log("Step 2");  // Runs second
console.log("Step 3");  // Runs third

// Output:
// Step 1
// Step 2
// Step 3
// Always in this exact order. Always.

Why single-threaded matters:

// JavaScript has ONE thread of execution
// Think of it as one worker on one assembly line

var total = 0;       // Worker does this first
total = total + 10;  // Then this
total = total + 20;  // Then this
console.log(total);  // Then this -> 30

// The worker NEVER does two things at the same time
// Each line MUST finish before the next one starts

Synchronous means predictable:

var a = 5;
var b = 10;
var result = a + b;
console.log(result);  // 15

// You can trace through this code with your finger
// and predict exactly what happens at every step.
// That predictability is the power of synchronous execution.

Key Insight: "Synchronous single-threaded" sounds like a limitation, but it is actually what makes JavaScript predictable and easier to reason about. When your code has a bug, you can trace it line by line because you know exactly what order things happened. This is the Thread of Execution, and it never lies.

Before your code even starts running, JavaScript scans through it and reserves memory for every variable and function it finds. This is the memory creation step, and it happens before a single line of your code executes.

How JavaScript stores things in memory:

var score = 100;
var player = "Alex";

function celebrate() {
  console.log("You won!");
}

// Memory Component looks like this:
// KEY        | VALUE
// score      | 100
// player     | "Alex"
// celebrate  | function() { console.log("You won!"); }

Variables get stored as key-value pairs:

// Think of it like a dictionary or a contacts list:
// Variable name = the KEY (the label)
// Variable value = the VALUE (what it holds)

var city = "Tokyo";
// KEY: city
// VALUE: "Tokyo"

var temperature = 28;
// KEY: temperature
// VALUE: 28

Key Insight: The memory component is also called the Variable Environment. Every variable you create, every function you write, they all get a slot in this environment. When JavaScript needs to use a variable later, it looks it up here by name. If the name is not in this environment, you get an error.