What is Hoisting: Javascript Under the Hood

Hoisting in JavaScript refers to the automatic movement of variables and functions to the top of their containing scope during code execution. While this definition captures the essence, it's essential to delve into the underlying processes within the execution context that enable hoisting. To know more about scopes in javascript check out this article on Javascript scope levels.

In the article, I will explain in detail how this happens.

To understand hoisting, we first need to understand the concept of an Execution Context. Execution Context refers to the environment or circumstances in which a specific piece of code is executed within a program. It includes variables, functions, objects, and accessible data at a given point during code execution.

The Execution Context consists of two phases: the Memory Creation Phase (where hoisting occurs) and the Execution Phase (where code is executed line by line)

In the Memory Creation Phase of JavaScript, which occurs between running the code and its actual execution, memory is allocated for each variable, function, and object. During this process, variables declared using the var keyword in the global scope and function declarations are added to the global scope. The values of these variables are set to undefined, while Function declarations, on the other hand, are not set to undefined during this phase; their entire function values are stored.

This behavior explains why, when attempting to access these variables before they are defined and initialized, you don't encounter a "variable is not defined" error, but rather a "variable is undefined" error. However, you can access a function declaration before its actual declaration. It's crucial to understand the distinction between "undefined" (a defined but uninitialized variable) and "not defined" (a variable that has not been declared or is not in scope).

Note that variables declared with the let and const keywords are not added to the global scope because they are block-scoped, instead, they are initialized in a process called "Temporal Dead Zone" (TDZ). The TDZ is a phase between the start of the execution context and the actual point where the variable is declared. The variable is essentially stored in memory but cannot be accessed until the point of declaration.

Note that this process is not noticeable when running the script, but can be seen in the source tab in the Developer tools of your browser. This is done by adding a breakpoint at the first line of your JavaScript code. You can add a breakpoint by clicking the space just before the line number. Then when you refresh the page the code execution stops where you put the breakpoint, you will now be able to execute the code line by line using the down-facing arrow icon on the right (might be in a different place in your browser). At this point the Memory Creation Phase has been executed and memory has been allocated for each variable.

If you check the global scope you will see that only the color variable and the function declaration are added to the global scope in the image below but the flower and car variable is not, that's because the color variable is declared using the var keyword and the function is a function declaration.

You can safely say that the color variable and the function declaration has been hoisted

CONCLUSION

In summary, hoisting in JavaScript is a process where variables declared with the var keyword and function declarations are moved to the top of their scopes during the memory creation phase of the execution context. This facilitates smooth code execution. Variables with var and function declarations are added to the global scope, while those with let and const undergo a "Temporal Dead Zone" until their declaration point.

Understanding the execution context, with its memory creation and execution phases, is vital for efficient code development. Mastering hoisting and the execution context enhances code efficiency and lays a solid foundation for building good JavaScript applications.