Global execution context in Javascript - Deep Dive

Overview - Global execution context

What is it?

The global execution context is the first environment created when a JavaScript program runs. It sets up the space where all your code starts executing. This context holds global variables, functions, and the special object called 'global' or 'window' in browsers. It stays active as long as your program runs.

Why it matters

Without the global execution context, JavaScript wouldn't know where to start running your code or how to organize variables and functions. It acts like the main stage where everything begins. If it didn't exist, your code would have no place to live or run, making programming impossible.

Where it fits

Before learning about the global execution context, you should understand basic JavaScript syntax and variables. After this, you can learn about function execution contexts, the call stack, and how JavaScript manages memory and scope.

Mental Model

Core Idea

The global execution context is the main workspace where JavaScript starts running your code and keeps track of all global variables and functions.

Think of it like...

Imagine the global execution context as the main office in a company where all employees (variables and functions) are registered and managed before they start working in their departments (functions).

┌───────────────────────────────┐
│       Global Execution Context │
│ ┌───────────────┐             │
│ │ Global Object │             │
│ └───────────────┘             │
│ ┌───────────────┐             │
│ │ Global Scope  │             │
│ │ (variables &  │             │
│ │  functions)   │             │
│ └───────────────┘             │
└───────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is an execution context

Concept: Execution context is the environment where JavaScript code runs and variables/functions are stored.

When JavaScript runs, it creates an environment called an execution context. This environment keeps track of variables, functions, and the order of execution. The very first one created is the global execution context.

Result

You understand that code runs inside a container that holds variables and functions.

Understanding execution context is key to grasping how JavaScript organizes and runs code step-by-step.

2

Foundation

Global execution context basics

Concept: The global execution context is created first and holds global variables and functions.

When your JavaScript program starts, the global execution context is created. It sets up the global object (like 'window' in browsers) and prepares the global scope where all global variables and functions live.

Result

You know where global variables and functions are stored and that this context lasts for the whole program.

Knowing the global context lasts throughout the program helps you understand variable lifetime and scope.

3

Intermediate

Creation and execution phases

🤔Before reading on: do you think JavaScript runs your code line-by-line immediately, or does it prepare something first? Commit to your answer.

Concept: The global execution context has two phases: creation and execution.

First, JavaScript creates the global execution context by setting up the global object, creating the 'this' keyword, and allocating memory for variables and functions (hoisting). Then, it runs your code line-by-line, assigning values and executing functions.

Result

You understand why variables can be used before they are declared (hoisting) and how the global context prepares for execution.

Recognizing the two phases explains many confusing behaviors like hoisting and 'this' binding.

4

Intermediate

Global object and 'this' keyword

🤔Before reading on: does 'this' inside global code refer to the global object or something else? Commit to your answer.

Concept: 'this' in the global execution context points to the global object.

In the global execution context, the 'this' keyword refers to the global object (window in browsers, global in Node.js). This means you can access global variables and functions as properties of 'this'.

Result

You can predict what 'this' means in global code and how global variables relate to the global object.

Understanding 'this' in the global context helps avoid bugs when accessing or modifying global variables.

5

Intermediate

Global execution context and the call stack

🤔Before reading on: do you think the global execution context stays on the call stack or is removed after starting? Commit to your answer.

Concept: The global execution context is the bottom of the call stack and stays there until the program ends.

JavaScript uses a call stack to manage execution contexts. The global execution context is pushed first and remains at the bottom. When functions run, their contexts are pushed on top and popped off when done, but the global context stays until the program finishes.

Result

You understand how JavaScript tracks running code and why the global context never disappears during execution.

Knowing the global context stays on the stack clarifies how nested function calls work and how scope chains form.

6

Advanced

Hoisting in the global context

🤔Before reading on: do you think function declarations and variable declarations behave the same during hoisting? Commit to your answer.

Concept: Function declarations and variable declarations are hoisted differently in the global execution context.

During the creation phase, function declarations are fully hoisted with their definitions, so you can call them before they appear in code. Variables declared with 'var' are hoisted but initialized as undefined until assignment. Variables declared with 'let' and 'const' are not accessible before declaration (temporal dead zone).

Result

You can predict when and how variables and functions are available in global code.

Understanding hoisting differences prevents common bugs with undefined variables or calling functions too early.

7

Expert

Global context in strict mode and modules

🤔Before reading on: does 'this' in the global context always point to the global object, even in strict mode or modules? Commit to your answer.

Concept: Strict mode and ES modules change the behavior of the global execution context, especially 'this' and variable declarations.

In strict mode, 'this' in the global context is undefined instead of the global object, preventing accidental global variable creation. ES modules have their own module scope, so variables are not added to the global object. This changes how the global execution context behaves compared to classic scripts.

Result

You understand how modern JavaScript environments modify the global context for safer and modular code.

Knowing these differences helps write secure, modular code and avoid subtle bugs with 'this' and globals.

Under the Hood

When JavaScript starts, it creates the global execution context which includes the global object, the global scope, and the 'this' binding. It first runs a creation phase where it scans the code to allocate memory for variables and functions (hoisting). Then it executes code line-by-line, updating variable values and running functions. The global context stays active on the call stack throughout the program's life, serving as the base environment for all code execution.

