Hoisting in JavaScript

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that, in code, you can use a variable or call a function before it's declared in the source code, and JavaScript will still work. However, there are some nuances to hoisting that you should understand:

Variable Hoisting

When you declare a variable using var, it gets hoisted to the top of its containing function or global scope. However, only the declaration is hoisted, not the initialization. This means that the variable is created and initialized with undefined.

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

Behind the scenes, this is how the code is interpreted:

var x; // Declaration is hoisted
console.log(x); // undefined
x = 5; // Initialization happens here

Function Hoisting

Function declarations are also hoisted in JavaScript. You can call a function before it's declared in the code.

foo(); // "Hello, world!"

function foo() {
  console.log("Hello, world!");
}

The function declaration is hoisted to the top of its containing scope, so it's available for use even before the declaration in the code.

Function Expressions

function expressions are not hoisted in the same way as function declarations. Only the variable declaration is hoisted, not the function assignment.

bar(); // TypeError: bar is not a function

var bar = function () {
  console.log("Hi, there!");
};

in this case, the var bar; part is hoisted, but the assignment to a function only happens after the declaration in the code. So, trying to call bar() before the assignment results in an error.

Block Scope Variable (let and const)

Variables declared with let and const are hoisted to the top of their containing block, but they are not initialized. Accessing them before their declaration in the code results in a ReferenceError

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

This is because let and const have block scope, so they are hoisted to the top of the block but are in a [[Temporal Dead Zone]] until they are initialized
hoisting in JavaScript is a mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. It's essential to understand hoisting to avoid unexpected behavior in your code and to write more predictable and maintainable JavaScript programs.