Common hoisting pitfalls in Javascript - Step-by-Step Execution

Concept Flow - Common hoisting pitfalls

Start Execution

↓

Parse Declarations

↓

Hoist var declarations

↓

Execute code line by line

↓

Encounter var usage before assignment?

↓

Value is undefined

↓

Encounter let/const usage before declaration?

↓

ReferenceError thrown

↓

End Execution

JavaScript first moves variable declarations (var) to the top but not their assignments, causing undefined values if used early; let and const cause errors if used before declaration.

Execution Sample

Javascript

console.log(a);
var a = 5;
console.log(b);
let b = 10;

Shows how var is hoisted with undefined value and let causes ReferenceError if accessed before declaration.

Execution Table

Step	Code Line	Action	Variable States	Output / Error
1	console.log(a);	a is declared but not assigned yet (hoisted as undefined)	a=undefined, b=uninitialized	undefined
2	var a = 5;	Assign 5 to a	a=5, b=uninitialized
3	console.log(b);	b is declared but in temporal dead zone (let not hoisted like var)	a=5, b=uninitialized	ReferenceError
4	let b = 10;	Declare and assign b	a=5, b=10

💡 Execution stops at step 3 due to ReferenceError accessing 'b' before declaration

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
a	undefined (hoisted)	undefined	5	5	5
b	uninitialized	uninitialized	uninitialized	uninitialized (access causes error)	uninitialized

Key Moments - 3 Insights

Why does console.log(a) print undefined instead of throwing an error?

Because var declarations are hoisted to the top with an initial value of undefined, so 'a' exists but is not assigned yet (see execution_table step 1).

Why does console.log(b) cause a ReferenceError?

Because let declarations are not hoisted like var; 'b' is in a temporal dead zone until declared, so accessing it before declaration throws an error (see execution_table step 3).

Does hoisting move variable assignments too?

No, only declarations are hoisted. Assignments stay where they are, so variables declared with var are undefined until assigned (see execution_table steps 1 and 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'a' at step 1?

A undefined

B 5

C ReferenceError

D null

💡 Hint

Check the 'Variable States' column at step 1 in the execution_table.

At which step does the ReferenceError occur?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Output / Error' column in the execution_table for the error message.

If 'var a = 5;' was moved before 'console.log(a);', what would console.log(a) output at step 1?

A undefined

B 5

C ReferenceError

D null

💡 Hint

Consider how assignment affects variable value before the first console.log in the execution_table.

Concept Snapshot

JavaScript hoisting moves var declarations to the top with initial value undefined.
Accessing var before assignment prints undefined.
let and const are not hoisted like var; accessing them before declaration causes ReferenceError.
Assignments are not hoisted, only declarations.
Beware of temporal dead zone with let/const.

Full Transcript

In JavaScript, variable declarations using var are hoisted to the top of their scope, meaning the variable exists before its line of declaration but is initialized as undefined. This is why console.log(a) before 'var a = 5;' prints undefined instead of causing an error. However, let and const declarations are not hoisted in the same way. Accessing them before their declaration line causes a ReferenceError due to the temporal dead zone. Assignments to variables are not hoisted, only declarations. This behavior can cause confusion and bugs if not understood. The execution table shows step-by-step how variables a and b change and when errors occur.

Practice

1. What happens when you access a var variable before its declaration in JavaScript?

easy

A. It returns undefined because var is hoisted and initialized with undefined.

B. It throws a ReferenceError because the variable is not defined yet.

C. It returns the value assigned later in the code.

D. It causes a SyntaxError.

Solution

1. Step 1: Understand var hoisting behavior

   Variables declared with var are hoisted to the top and initialized with undefined.

2. Step 2: Access before declaration

   Accessing the variable before its declaration returns undefined instead of an error.

3. Final Answer:

   It returns undefined because var is hoisted and initialized with undefined. -> Option A

4. Quick Check:

   var hoisting = undefined [OK]

Hint: var is hoisted and set to undefined before code runs [OK]

Common Mistakes:

• Thinking accessing var before declaration throws error
• Confusing var with let or const hoisting
• Assuming var is not hoisted at all

2. Which of the following is the correct way to declare a variable that will cause a ReferenceError if accessed before declaration?

easy

A. x = 10;

B. var x = 10;

C. function x() {}

D. let x = 10;

Solution

1. Step 1: Recall let hoisting

   let is hoisted but not initialized, causing a temporal dead zone.

2. Step 2: Identify which causes ReferenceError before declaration

   Accessing let before declaration throws ReferenceError. Here, let x = 10; uses let.

3. Final Answer:

   let x = 10; -> Option D

4. Quick Check:

   let before declaration = ReferenceError [OK]

Hint: let causes ReferenceError if accessed early [OK]

Common Mistakes:

• Thinking var causes ReferenceError before declaration
• Confusing function declarations with variables
• Assuming const behaves like var

3. What is the output of the following code?

console.log(foo());

function foo() {
  return 'Hello';
}

var foo = function() {
  return 'World';
};

medium

A. 'Hello'

B. 'World'

C. TypeError

D. ReferenceError

Solution

1. Step 1: Understand function declaration hoisting

   Function declarations are fully hoisted, so foo is initially the function returning 'Hello'.

2. Step 2: Analyze var function expression assignment

   The var foo declaration is hoisted but the assignment to function expression happens after the call, so it does not overwrite the function declaration at the time of call.

3. Final Answer:

   'Hello' -> Option A

4. Quick Check:

   Function declarations hoisted fully = 'Hello' [OK]

Hint: Function declarations hoisted fully, var function expressions not [OK]

Common Mistakes:

• Assuming var function expression overwrites before call
• Confusing function declaration and expression hoisting
• Expecting TypeError or ReferenceError

4. Identify the error in the following code and fix it:

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

medium

A. No error, outputs 5

B. SyntaxError due to missing semicolon

C. ReferenceError because let is accessed before declaration

D. TypeError because a is not a function

Solution

1. Step 1: Recognize temporal dead zone with let

   Variables declared with let are hoisted but not initialized, causing ReferenceError if accessed before declaration.

2. Step 2: Fix by moving declaration before usage

   Move let a = 5; before console.log(a); to avoid ReferenceError.

3. Final Answer:

   ReferenceError because let is accessed before declaration -> Option C

4. Quick Check:

   let before declaration = ReferenceError [OK]

Hint: Declare let variables before use to avoid ReferenceError [OK]

Common Mistakes:

• Thinking let behaves like var
• Ignoring temporal dead zone
• Assuming missing semicolon causes error

5. Consider this code snippet:

console.log(typeof bar);
var bar = 'test';
console.log(typeof baz);
let baz = 'hello';

What will be the output and why?

hard

A. 'string' followed by 'string'

B. 'undefined' followed by ReferenceError

C. ReferenceError followed by 'undefined'

D. 'undefined' followed by 'undefined'

Solution

1. Step 1: Analyze typeof bar with var

   var bar is hoisted and initialized with undefined, so typeof bar returns 'undefined'.

2. Step 2: Analyze typeof baz with let

   let baz is hoisted but not initialized, accessing it before declaration causes ReferenceError, even with typeof.

3. Final Answer:

   'undefined' followed by ReferenceError -> Option B

4. Quick Check:

   var hoisted initialized, let TDZ causes ReferenceError [OK]

Hint: typeof var before declaration = 'undefined', let causes ReferenceError [OK]

Common Mistakes:

• Assuming typeof let before declaration returns 'undefined'
• Confusing var and let hoisting behavior
• Expecting no error from typeof on let