Why designed this way?

JavaScript was designed to have a single global environment to simplify starting code execution and managing global variables. This design allows easy access to global data and functions but also requires careful handling to avoid conflicts. The two-phase approach (creation and execution) was chosen to support hoisting, making code more flexible and forgiving for beginners.

┌───────────────────────────────┐
│ Global Execution Context       │
│ ┌───────────────┐             │
│ │ Creation     │             │
│ │ Phase:       │             │
│ │ - Setup global│             │
│ │   object     │             │
│ │ - Hoist vars │             │
│ │   & funcs    │             │
│ └───────────────┘             │
│           │                   │
│           ▼                   │
│ ┌───────────────┐             │
│ │ Execution    │             │
│ │ Phase:       │             │
│ │ - Run code   │             │
│ │ - Assign vals│             │
│ │ - Call funcs │             │
│ └───────────────┘             │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does 'this' in global code always point to the global object? Commit yes or no.

Common Belief: 'this' in global code always points to the global object (window or global).

Reality: In strict mode or ES modules, 'this' in global code is undefined, not the global object.

Why it matters: Assuming 'this' is always global can cause bugs when code runs in strict mode or modules, leading to unexpected errors or undefined values.

Quick: Are variables declared with let and const hoisted like var? Commit yes or no.

Common Belief: All variables are hoisted and accessible before declaration.

Reality: Variables declared with let and const are hoisted but not initialized, causing a temporal dead zone where accessing them before declaration throws an error.

Why it matters: Misunderstanding this leads to runtime errors and confusion about variable availability.

Quick: Does the global execution context get removed from the call stack after starting? Commit yes or no.

Common Belief: The global execution context is removed from the call stack once code starts running.

Reality: The global execution context stays at the bottom of the call stack until the program ends.

Why it matters: Thinking it disappears can confuse learners about how nested function calls and scope chains work.

Quick: Are function declarations and variable declarations treated the same during hoisting? Commit yes or no.

Common Belief: Function declarations and variable declarations behave the same during hoisting.

Reality: Function declarations are hoisted with their full definitions, while variables declared with var are hoisted but initialized as undefined.

Why it matters: Confusing these causes bugs like calling undefined variables or overwriting functions unintentionally.

Expert Zone

1

In browsers, the global object is 'window', but in Node.js it's 'global', affecting how global variables behave across environments.

2

The global execution context's scope chain includes only the global scope, but nested function contexts build on top, creating layered scopes.

3

Strict mode disables some default behaviors in the global context, like creating implicit globals, improving code safety but changing legacy assumptions.

When NOT to use

Relying heavily on the global execution context for storing data is discouraged in large applications because it can cause naming conflicts and hard-to-track bugs. Instead, use modules, closures, or classes to encapsulate data and avoid polluting the global scope.

Production Patterns

In real-world code, developers minimize global variables and use module systems (like ES modules or CommonJS) to create isolated scopes. The global execution context mainly serves as the starting point, while most logic runs inside functions or modules to keep code organized and maintainable.

Connections

Call stack

The global execution context is the base frame on the call stack.

Understanding the global context as the bottom of the call stack clarifies how JavaScript manages nested function calls and execution order.

Scope chain

The global execution context provides the global scope at the root of the scope chain.

Knowing the global scope anchors the scope chain helps explain how variable lookup works across nested functions.

Operating system process environment

Both provide a global environment where programs or scripts start and manage resources.

Seeing the global execution context like an OS process environment helps understand how code execution contexts isolate and manage resources.

Common Pitfalls

#1 Using 'this' in global code assuming it always points to the global object.

Wrong approach:

'use strict';
console.log(this.someVar); // Error: Cannot read property 'someVar' of undefined

Correct approach:

var someVar = 5;
console.log(window.someVar); // 5 (in browsers, accessing global object explicitly)

Root cause:

Misunderstanding that 'this' is undefined in strict mode global code, not the global object.

#2 Accessing let or const variables before declaration causing runtime errors.

Wrong approach:

console.log(myVar); // ReferenceError
let myVar = 10;

Correct approach:

let myVar = 10;
console.log(myVar); // 10

Root cause:

Not knowing about the temporal dead zone for let and const variables.

#3 Declaring global variables without var, let, or const, creating implicit globals.

Wrong approach:

function foo() {
x = 10; // creates global variable unintentionally
}
foo();
console.log(x); // 10

Correct approach:

function foo() {
let x = 10; // local variable
}
foo();
console.log(typeof x); // undefined

Root cause:

Not using strict mode and misunderstanding variable declaration scope.

Key Takeaways

The global execution context is the first environment JavaScript creates to run your code and holds all global variables and functions.

It has two phases: creation (setting up variables and functions) and execution (running code line-by-line).

'this' in the global context usually points to the global object, but in strict mode or modules, it can be undefined.

Hoisting means function declarations and var variables are moved to the top during creation, but let and const behave differently.

The global execution context stays on the call stack throughout the program, serving as the base for all other execution contexts.