Variable hoisting behavior in Javascript - Step-by-Step Execution

Concept Flow - Variable hoisting behavior

Start Execution

↓

Parse code

↓

Hoist declarations

↓

Initialize variables

↓

Execute code line by line

↓

Use variables

↓

End Execution

JavaScript first moves variable declarations to the top (hoisting), then runs code line by line, so variables exist before their declaration line but may be undefined.

Execution Sample

Javascript

console.log(a);
var a = 5;
console.log(a);

This code logs the value of 'a' before and after it is assigned, showing hoisting behavior.

Execution Table

Step	Code Line	Action	Variable 'a' Value	Output
1	Hoisting phase	Declaration of 'a' hoisted, initialized as undefined	undefined
2	console.log(a);	Logs current value of 'a'	undefined	undefined
3	var a = 5;	Assigns 5 to 'a'	5
4	console.log(a);	Logs current value of 'a'	5	5
5	End	Execution finished	5

💡 Reached end of code, all lines executed

Variable Tracker

Variable	Start (before execution)	After Step 1	After Step 3	Final
a	not declared	undefined	5	5

Key Moments - 3 Insights

Why does the first console.log print 'undefined' instead of causing an error?

Because the declaration of 'a' is hoisted and initialized as undefined before code runs, so 'a' exists but has no value yet (see execution_table step 2).

Does the assignment 'a = 5' get hoisted too?

No, only the declaration is hoisted. The assignment happens in order during execution (see execution_table step 3).

What would happen if we used 'let' instead of 'var' for 'a'?

Using 'let' does not hoist the variable in the same way; accessing it before declaration causes a ReferenceError.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'a' at Step 2?

A 5

B undefined

C ReferenceError

D null

💡 Hint

Check the 'Variable 'a' Value' column at Step 2 in the execution_table.

At which step does 'a' get assigned the value 5?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column describing assignment in the execution_table.

If we replace 'var a = 5;' with 'let a = 5;', what would happen at Step 2?

A It logs 'undefined'

B It logs 5

C It throws a ReferenceError

D It logs null

💡 Hint

Recall that 'let' variables are not hoisted like 'var' and accessing before declaration causes error.

Concept Snapshot

JavaScript hoists variable declarations (var) to the top.
Variables exist before their declaration line but are initialized as undefined.
Assignments are not hoisted, they happen in order.
Accessing var before assignment logs undefined, not error.
Using let/const changes hoisting behavior and causes errors if accessed early.

Full Transcript

In JavaScript, variable declarations using 'var' are hoisted to the top of their scope before code runs. This means the variable exists from the start but is set to undefined until the assignment line executes. For example, logging a variable before its declaration prints undefined, not an error. The assignment happens in order during execution. Using 'let' or 'const' changes this behavior: accessing them before declaration causes a ReferenceError. This trace shows step-by-step how 'var a' is hoisted, initialized as undefined, then assigned 5, and how console.log outputs reflect these states.

Practice

1. What happens to a var variable declaration in JavaScript before code execution?

easy

A. It is not moved and must be declared before use.

B. It causes a syntax error if used before declaration.

C. It is moved to the top and initialized as undefined.

D. It is moved to the top and initialized with its assigned value.

Solution

1. Step 1: Understand var hoisting behavior

   JavaScript moves var declarations to the top of their scope and initializes them as undefined.

2. Step 2: Check initialization timing

   The variable is not assigned its value until the code runs the assignment line, so before that it is undefined.

3. Final Answer:

   It is moved to the top and initialized as undefined. -> Option C

4. Quick Check:

   var hoisted = undefined [OK]

Hint: Remember: var is hoisted and set to undefined first [OK]

Common Mistakes:

• Thinking var is not hoisted
• Assuming var is initialized with assigned value immediately
• Confusing var with let or const hoisting

2. Which of the following is the correct way to declare a variable that is hoisted but causes a ReferenceError if accessed before declaration?

easy

A. var x = 5;

B. let x = 5;

C. function x() {}

D. const x;

Solution

1. Step 1: Identify hoisting behavior of let

   let declarations are hoisted but not initialized, so accessing them before declaration causes a ReferenceError.

2. Step 2: Check other options

   var is hoisted and initialized as undefined, so no ReferenceError; const must be initialized at declaration, so const x; is a syntax error; function declarations are hoisted differently.

3. Final Answer:

   let x = 5; -> Option B

4. Quick Check:

   let hoisted but uninitialized causes ReferenceError [OK]

Hint: let and const cause errors if used before declaration [OK]

Common Mistakes:

• Using const without initialization
• Confusing var and let hoisting
• Thinking function declarations behave like let

3. What is the output of the following code?

console.log(a);
var a = 10;
console.log(a);

medium

A. undefined 10

B. 10 10

C. ReferenceError undefined

D. undefined undefined

Solution

1. Step 1: Analyze var hoisting for variable a

   The declaration var a is hoisted and initialized as undefined before any code runs.

2. Step 2: Trace console.log outputs

   The first console.log(a) prints undefined because assignment hasn't happened yet. After a = 10, the second console.log(a) prints 10.

3. Final Answer:

   undefined 10 -> Option A

4. Quick Check:

   var hoisted as undefined, then assigned [OK]

Hint: var logs undefined before assignment, then assigned value [OK]

Common Mistakes:

• Expecting ReferenceError on first log
• Thinking var is assigned before declaration
• Confusing let/const behavior with var

4. Find the error in the following code and choose the correct fix:

console.log(b);
let b = 20;

medium

A. Change let to var to avoid ReferenceError.

B. Wrap the code in a function to fix hoisting.

C. Initialize b with a value before logging.

D. Move console.log(b) after the declaration.

Solution

1. Step 1: Identify cause of ReferenceError

   let variables are hoisted but not initialized, so accessing b before declaration causes ReferenceError.

2. Step 2: Fix by reordering code

   Moving console.log(b) after let b = 20; ensures b is declared before use, avoiding the error.

3. Final Answer:

   Move console.log(b) after the declaration. -> Option D

4. Quick Check:

   Access let after declaration to avoid error [OK]

Hint: Use variables only after let/const declaration [OK]

Common Mistakes:

• Changing let to var without understanding scope
• Trying to initialize before declaration (syntax error)
• Assuming wrapping in function fixes hoisting

5. Consider this code:

console.log(x);
if (true) {
  var x = 5;
  let y = 10;
  console.log(y);
}
console.log(x);
console.log(y);

What will be the output and why?

hard

A. undefined 10 5 ReferenceError

B. ReferenceError 10 5 ReferenceError

C. undefined 10 5 10

D. undefined ReferenceError 5 ReferenceError

Solution

1. Step 1: Analyze var x hoisting and scope

   var x is hoisted to the function or global scope and initialized as undefined. So, first console.log(x) prints undefined. After assignment inside the block, x becomes 5.

2. Step 2: Analyze let y block scope and access

   let y = 10 is block scoped. Inside the block, console.log(y) prints 10. Outside the block, console.log(y) causes ReferenceError because y is not defined there.

3. Step 3: Trace remaining console.logs

   After the block, console.log(x) prints 5. The last console.log(y) throws ReferenceError.

4. Final Answer:

   undefined 10 5 ReferenceError -> Option A

5. Quick Check:

   var hoisted globally, let block scoped [OK]

Hint: var is function/global scoped; let is block scoped [OK]

Common Mistakes:

• Assuming let is accessible outside block
• Expecting var to be block scoped
• Confusing initialization timing of var and let