JavaScript - Hoisting

A basic idea in JavaScript called hoisting frequently causes misunderstandings among developers. Hoisting is essentially the behavior in which declarations of variables and functions are "hoisted," or relocated, to the top of their contained scope after compilation. This implies that variables and functions can be used without being specifically stated in the code.

When a variable declared with var is hoisted, its intended value is not yet assigned; instead, the variable is initialized with the value undefined.  For instance:

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

In the example above, the variable myVar is hoisted to the top, but its assignment (5) remains in its original place. Consequently, the first console.log outputs undefined.

The hoisting behaviour varies with let and const. Although they are not initialized, these variables are likewise hoisted. ReferencError occurs when you attempt to access them before they are declared. By using this temporal dead zone (TDZ), variables are protected from being utilized before they are correctly declared:

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

Function declarations are fully hoisted, meaning you can call them before they appear in the code. This is due to the fact that both the function’s name and its body are moved to the top of the scope:

console.log(myFunc()); // "Hello, World!"
function myFunc() {
    return "Hello, World!";
}

However, function expressions, including those defined using var, let, or const, are not hoisted in the same way. Only the declaration of the variable is hoisted, not the assignment of the function to it. For example:

console.log(myFunc); // undefined
var myFunc = function() {
    return "Hello!";
};

Here, the variable myFunc is hoisted but not its function assignment, so the first console.log will display undefined.

Understanding hoisting helps in writing predictable and bug-free code by clarifying how and when variables and functions become available. Proper awareness of hoisting behaviour can prevent subtle bugs and improve code clarity, making it an essential concept for every JavaScript developer.