Javascript Module 76

  Module 76 : Understanding Hoisting in JavaScript

🔹 What is Hoisting?

Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope (before code execution).

Variables declared with var are hoisted and initialized as undefined.

Variables declared with let and const are hoisted too, but not initialized → they remain in a Temporal Dead Zone (TDZ) until the line of declaration.

Function declarations are hoisted completely, so they can be called before their actual definition in the code.

🔹 Example Program: Hoisting in Action

function hoistingDemo() { console.log("=== Hoisting Demo Start ==="); // --- var --- console.log(varVariable); // Output: undefined // Explanation: 'varVariable' is hoisted and initialized as undefined var varVariable = "I am var"; // --- let --- try { console.log(letVariable); // Throws ReferenceError // Explanation: letVariable is hoisted but not initialized } catch (error) { console.log("Accessing letVariable before declaration gives:", error.message); } let letVariable = "I am let"; // --- function declaration --- console.log(sayHello()); // Output: "Hello! I am a hoisted function." // Explanation: Function declarations are fully hoisted function sayHello() { return "Hello! I am a hoisted function."; } // --- function expression with var --- try { console.log(sayHi()); // TypeError: sayHi is not a function // Explanation: 'sayHi' is hoisted as undefined, not the function itself } catch (error) { console.log("Accessing sayHi before initialization gives:", error.message); } var sayHi = function() { return "Hi! I am a function expression."; }; console.log("=== Hoisting Demo End ==="); } hoistingDemo();

🔹 Explanation

var behavior

Declared at the top of the scope.

Initialized as undefined until the code assigns a value.

Example:

console.log(x); // undefined var x = 5;

 Internally behaves like:

var x; // hoisted console.log(x); // undefined x = 5;

let and const behavior

Hoisted but not initialized.

Any access before declaration results in a ReferenceError because of the Temporal Dead Zone (TDZ).

Example:

console.log(y); // ReferenceError let y = 10;

Function declaration behavior

Fully hoisted (name + body).

Can be called before its declaration in the code.

Example:

greet(); // "Hello!" function greet() { console.log("Hello!"); }

Function expression behavior

Works like variables.

If declared with var, it is hoisted as undefined.

If declared with let or const, TDZ applies.

🔹Exercises 

Exercise 1: Predict the Output

console.log(a); var a = 100; try { console.log(b); } catch (err) { console.log("Error:", err.message); } let b = 200; console.log(c()); function c() { return "Function c is hoisted!"; } try { console.log(d()); } catch (err) { console.log("Error:", err.message); } var d = function() { return "Function d expression"; };

👉 Task: Run and explain why each output/error happens.

Exercise 2: Debugging with Hoisting

Rewrite this code so it works correctly:

console.log(name); name = "Alice"; let name;

👉 Hint: Fix using proper declaration placement.

Exercise 3:

Try declaring the same variable with var vs let:

var x = 10; var x = 20; // works let y = 10; let y = 20; // error

👉 Question: Why does let prevent redeclaration while var does not?

🔹 Research 

Spec Reference: The concept of hoisting is explained in the ECMAScript Language Specification, under Variable Instantiation and Declaration Binding Instantiation.

TDZ (Temporal Dead Zone): The zone between the start of the scope and the declaration line where the variable exists but is not accessible.

Coding Specialist Insight:

Use let and const instead of var to avoid accidental hoisting bugs.

Function expressions are safer when you want control over when functions are available.

Function declarations are useful for structuring code like traditional languages (C, Java, etc.), but be careful with order when mixing with expressions.