Hoisting can be a tricky part of JavaScript to understand. This article will give a concise definition of hoisting and simple examples of it in action.
In JavaScript, the default action is for declarations to be moved to the top of the code. Declarations are moved to the top of the current scope by the JavaScript interpreter, meaning the top of the current function or scripts. All functions and variables are hoisted.
The best way to understand function hoisting is to first look into how variable hoisting works, the principles are similar and will give an understanding for functions. The following code will show the intended output of something with the declaration written afterwards.
console.log(laterDeclare);
var laterDeclare = "Define me later!"; // Output: Define me later! JavasScript internally takes these variables that have been declared later on during the program and hoists them up to the top to be read first. The JavaScript interpreter is scouring through the entire program and puts these declarations first so that the prior code does not output an error. The equivalent code written like this is essentially what the JavaScript interpreter is reading.
var laterDeclare = "Define me later!";
console.log(laterDeclare);
// Output: Define me later!The same idea can be applied to function hoisting, but with a bit of a twist and few subtle nuances.
Function Hoisting
Certain types of function declarations follow the same behavior as a variable does. This can be extremely helpful because it makes your code more streamlined and readable. It is useful because higher abstract level logic can be applied at the start of the source code. Take this simple function declaration as an example:
hoistFunc(); // "Functions hoist too!"
function hoistFunc() {
console.log("Functions hoist too!");
}The JavaScript interpreter allows for a function declaration to be read like this. The difference comes when trying to do the same thing for a function expression. If you attempt to do that, you’ll run into an error.
// TypeError: Undefined
nonHoistedFunc();
var nonHoistedFunc = function () {
console.log("This will not work!");
};The function will not be hoisted if it is part of the overall expression. Another aspect to take into account is the fact that initializations are not hoisted, only variables and functions. Now let’s take this one step further to see the other ways you can get an undefined output through improper code practices with variables inside the function. Take the following code as an example for when you may run into an undefined output.
// Undefined
var outputValue = 'first string';
(function() {
console.log(outputValue);
var outputValue = 'local string';
})();Applying what we already know about hoisting, you can gather one major takeaway from the previous code example. The local variable inside the function is going to be hoisted to the top, thus clobbering the first variable. Since initializations are not hoisted, the output of this function would come out to be undefined.
Overall, this behavior needs to be kept in mind while writing functions in JavaScript. A good way to avoid the previous problem is to simply place the variables at the top of the local area in the function (hoist them yourself). It is always good to be conscious where you place your code, when dealing with hoisting of functions.
5 keys to successful organizational design
How do you create an organization that is nimble, flexible and takes a fresh view of team structure? These are the keys to creating and maintaining a successful business that will last the test of time.
Read more8 ways to stand out in your stand-up meetings
Whether you call them stand-ups, scrums, or morning circles, here's some secrets to standing out and helping everyone get the most out of them.
Read moreTechnology in 2025: Prepare your workforce
The key to surviving this new industrial revolution is leading it. That requires two key elements of agile businesses: awareness of disruptive technology and a plan to develop talent that can make the most of it.
Read more