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.