Common hoisting pitfalls in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of var hoisting with function scope

What is the output of this JavaScript code?

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

Javascript

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

A 5\n5

B ReferenceError\n5

C undefined\n5

D undefined\nundefined

💡 Hint

Remember that var declarations are hoisted but not their assignments.

The variable declaration 'var x' is hoisted to the top, so the first console.log sees 'x' declared but not assigned, resulting in 'undefined'. After assignment, the second console.log prints 5.

❓ Predict Output

intermediate

let variable temporal dead zone

What happens when this code runs?

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

Javascript

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

A ReferenceError

B TypeError

C 10

D undefined

💡 Hint

Variables declared with let are not accessible before their declaration.

Variables declared with let are hoisted but not initialized, causing a temporal dead zone. Accessing 'y' before declaration throws ReferenceError.

❓ Predict Output

advanced

Function declaration hoisting vs function expression

What is the output of this code?

foo();
bar();

function foo() {
  console.log('foo called');
}

var bar = function() {
  console.log('bar called');
};

Javascript

foo();
bar();

function foo() {
  console.log('foo called');
}

var bar = function() {
  console.log('bar called');
};

A foo called\nTypeError

B TypeError\nTypeError

C ReferenceError\nbar called

D foo called\nbar called

💡 Hint

Function declarations are hoisted fully, but var assigned functions are hoisted as undefined.

The function 'foo' is hoisted completely, so calling it works. The variable 'bar' is hoisted but assigned undefined initially, so calling bar() causes TypeError.

❓ Predict Output

advanced

var inside block scope and hoisting

What will this code output?

console.log(a);
if (true) {
  var a = 20;
}
console.log(a);

Javascript

console.log(a);
if (true) {
  var a = 20;
}
console.log(a);

A ReferenceError\n20

B undefined\n20

C undefined\nundefined

D 20\n20

💡 Hint

var declarations are function-scoped, not block-scoped.

The var 'a' is hoisted to the top of the function or global scope, so the first console.log prints undefined. After assignment inside the block, the second console.log prints 20.

❓ Predict Output

expert

Complex hoisting with var, let, and function declarations

What is the output of this code?

console.log(typeof foo);
console.log(typeof bar);
console.log(typeof baz);

var foo = 'foo';
let bar = 'bar';
function baz() {}

Javascript

console.log(typeof foo);
console.log(typeof bar);
console.log(typeof baz);

var foo = 'foo';
let bar = 'bar';
function baz() {}

A "undefined"\n"undefined"\n"function"

B "undefined"\n"string"\n"function"

C "string"\nReferenceError\n"function"

D "undefined"\nReferenceError\n"function"

💡 Hint

let variables are not accessible before declaration, causing ReferenceError even with typeof.

var foo is hoisted and initialized as undefined, so typeof foo is 'undefined'. let bar is in temporal dead zone, so typeof bar throws ReferenceError. function baz is hoisted fully, so typeof baz is 'function'.