JavaScript: What is Hoisting?
Hint: It might not be what you think.
If you’re just starting to learn JavaScript, you may have come across the term hoisting before. Before diving into to any definitions, let’s look at an example. Below we’ll create a function, then invoke it:
function cowSays(sound){
console.log(sound);
}cowSays('moo');
As expected when we invoke our cowSays function — passing in a custom string, we get that string logged to the console. In this case, 'moo'.
cowSays('moo');
// mooBut what happens if we invoke our function before we actually declare it?
cowSays('moo');function cowSays(sound){
console.log(sound);
}
Perhaps unexpectedly, 'moo' is once again logged to the console.
cowSays('moo');
// mooThis is hoisting in action.
So, what is happening here? Most commonly, people will explain hoisting as declarations being moved to top of your code. While this is what appears to be happening, it’s important to understand exactly what is going on. You see, your code isn’t moving anywhere. It isn’t magically being moved to the top of the file. What’s actually happening is that your function and variable declarations are added to memory during the compile phase.
In the example above, because our function declaration was added to memory during the compile stage, we’re able to access and use it in our code above where it is typed.
Lets look at an example with a variable:
Typically we would declare and initialize our variable, and then attempt to use it:
var a = 3;
console.log(a);// 3
However, what if we declare our variable at the bottom of our code?
a = 3;
console.log(a);
var a;// 3
As you can see, the above example logs 3.
What about this example, where we declare and initialize our variable at the bottom of our code?
console.log(a);
var a = 3;// undefined
Hmm, this example is the first time we get something unexpected. We expected 3, but instead, undefined is logged.
Why is this? It’s because JavaScript only hoists declarations. Initializations are not hoisted.
If we declare and initialize a variable, say var a = 3;, only the var a; portion (the declaration) is going to be hoisted. The a = 3; (the initialization) is not hoisted and therefor not added to memory.
Remember, when we declare a variable but don’t initialize it, the variable is automatically set as undefined . So lets look back at our final example. In the code below, only the var a; will be hoisted:
console.log(a);
var a = 3;// undefined
In fact, the above code yields the same result as writing it like this:
var a;
console.log(a);
a = 3;// undefined
Best Practices
Because of hoisting, it’s considered a best practice to always declare your variables at the top of their respective scopes. This way there are no undesirable effects. You should also always try to initialize variables when you declare them. This will provide cleaner code and help avoid undefined variables.
Closing Notes:
Thanks for reading! If you’re ready to learn Web Development, check out the The Ultimate Guide to Learning Full Stack Web Development. If you’re just looking to improve your JavaScript Skills, check out: A Beginners Guide to Advanced JavaScript
I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.
