In JavaScript, hoisting is a behavior where variable and function declarations are moved to the top of their containing scope during the execution phase.

This allows you to access variables and functions even before they are declared in the code.

Hoisting allows you to access variables and functions before they are declared in the code, but the behavior varies based on how they are declared.

Regular Function Declaration

var x = 7;
function getName() {
    console.log("Sujay");
}

getName();   // Outputs: Sujay
console.log(x);  // Outputs: 7

In this case, both the function declaration and the variable declaration are hoisted. When the code is executed:

The getName() function is available before its declaration because function declarations are hoisted entirely (meaning the function body is copied to memory before execution).
The variable x is hoisted, but only the declaration is moved, not the assignment. So, at the time console.log(x) is called, it logs 7 since the value was assigned before.

Calling a Function Before Declaration

getName();   // Outputs: Sujay
console.log(x);  // Outputs: undefined

var x = 7;
function getName() {
    console.log("Sujay");
}

In this example:

The function getName is hoisted entirely, so it can be called before its declaration, and it prints "Sujay".
The variable x is hoisted, but only the declaration (var x;) is moved to the top. Therefore, when console.log(x) is executed, it prints undefined because the assignment (x = 7) has not been reached yet during execution.

Arrow Function and Variables

When using arrow functions, the behavior changes slightly because arrow functions are expressions, not declarations. This means that they behave like variables and are hoisted as undefined:

getName();   // Throws ReferenceError: Cannot access 'getName' before initialization
console.log(x);  // Outputs: undefined

var x = 7;
var getName = () => {
    console.log("Sujay");
};

Here:

getName is treated as a variable, so it is hoisted with the value undefined before the function definition is encountered. Since functions are expressions in this case, trying to invoke it before the actual assignment results in a ReferenceError.
x behaves like a normal variable and is hoisted as undefined, so console.log(x) outputs undefined.

Function Expression

var getName2 = function() {
    console.log("Sujay");
};

In this case, getName2 is also treated as a variable, and like other variables, it's hoisted as undefined. If you try to call the function before the declaration:

getName2();   // Throws TypeError: getName2 is not a function
console.log(x);  // Outputs: undefined

This would result in an error because the variable getName2 is hoisted, but the assignment hasn't happened yet. Therefore, it’s not yet a function when the code tries to invoke it.

Between Function Declarations and Expressions

Function Declarations (e.g., function getName() {}) are hoisted with their entire body, making them available anywhere in the scope.
Function Expressions (e.g., var getName = function() {} or var getName = () => {}) are hoisted as variables with an initial value of undefined, so you cannot call them before the assignment.

Taking one more example to explain:

First global execution context will create.

Initially, the code starts executing in the global execution context.

The global context is the first context pushed onto the call stack when the program begins.

In JavaScript, when the code is executed, it goes through two main phases:

Memory Creation Phase (also called the "Creation Phase")
Code Execution Phase

Memory Creation Phase:

During this phase, the JavaScript engine allocates memory for variables and functions.
Variables are assigned the value undefined initially, and functions are stored with their definitions.

For example:

var x = 1;

function a() {
    var x = 10;
    console.log(x);
}

function b() {
    var x = 100;
    console.log(x);
}

var x = 1; will allocate memory for x globally with an initial value of undefined in the creation phase.
The functions a and b are stored with their definitions, but they are not executed yet.

Code Execution Phase:

In this phase, the code starts to execute line by line.
Each function call creates a new execution context (EC) where new variables are allocated space and initialized to undefined.

Breakdown of Execution:

Global Execution Context:
- The global execution context is created, and memory for x is allocated.
- Initially, x is set to undefined.
Function a() Invocation:
- When a() is called, a new execution context is created for function a().
- A new x variable is declared inside a() and initialized to undefined.
- The local x inside a() is set to 10, and console.log(x) prints 10.
Function b() Invocation:
- Similarly, when b() is called, another execution context is created for function b().
- A new x variable is declared inside b() and initialized to undefined.
- The local x inside b() is set to 100, and console.log(x) prints 100.
Back to Global Execution Context:
- After both functions have executed, the code returns to the global context, and console.log(x) prints the value of the global x, which is 1.

Taking example to explain Temporal Dead Zone , Let and const:

console.log(b);  // undefined
let a = 10;
var b = 20;

In this case, the output is undefined because of hoisting. But when we try to access a before its declaration (e.g., console.log(a)), it will give a Reference Error (meaning "a" cannot be accessed before initialization).

Why this happens:

When we declare a variable with var, JavaScript allocates memory in the global space. But when we declare variables with let and const, they are not allocated memory in the global scope. Instead, they are allocated memory in the script scope.

Any variable which is in script scope can't be accessed before its declaration and initialization.

Temporal Dead Zone

The temporal dead zone is the time since a let and const variable was hoisted until it is initialized with a value. let and const are hoisted, yet until initialization, the time between is known as the temporal dead zone.

Example:

console.log(a);  // ReferenceError: Cannot access 'a' before initialization
let a = 10;
var b = 20;

In this example, before initialization I am trying to access a, but the variable is hoisted in script scope without a value. After this, it gets assigned the value 10. The time between hoisting and initialization is known as the temporal dead zone.

Re-declaration issues:

console.log("hello");
let a = 10;
let a = 100;  // SyntaxError: Identifier 'a' has already been declared

In this case, it will give an error. It will not run a single line of code.

Example 2:

console.log("Hello");
let a = 10;
var a = 20;  // SyntaxError: Identifier 'a' has already been declared

In this case also it will give a syntax error. A variable which is defined by let cannot be redeclared with var. The error is that it has already been declared.

More examples:

let a;
const b = 20;
a = 10;  // This is fine. It will not show any error.

But if we do:

let a = 10;
const b;     // SyntaxError: Missing initializer in const declaration
b = 20;

It will give a syntax error like "Missing initializer in const declaration." During const declaration, we have to initialize during declaration.

Error Types:

TypeError:

Assignment to constant variable.

let a = 100;
const b = 200;
b = 3000;  // TypeError: Assignment to constant variable

ReferenceError:

When the JavaScript engine tries to find a variable in memory space but can't access it.

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

For this example, a is in the temporal dead zone.

One more example:

console.log(z);  // ReferenceError: z is not defined
let a = 10;

In this case, it also gives a Reference Error because we can't access z because it is not in memory at all.

console.log(b);  // undefined
let a = 10;
var b = 20;

JavaScript Hoisting