Hoisting in JavaScript may seem like an intimidating concept at first, however, it is fairly simple to understand when explained. According to MDN (Mozilla Development Network), hoisting "refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code". Here is my own definition of hoisting: enabling variable and function types to be accessible in your script before they are explicitly defined.
Since JavaScript is a non-blocking, single-threaded programming language that is executed from top to bottom, the order is relevant in which the code is written. In this article, we will explore how hoisting is applied to different types of variables, functions, and how it relates to the temporal dead zone.
Before we dive into hoisting variables and functions, we first need to understand the concept of the scope chain. To begin, the outermost scope is called the "global" scope. Variables and functions defined in the global scope can be called and accessed anywhere in your script. Next, we have the "functional" scope or the "lexical" scope as some may call it. Variables created within the function scope are only accessible within the function itself, and cannot be accessed by other functions outside of its scope. Lastly, we have the "block" scope, this scope refers to variables or functions created within conditional and looped statements (ie. if, for... etc) and can only be accessed within the code block.
Now that we understand the scope chain, let's examine how different types of variables (var, let, const) are affected by hoisting. The variable "var" is hoisted to the top of the scope chain. For example, if you were to define a "var" variable after a function that references said variable, it would return a value of "undefined". Although "var" is hoisted, the nature of "var" is a common source for errors in JavaScript. Therefore, modern JavaScript rarely uses "var", instead, we use "let" and "const" to define our variables. Variables declared with "let" and "const" are NOT hoisted, the difference being that "let" is mutable and "const" is immutable.
Hoisting also applies to JavaScript functions. A function declaration is hoisted to the top of the scope chain, and an arrow function or function expressions are NOT hoisted when defined with "let" or "const". It is necessary for function declarations to be hoisted before it is defined because various programming techniques, such as mutual recursion, require this behavior in order to be executed successfully. However, the best practices in JavaScript are to define a function or variable before calling it later in the code, even if it's a declarative function.
As stated, variables and function expressions declared with "let" or "const" are not hoisted in the scope chain. Instead, they are affected by the temporal dead zone or TDZ where their values become inaccessible from the beginning of the scope chain to where the variables are defined. For example, if we try to access the variables with a temporal dead zone blocking its value, we will receive an error stating the variables must first be initialized before they can be accessed. The temporal dead zone exists so that errors can be avoided and caught more easily.
In conclusion, JavaScript hoisting is the process of enabling variables and functions to be accessible before they are declared. The key takeaway here is that function declarations benefit most from hoisting in that it requires this kind of behavior to allow more intricate programming techniques to evolve. Now, whenever you receive an error of "undefined" or "cannot access before initialization," you will know the cause of the error.
Top comments (0)