Hoisting with let and const in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with block scope using let.

Javascript

let [1] = 5;
console.log(x);

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

Avar

Bx

Cconst

Dy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' instead of a variable name.

Using 'const' as a variable name.

Using an undeclared variable name.

The variable x is declared using let, which has block scope and is hoisted but not initialized.

2fill in blank

medium

Complete the code to declare a constant variable.

Javascript

const [1] = 10;
console.log(value);

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

Avalue

Blet

Cvar

Dnum

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' or 'let' instead of 'const'.

Using a different variable name than in the console.log.

The constant variable value is declared with const and cannot be reassigned.

3fill in blank

hard

Fix the error in accessing a let variable before declaration.

Javascript

console.log([1]);
let a = 3;

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

Aa

Bb

C3

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared.

Trying to access the variable before declaration.

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

4fill in blank

hard

Fill both blanks to create a block-scoped variable and log it.

Javascript

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

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

Alet

Bvar

Cx

Dy

Attempts:

3 left

💡 Hint

Common Mistakes

Using var which is function-scoped.

Logging a variable name not declared.

Using let declares a block-scoped variable x, which can be logged inside the block.

5fill in blank

hard

Fill all three blanks to declare a constant and log its value.

Javascript

const [1] = 20;
function show() {
  console.log([2]);
}
show();
console.log([3]);

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

API

Dradius

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in the blanks.

Using a variable not declared.

The constant PI is declared and logged inside and outside the function.

Practice

1. What happens if you try to access a let variable before its declaration in JavaScript?

easy

A. It returns the variable's default value.

B. It throws a ReferenceError due to the temporal dead zone.

C. It returns null.

D. It returns undefined.

Solution

1. Step 1: Understand hoisting behavior of let

   Variables declared with let are hoisted but not initialized immediately.

2. Step 2: Access before declaration causes error

   Accessing such variables before declaration triggers a ReferenceError due to the temporal dead zone.

3. Final Answer:

   It throws a ReferenceError due to the temporal dead zone. -> Option B

4. Quick Check:

   Temporal Dead Zone = ReferenceError [OK]

Hint: Accessing before declaration with let/const causes ReferenceError [OK]

Common Mistakes:

• Thinking it returns undefined like var
• Assuming it returns null
• Believing it has a default value

2. Which of the following is the correct syntax to declare a constant variable in JavaScript?

easy

A. const PI = 3.14;

B. let const PI = 3.14;

C. constant PI = 3.14;

D. var const PI = 3.14;

Solution

1. Step 1: Recall correct const declaration syntax

   The correct way to declare a constant is using const followed by the variable name and assignment.

2. Step 2: Identify invalid syntax options

   Options B, C, and D use invalid keywords or combinations not supported in JavaScript.

3. Final Answer:

   const PI = 3.14; -> Option A

4. Quick Check:

   const declaration syntax = const name = value [OK]

Hint: Use 'const name = value;' to declare constants [OK]

Common Mistakes:

• Using 'constant' keyword instead of 'const'
• Combining let or var with const
• Missing assignment during declaration

3. What will be the output of the following code?

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

medium

A. 10

B. undefined

C. ReferenceError

D. null

Solution

1. Step 1: Analyze variable declaration and usage

   The variable x is declared with let after the console.log statement.

2. Step 2: Understand temporal dead zone effect

   Accessing x before its declaration causes a ReferenceError due to the temporal dead zone.

3. Final Answer:

   ReferenceError -> Option C

4. Quick Check:

   let before declaration = ReferenceError [OK]

Hint: Accessing let before declaration throws ReferenceError [OK]

Common Mistakes:

• Assuming it prints undefined like var
• Expecting the value 10 immediately
• Thinking it prints null

4. Identify the error in the following code and fix it:

function test() {
  console.log(a);
  const a = 5;
}
test();

medium

A. No error, outputs 5

B. TypeError, fix by initializing a with null

C. SyntaxError, fix by changing const to var

D. ReferenceError, fix by moving const declaration before console.log

Solution

1. Step 1: Identify the cause of error

   Accessing a before its const declaration causes a ReferenceError due to temporal dead zone.

2. Step 2: Fix by reordering declaration

   Moving the const a = 5; line before console.log(a); fixes the error.

3. Final Answer:

   ReferenceError, fix by moving const declaration before console.log -> Option D

4. Quick Check:

   Declare const before use to avoid ReferenceError [OK]

Hint: Declare const before use to avoid ReferenceError [OK]

Common Mistakes:

• Changing const to var without fixing order
• Ignoring temporal dead zone
• Assuming no error occurs

5. Consider the code below. What will be the output and why?

const a = 1;
{
  console.log(a);
  let a = 2;
}

hard

A. ReferenceError

B. 2

C. 1

D. undefined

Solution

1. Step 1: Understand block scope and hoisting

   The block declares a new let a which is hoisted but uninitialized inside the block.

2. Step 2: Accessing a before let a declaration

   Inside the block, console.log(a) tries to access the block-scoped a before its declaration, causing a ReferenceError due to temporal dead zone.

3. Final Answer:

   ReferenceError -> Option A

4. Quick Check:

   Block-scoped let shadows outer const causing ReferenceError [OK]

Hint: Block let shadows outer const; accessing before declaration errors [OK]

Common Mistakes:

• Assuming it prints outer const value 1
• Expecting it prints 2 before declaration
• Thinking it prints undefined