Learn what is hoisting in Javascript | Javascript Interview Question.

Hoisting is a phenomena by which we can access variables and functions even before we have declared them without running into any error. Let's see the above statement in practice with the below example where we are trying to console variable "a" before it is declared.

We can see that the debugger is on the very first line of the code and none of the code has been executed yet but in the Global scope at the bottom we can see variable "a" is initialised to undefined and function "addNumbers" has the entire function definition assigned to it.

Output after running the code without any errors

# So why didn't we run into any errors here?

1. A execution context was created for this code before the execution starts.
2. The first step in an execution context is to allocate memory to each and every variable and function.
3. During this assignment of memory it assigns each variable with a special keyword i.e. "undefined" and the functions declared using "Function Declaration" fashion with the entire function copy.

# Will a function work the same way as above if we declare the function using "function expression"?

No, it won't work as the function will be treated as a variable hence it will be assigned "undefined" during memeory allocation step.

# Will hoisting work the same way if we declare variables with "const" and "let"?

No, hoisting behaves differently when variables are declared using let and const.

To understand this better, we first need to know why let and const were introduced in JavaScript.

Earlier, developers mostly used var for declaring variables. However, var had some problems:

1. var variables are function scoped, which sometimes led to unexpected behavior.
2. Variables declared with var could be redeclared and reassigned, making the code more error-prone.
3. Due to hoisting, accessing a var variable before declaration would return undefined instead of throwing an error, which sometimes caused hard-to-debug bugs.

To solve these issues, ES6 introduced let and const.

Benefits of let and const

• They are block scoped instead of function scoped.
• They prevent accidental redeclaration.
• const ensures that the variable cannot be reassigned.
• They make JavaScript code more predictable and safer.

How Hoisting Works with let and const

Variables declared with let and const are also hoisted, but they are not initialized with undefined like var.

Instead, they remain in a special phase called the Temporal Dead Zone (TDZ) from the start of the block until the line where they are declared.

During this period, accessing the variable will throw a ReferenceError.

This behavior was intentionally designed to prevent developers from accidentally using variables before they are declared.

Error thrown when trying to access let and const variables before declaration

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

Short answer for your interview:

Hoisting in JavaScript is a behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase. This allows you to access variables and functions before they are declared in the code. However, variables declared with let and const are hoisted but not initialized, leading to a temporal dead zone where accessing them before declaration results in a ReferenceError.