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'.

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