Common hoisting pitfalls in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable that can be hoisted.

Javascript

console.log([1]); var [1] = 5;

Drag options to blanks, or click blank then click option'

Ax

Blet

Cy

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using let or const which are not hoisted in the same way.

Using a variable name not declared.

Using var declares a variable that is hoisted, so x is hoisted but undefined before assignment.

2fill in blank

medium

Complete the code to fix the hoisting issue with function declarations.

Javascript

[1] greet() { console.log('Hello!'); } greet();

Drag options to blanks, or click blank then click option'

Avar

Bfunction

Clet

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using var or let which do not hoist the function body.

Omitting the function keyword.

Function declarations are hoisted entirely, so function keyword is needed.

3fill in blank

hard

Fix the error in the code by choosing the correct keyword to avoid temporal dead zone.

Javascript

console.log(x); [1] x = 10;

Drag options to blanks, or click blank then click option'

Avar

Bconst

Clet

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using let or const, which cause TDZ ReferenceError.

Using function, which is invalid syntax here.

Using var hoists the declaration (initialized to undefined), avoiding the TDZ error that occurs with let or const.

4fill in blank

hard

Fill in the blank to create a block-scoped variable and avoid hoisting issues.

Javascript

{ [1] x = 20; console.log(x); } console.log(x);

Drag options to blanks, or click blank then click option'

Afunction

Bvar

Clet

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using var inside the block, which hoists and leaks the variable outside.

Using function keyword incorrectly.

Using let (or const) inside the block scopes x to that block only. The outside console.log(x) throws ReferenceError, avoiding the hoisting pitfall of var leaking the variable outward (which would log 20 then undefined).

5fill in blank

hard

Fill all three blanks to correctly declare and use variables avoiding hoisting pitfalls.

Javascript

console.log([1]); [2] [3] = 15;

Drag options to blanks, or click blank then click option'

Ay

Bvar

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using let which causes temporal dead zone error.

Mismatching variable names.

Using var y hoists the declaration but not the initialization, so console.log(y) prints undefined.

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