Variable hoisting behavior in Javascript - Deep Dive

Overview - Variable hoisting behavior

What is it?

Variable hoisting in JavaScript means that variable declarations are moved to the top of their containing scope before code execution. This means you can use variables before you declare them in the code. However, only the declaration is hoisted, not the assignment or initialization. This behavior can cause unexpected results if not understood well.

Why it matters

Without understanding hoisting, developers might write code that behaves unpredictably, leading to bugs that are hard to find. Hoisting helps JavaScript run code efficiently but can confuse beginners who expect variables to be available only after their declaration. Knowing hoisting prevents errors and helps write clearer, more reliable code.

Where it fits

Before learning hoisting, you should understand JavaScript variables, scopes, and how code executes line by line. After mastering hoisting, you can learn about closures, block scope with let and const, and asynchronous JavaScript behaviors.

Mental Model

Core Idea

JavaScript moves variable declarations to the top of their scope before running code, but leaves assignments where they are.

Think of it like...

It's like unpacking a suitcase: you take out the labels (declarations) and place them on the table first, but the actual clothes (values) stay inside the suitcase until you open it at the right moment.

┌─────────────────────────────┐
│ Original code               │
│ let x = 5;                 │
│ console.log(x);             │
│                           │
│ After hoisting:             │
│ let x;                     │
│ x = 5;                     │
│ console.log(x);             │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is variable declaration

Concept: Introduce what declaring a variable means in JavaScript.

In JavaScript, declaring a variable means telling the program to reserve a name for storing data. For example, `var a;` declares a variable named 'a' but does not give it a value yet.

Result

The program knows about the variable 'a' but it is undefined until assigned.

Understanding declaration is the first step to grasping how hoisting moves these declarations before code runs.

2

Foundation

Difference between declaration and assignment

Concept: Explain that declaring a variable is different from giving it a value.

Declaration is like naming a box, assignment is putting something inside. For example, `var a;` declares, `a = 10;` assigns the value 10 to 'a'.

Result

Declared variables exist but hold 'undefined' until assigned.

Knowing this difference helps understand why only declarations are hoisted, not assignments.

3

Intermediate

How var declarations are hoisted

🤔Before reading on: do you think var variables are available with their assigned value before declaration? Commit to yes or no.

Concept: Show that var declarations are hoisted but assignments are not.

Example: console.log(a); // What happens? var a = 5; JavaScript treats this as: var a; console.log(a); // undefined a = 5; So, 'a' exists before declaration but is undefined until assignment.

Result

Output is 'undefined', not 5 or error.

Understanding this prevents confusion when variables seem accessible but have no value yet.

4

Intermediate

Let and const hoisting differences

🤔Before reading on: do you think let and const behave the same as var with hoisting? Commit to yes or no.

Concept: Explain that let and const are hoisted differently and cause errors if accessed before declaration.

Example: console.log(b); // ReferenceError let b = 10; Unlike var, let and const are hoisted but in a 'temporal dead zone' until declared, so accessing them early throws an error.

Result

Output is a ReferenceError instead of undefined.

Knowing this difference helps avoid runtime errors and write safer code.

5

Intermediate

Function hoisting behavior

🤔Before reading on: do you think function declarations and function expressions hoist the same way? Commit to yes or no.

Concept: Distinguish between function declarations and expressions in hoisting.

Function declarations are fully hoisted, meaning you can call them before they appear in code: foo(); // Works function foo() { console.log('Hi'); } Function expressions assigned to variables behave like variables: bar(); // Error var bar = function() { console.log('Hi'); }

Result

Function declarations run fine before definition; expressions cause errors if called too early.

Understanding this clarifies why some functions work before declaration and others don't.

6

Advanced

Hoisting in block and global scopes

🤔Before reading on: do you think var variables are hoisted inside blocks like if or loops? Commit to yes or no.

Concept: Explain how var hoisting ignores block scope, but let and const respect it.

Example: if (true) { var x = 1; let y = 2; } console.log(x); // 1 console.log(y); // ReferenceError Var is hoisted to the function or global scope, ignoring blocks, while let and const stay inside blocks.

Result

Var variables leak outside blocks; let and const do not.

Knowing this prevents bugs caused by unexpected variable visibility.

7

Expert

Surprising hoisting edge cases

🤔Before reading on: do you think duplicate var declarations cause errors or are ignored? Commit to your answer.

Concept: Reveal subtle behaviors like duplicate var declarations and hoisting with function parameters.

Example: var a = 1; var a = 2; console.log(a); // 2 Duplicate var declarations are ignored, only the last assignment matters. Also, function parameters are hoisted before var declarations inside functions, which can shadow variables unexpectedly.

Result

Output is 2, no error; parameters can override vars silently.

Understanding these edge cases helps avoid subtle bugs in complex code.

Under the Hood

