JavaScript Execution
function greet(name) {
let greeting = "Hello";
function sayHi() {
let message = greeting + " " + name;
console.log(message);
}
sayHi();
}
let user = "John";
greet(user);
Step 1 of 8Global Creation Phase
Call Stack
LIFO StructureGlobal ECActive
Memory & Scope
Current Contextuserstring
<uninitialized>Global Scope
greetstring
fn()Global Scope
Global Creation Phase(Creation or Execution)
JavaScript execution happens in two phases: Creation (setting up scope and hoisting) and Execution (running the code line by line)
Creation Phase
- Hoisted Declarations:
- • Function declarations (fully hoisted with implementation)
- • var variables (hoisted and initialized as undefined)
- • let/const variables (hoisted but not initialized - TDZ)
- • class declarations (hoisted but not initialized - TDZ)
Execution Phase
- Code Execution Order:
- • Assignments to hoisted variables
- • Function expressions evaluation
- • Function invocations
- • Control flow statements
Current Phase Details
Global Execution Context is created. Variables are hoisted.
Memory Setup:
- Scope Chain Creation
- Variable Object Initialization
- this Binding Determination
- Outer Environment Reference
Code Example Hoisting:
Global Scope:
- • greet (function) - fn()
- • user (let) - <uninitialized>
greet Function Scope:
- • sayHi (function) - fully hoisted
- • greeting (let) - hoisted to TDZ
sayHi Function Scope:
- • message (let) - hoisted to TDZ
Understanding Temporal Dead Zone (TDZ)
What is TDZ?
- • Period between entering scope and variable declaration
- • Variables exist but cannot be accessed
- • Prevents access before declaration
- • Applies to let, const, and class
Example:
// TDZ starts here
console.log(x); // ReferenceError
let x = 5; // TDZ ends here
console.log(x); // Works fineTDZ vs var Hoisting:
- • var: initialized as undefined
- • let/const: remain uninitialized
- • var: can be accessed before declaration
- • let/const: throws ReferenceError if accessed in TDZ
Variable Mutations
Watch how variables change throughout execution:
New valuesUpdatesDeletions
Creation Phase
- • Variables are declared but uninitialized
- • Functions are fully created
- • TDZ begins for let/const
Execution Phase
- • Values are assigned
- • Variables can be reassigned
- • TDZ ends after declaration point
user<uninitialized>
greetfn()
Scope Chain
Variable Resolution Path →
Scope Resolution
- • Starts from current scope
- • Moves up the chain if not found
- • Ends at global scope
Lexical Scoping
- • Based on code structure
- • Inner scopes access outer variables
- • Outer cannot access inner
Memory Allocation
Visualize how different types of data occupy memory space
Functions (Large)Objects (Medium)Primitives (Small)
Memory Management
- • Stack: Primitives & References
- • Heap: Objects & Functions
- • Automatic garbage collection
- • Memory released when out of scope
Size Impact
- • Functions: Code + Scope (Large)
- • Objects: Properties + Methods (Medium)
- • Primitives: Fixed size (Small)
- • References: Always constant size
userPrimitive
Simple value type
greetPrimitive
Simple value type
Memory Optimization Tips:
- • Reuse objects instead of creating new ones
- • Clear references to allow garbage collection
- • Use appropriate data structures for your needs
var vs let/const Behavior
Compare key differences between variable declaration methods
var characteristics
- • Function/global scoped
- • Hoisted with undefined
- • Can be redeclared
- • Added to window object (global)
let/const characteristics
- • Block scoped
- • Temporal Dead Zone (TDZ)
- • No redeclaration
- • Not added to window object
var declaration
console.log(x); // undefined var x = 5; console.log(x); // 5
let declaration
console.log(x); // ReferenceError let x = 5; console.log(x); // 5
var declarations are hoisted with undefined, let/const remain in TDZ