What is hoisting?
In the Global Execution Context, there are two stages, the creation stage, and the execution stage. The former provides the Global Object (e.g. ‘Window’ in the browser), the this keyword, and hoisting. The latter is when we run our code.
First up is partial hoisting. This applies to variables only. Functions are handled differently. So consider the code below:
So on the first line we try and console.log our favouriteDrink variable. There’s a problem here though – we haven’t defined it yet. So really we should get a Reference Error right? Where is undefined coming from?
Great, so how about a trickier example? Look at the code below:
When you run the code above, our second console.log statement predictably returns beer, as we’re taking the latest declaration of the variable.
As a note, remember that the following won’t work:
const a = 'Foo';
let b = 'Bar';
Neither const not let get hoisted.
Function declarations (but not expressions, or arrow functions) are fully hoisted. This means that the function is allocated space in the memory heap, but instead of simply creating a placeholder like we saw in the previous section, the contents of that function are stored in memory. So for an example:
So let’s look at a more complex version:
Then when we call console.log again, we have a value assigned to our variable and we get our correct output. Make sense?
Please note that the following won’t work:
So that is a very quick introduction to hoisting. Hopefully you found this easy to follow and now understand the concept better. It’s actually pretty simple.
Originally published at ruairidhwm.github.io on March 19, 2019.