Common hoisting pitfalls in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is hoisting in JavaScript?

Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their containing scope before code execution.

beginner

Why can using var cause unexpected behavior due to hoisting?

Variables declared with var are hoisted and initialized with undefined, so accessing them before assignment returns undefined instead of an error.

intermediate

What happens when you try to access a let or const variable before its declaration?

Accessing let or const variables before declaration causes a ReferenceError due to the temporal dead zone (TDZ).

intermediate

How does function declaration hoisting differ from function expression hoisting?

Function declarations are fully hoisted, so you can call them before they appear in code. Function expressions assigned to variables are hoisted only as variable declarations, so calling them before assignment causes errors.

advanced

What is a common pitfall when using var inside loops related to hoisting?

Using var inside loops hoists the variable to the function scope, causing all iterations to share the same variable, which can lead to unexpected results in closures.

What will be the output of this code?<br>

console.log(x); var x = 5;

A ReferenceError

B 5

C null

D undefined

The variable x is hoisted and initialized with undefined, so logging it before assignment outputs undefined.

What happens if you try to access a let variable before its declaration?

A Outputs undefined

B Outputs null

C Throws ReferenceError

D Outputs 0

Accessing a let variable before declaration causes a ReferenceError due to the temporal dead zone.

Which of these is fully hoisted and can be called before its declaration?

A Function declaration

B Function expression assigned to var

C Arrow function assigned to const

D Class declaration

Function declarations are fully hoisted, so they can be called before their declaration in code.

What is the output of this code?<br>

for(var i=0; i<3; i++) { setTimeout(() => console.log(i), 100); }

A 0 1 2

B 3 3 3

C undefined undefined undefined

D ReferenceError

The variable i is hoisted to function scope and shared, so all timeouts print the final value 3.

Which keyword avoids hoisting pitfalls by block-scoping variables?

A Both B and D

B let

C function

D const

E var

let and const are block-scoped and do not allow access before declaration, avoiding common hoisting pitfalls.

Explain what hoisting is and describe a common pitfall when using var in JavaScript.

Think about how JavaScript moves declarations and what happens if you use a variable before assigning it.

Describe the difference between function declarations and function expressions in terms of hoisting.

Consider which functions you can call before they appear in the code.