Hoisting with let and const in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is hoisting in JavaScript?

Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their containing scope before code execution.

intermediate

How does hoisting behave differently with let and const compared to var?

let and const are hoisted but not initialized. They stay in a 'temporal dead zone' until their declaration line, causing a ReferenceError if accessed earlier. var is hoisted and initialized with undefined.

beginner

What happens if you try to access a let variable before its declaration?

You get a ReferenceError because the variable is in the temporal dead zone until its declaration is reached.

beginner

Can you reassign a const variable after declaration?

No, const variables cannot be reassigned after they are initialized. Trying to do so causes a TypeError.

intermediate

Explain the 'temporal dead zone' in simple terms.

The temporal dead zone is the time between entering a scope and when a let or const variable is declared. During this time, the variable exists but cannot be accessed.

What will happen if you run this code?

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

A ReferenceError

B undefined

C 5

D TypeError

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

Which statement is true about const variables?

A <code>const</code> variables can be reassigned anytime.

B <code>const</code> variables are hoisted but not initialized, causing a temporal dead zone.

C <code>const</code> variables behave exactly like <code>var</code>.

D <code>const</code> variables are hoisted and initialized with undefined.

const variables are hoisted but not initialized, so accessing them before declaration causes a ReferenceError.

What is the temporal dead zone?

A The time when variables are accessible before declaration.

B A special block where variables are permanently undefined.

C The time after a variable is declared and initialized.

D The time between entering a scope and the declaration of <code>let</code> or <code>const</code> variables.

The temporal dead zone is the period after entering a scope but before let or const variables are declared.

What will this code output?

var a = 1;
console.log(a);
var a = 2;
console.log(a);

A 1 then 2

B undefined then 2

C ReferenceError

D 2 then 2

var variables are hoisted and initialized with undefined, but here a is assigned 1 before first log, so outputs 1 then 2.

Which keyword allows hoisting with initialization to undefined?

A let

B const

C var

D function

var declarations are hoisted and initialized with undefined, unlike let and const.

Describe how hoisting works differently for var, let, and const variables.

Think about when variables become usable in the code.

Explain the concept of the temporal dead zone and why it matters when using let and const.

Consider what happens if you try to use a variable too early.

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