Overview

Hoisting in JavaScript is a behavior in which variable and function declarations are moved to the top of their containing scope before code execution. Understanding hoisting is crucial as it can lead to unexpected behaviors in your code, especially for those new to JavaScript. This concept is essential for writing error-free and predictable code.

Key Concepts

1. Variable Hoisting: Variables declared with var are hoisted to the top of their functional or global scope, and initialized with undefined.
2. Function Hoisting: Function declarations are hoisted to the top of their scope, making it possible to call functions before their declaration in the code.
3. Temporal Dead Zone: Variables declared with let and const are also hoisted but cannot be accessed until their declaration is reached, creating a temporal dead zone.

Common Interview Questions

Basic Level

1. What is hoisting in JavaScript?
2. Provide an example where var hoisting could cause an issue.

Intermediate Level

3. How does hoisting affect variables declared with let and const?

Advanced Level

4. Compare function declaration and function expression hoisting behaviors.

Detailed Answers

1. What is hoisting in JavaScript?

Answer: Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase. This allows variables and functions to be used before they are physically declared in the code.

Key Points:
- Hoisting is performed on declarations, not initializations.
- It affects variables declared with var, and function declarations.
- Understanding hoisting helps in avoiding reference errors.

Example:

console.log(num); // Outputs: undefined
var num = 6;

The variable num is hoisted to the top of its scope with an initial value of undefined.

2. Provide an example where var hoisting could cause an issue.

Answer: var hoisting can lead to unexpected results, especially when a variable is used before it is declared and initialized, as the variable will be undefined.

Key Points:
- var is function-scoped or globally scoped, not block-scoped.
- Using a variable before declaration can cause logical errors.
- The var declaration is hoisted, but its initialization is not.

Example:

var status = true;
if (status) {
    var status = false; // This `status` is the same as the outer one due to hoisting
    console.log(status); // Outputs: false
}
console.log(status); // Outputs: false, which might be unexpected

This issue arises because the var status declaration inside the if block is hoisted to the top of the global scope, affecting the outer status variable.

3. How does hoisting affect variables declared with let and const?

Answer: Variables declared with let and const are hoisted to the top of their block scope, but they are not initialized with undefined like var. Accessing them before the declaration results in a ReferenceError. This period from the start of the block until the declaration is known as the Temporal Dead Zone.

Key Points:
- let and const are block-scoped.
- They have a Temporal Dead Zone.
- Accessing these variables before declaration causes a ReferenceError.

Example:

console.log(num); // ReferenceError: Cannot access 'num' before initialization
let num = 3;

4. Compare function declaration and function expression hoisting behaviors.

Answer: Function declarations are fully hoisted, meaning both the declaration and the body are hoisted, allowing them to be called before they are defined in the code. Function expressions, however, are treated based on the variable hoisting rules; if declared with var, the variable is hoisted but not its assigned function.

Key Points:
- Function declarations are fully hoisted.
- Function expressions are only hoisted if declared with var, and only the variable declaration, not its assignment, is hoisted.
- Using let or const with function expressions adheres to their hoisting behavior.

Example:

console.log(funcDec()); // Outputs: "Function declaration"
function funcDec() {
    return "Function declaration";
}

console.log(funcExp); // Outputs: undefined
var funcExp = function() {
    return "Function expression";
};

In the first case, the function funcDec can be called before its declaration due to function hoisting. In the second case, funcExp is undefined because only the variable declaration is hoisted, not the function expression assignment.