How Does Variable Hoisting Work in JavaScript?

From a parsing stage perspective, hoisting occurs when all variables are lifted to the top of their scope in the order they appear. This behavior ensures that `var` declarations are available throughout the function, making it a bit more forgiving, but many modern JavaScript best practices encourage using `let` and `const` for better scope management.

According to the MDN documentation on hoisting, `var` declarations are processed before executing any code, essentially moving the declaration to the top within its scope. This means the inner `var x` is hoisted, but not its initialization (`= 20`). So, you’re able to log `x` before its declaration, resulting in `undefined`.

With `let` or `const`, referencing them too early will lead to an error since they can't be accessed until the execution reaches their actual lines.

The JavaScript engine processes your function in two stages. First, during the creation phase, it looks for all variable declarations and sets them to undefined in the local scope. So before any code runs, you technically have your own local `x` as undefined. In the second stage, it executes line by line: when `console.log(x)` runs, the local `x` is still undefined, and then it assigns `20` to `x` afterward. If you used `let` or `const`, you'd hit a ReferenceError because they exist in a 'temporal dead zone' until their declaration.

The inner `var x` shadows the outer `x` immediately when the function starts executing. This is because hoisting occurs beforehand, where the engine identifies all variable declarations so it knows which ones are local. For `var`, that means the variable is set to `undefined` during the hoisting phase.

When using `let` or `const`, things are a bit different. While they are still hoisted, they aren't initialized, leaving them uninitialized. Accessing them before the declaration will throw a ReferenceError instead of returning `undefined`.