Understanding hoisting in JavaScript
Every undertaking is outstanding with understanding, for you to have a successful outcome, there must be a deep understanding. Are you a beginner? A javascript developer? Just passing by? Or you want to understand Javascript better? Well, you are in the right place!
This can be a confusing topic for the uninitiated since this is a unique feature that you don’t see in many other languages. In JavaScript, a variable can be declared after it has been used. In other words, a variable can be used before it has been declared. Hoisting in JavaScript is a tricky technique, but when used correctly can be beneficial to your code. Before we dive in, let’s get a grips of what hoisting is.
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
If you’ve ever wondered why you were able to call functions or use a variable before you wrote them in your code, hoisting is the reason why. Hoisting means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. For example
In the above example, variable c is used before declaring it. And the program works and displays the output Comfort. The program behaves as:
Here, the variable c is declared before using it and the program display the output Comfort.
The former, however did not return an error for using the variable c before as declaring it. Interesting right? But, how is this possible? In JavaScript, before code is executed line by line, the JS Engine will set aside memory space for the variables that you’ve created in that entire code you’ve built and all the functions you created as well. Essentially, javascript moves the variable declaration to the top of the program before execution.
Variable and function declarations are hoisted to the top of their scope and not initializations.
So, if everything makes sense to you at this point and you understood it. Good job! You now know what hoisting is. But let’s push it a little further.
Variable Hoisting
Hoisting is done within the context of declarations. In terms of variables and constants, the keyword var is hoisted because the scope of a variable declared with the keyword var is its current execution context. Whereas let and const does not allow hoisting. Using a let variable before it is declared will result in a ReferenceError. This is known as the Temporal dead zone. And using a const variable before it is declared, is a syntax errror, so the code will simply not run.This is because with the introduction of javascript ES6 let and const keywords, variables can now be declared using these keywords which are block-scoped by default, and are not hoisted.
Function Hoisting
A function can be called before declaring it. JavaScript functions can be loosely classified as the following:
- Function declarations
- Function expressions
Function declaration are hoisted completely to the top. However, when a function is used as an expression, an error occurs because only declarations are hoisted. Therefore function expressions are not hoisted. To avoid this pitfall, we would make sure to declare and initialise the variable before we use it.
In conclusion, a proper understanding of this concept goes a long way to help in effective code development and to avoid unneccessary bugs. Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript. If a developer doesn’t understand hoisting, programs may contain bugs (errors).To avoid bugs, it is best practice to always declare all variables and functions at the beginning of every scope. Since this is how JavaScript interprets the code, it is always a good rule. Alternatively, use strict mode to help expose undeclared variables.
Happy coding!
