Simple Explanation of Javascript Hoisting 👀

In JavaScript, “hoisting” refers to the behavior of variable declarations being moved to the top of their containing scope. This means that declarations of variables and functions are physically moved to the top of the code, regardless of where they appear in the code.

Here’s an example to illustrate this concept:

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

In the code above, it might seem like the console.log statement should produce an error, since x has not been defined yet. However, because of hoisting, the declaration of x is actually treated as if it appears at the top of the code, like this:

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

This means that the console.log statement is actually accessing a declared, but uninitialized, variable. This is why the output is undefined, rather than an error.

It’s important to note that only declarations are hoisted, not assignments. In other words, the following code will produce an error:

console.log(x);  // Uncaught ReferenceError: x is not defined
x = 5;

This is because the assignment to x is not hoisted, so the console.log statement is attempting to access an undeclared variable.

Hoisting can be confusing, especially for developers who are new to JavaScript, because it can lead to unexpected behavior if you are not aware of it. It’s generally a good idea to declare all of your variables at the top of your code to avoid any potential confusion or errors.