JavaScript : Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that regardless of where variables and functions are declared in the code, they are accessible and can be used before they are actually declared in the code.

1. Variable Hoisting:

Variables declared with var are hoisted to the top of their containing function or global scope, but only the declaration is hoisted, not the initialization.

console.log(myVar); // Output: undefined var myVar = 10; console.log(myVar); // Output: 10

This is equivalent to:

var myVar; console.log(myVar); // Output: undefined myVar = 10; console.log(myVar); // Output: 10

2. Function Hoisting:

Function declarations are also hoisted to the top of their containing scope, allowing them to be used before they are declared.

myFunction(); // Output: Hello function myFunction() { console.log('Hello'); }

This is equivalent to:

function myFunction() { console.log('Hello'); } myFunction(); // Output: Hello

3. Hoisting with let and const:

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

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

4. Hoisting Caveats:

Hoisting only moves the declaration to the top, not the initialization. Therefore, variables are initialized with undefined and functions are fully initialized.
Redeclarations of variables with var are ignored. Redeclarations of variables with let or const result in a SyntaxError.
Function expressions are not hoisted, only function declarations.

Best Practices:

Declare variables at the top of their containing scope to avoid confusion and bugs.
Use let and const instead of var to prevent unintended hoisting behavior and to better control variable scope.