JavaScript's engine first scans the code to find all variable and function declarations. It sets up memory space for these variables at the start of their scope, initializing var variables to undefined, and marking let/const variables as uninitialized (temporal dead zone). Assignments remain in place and happen during execution. This two-phase process (creation and execution) causes hoisting behavior.

Why designed this way?

Hoisting was designed to allow flexible code ordering and support function declarations anywhere. Early JavaScript engines used this to optimize parsing and execution. Let and const were introduced later to fix problems with var hoisting, adding block scope and temporal dead zones for safer code.

┌───────────────────────────────┐
│ Parsing Phase                 │
│ ┌─────────────────────────┐ │
│ │ Find declarations       │ │
│ │ Setup memory:           │ │
│ │ - var = undefined       │ │
│ │ - let/const = uninit    │ │
│ └─────────────────────────┘ │
│ Execution Phase              │
│ ┌─────────────────────────┐ │
│ │ Run code line by line    │ │
│ │ Assign values when hit   │ │
│ └─────────────────────────┘ │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do var variables hold their assigned value before declaration? Commit to yes or no.

Common Belief: Var variables have their assigned value even before the line where they are declared.

Reality: Var variables are hoisted with their declaration only, so before assignment they are undefined.

Why it matters: Assuming the value exists early leads to bugs where variables are undefined unexpectedly.

Quick: Are let and const variables accessible before declaration? Commit to yes or no.

Common Belief: Let and const behave like var and are accessible before declaration with value undefined.

Reality: Let and const are hoisted but in a temporal dead zone; accessing them early causes ReferenceError.

Why it matters: Misunderstanding this causes runtime errors that confuse beginners.

Quick: Do function expressions hoist like function declarations? Commit to yes or no.

Common Belief: Function expressions are hoisted fully and can be called before their definition.

Reality: Function expressions are treated like variables; only the declaration is hoisted, not the function value.

Why it matters: Calling function expressions too early causes errors, leading to unexpected crashes.

Quick: Does var hoisting respect block scope? Commit to yes or no.

Common Belief: Var variables are hoisted only inside the block they are declared in.

Reality: Var ignores block scope and hoists to the nearest function or global scope.

Why it matters: This causes variables to leak outside blocks, leading to hard-to-find bugs.

Expert Zone

1

Var hoisting can cause silent bugs in large codebases due to variable shadowing and leakage across blocks.

2

Temporal Dead Zone for let/const is a runtime concept, not just a compile-time error, affecting debugging and performance.

3

Function declarations inside blocks behave differently across environments, causing portability issues.

When NOT to use

Avoid relying on var hoisting in modern code; prefer let and const for block scope and safer behavior. For predictable function behavior, use function declarations at the top or arrow functions assigned to const. In strict mode or modules, hoisting behaves more consistently.

Production Patterns

In production, developers use let and const exclusively to avoid hoisting pitfalls. They place all declarations at the top of scopes for clarity. Tools like linters warn about using variables before declaration. Understanding hoisting helps debug legacy code and optimize variable lifetimes.

Connections

Memory allocation in operating systems

Both involve reserving space before actual use.

Knowing how OS allocates memory before running programs helps understand why JavaScript reserves variable space before execution.

Temporal Dead Zone in programming languages

Same pattern of variables existing but inaccessible until initialized.

Recognizing this pattern in other languages clarifies why let/const behave differently from var.

Project management task scheduling

Hoisting is like planning tasks before starting work, but actual work happens later.

Understanding scheduling helps grasp why declarations happen first but assignments happen during execution.

Common Pitfalls

#1 Using var and expecting block scope

Wrong approach:

if (true) {
var x = 10;
}
console.log(x); // expecting error or undefined

Correct approach:

if (true) {
let x = 10;
}
console.log(x); // ReferenceError

Root cause:

Misunderstanding that var ignores block scope and hoists to function/global scope.

#2 Accessing let or const before declaration

Wrong approach:

console.log(y);
let y = 5;

Correct approach:

let y = 5;
console.log(y);

Root cause:

Not knowing about the temporal dead zone causing ReferenceError.

#3 Calling function expressions before assignment

Wrong approach:

foo();
var foo = function() { console.log('Hi'); };

Correct approach:

var foo = function() { console.log('Hi'); };
foo();

Root cause:

Assuming function expressions hoist like function declarations.

Key Takeaways

Variable declarations in JavaScript are moved to the top of their scope before code runs, but assignments stay where they are.

Var declarations are hoisted and initialized to undefined, while let and const are hoisted but uninitialized, causing a temporal dead zone.

Function declarations are fully hoisted, but function expressions behave like variables and are not initialized until assignment.

Var ignores block scope and hoists to function or global scope, which can cause unexpected variable leakage.

Understanding hoisting helps prevent bugs, write clearer code, and debug tricky JavaScript behaviors.