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
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?
var and realises that a variable is going to be defined. It doesn’t care what the variable is, but it knows that some memory is going to be needed, so it allocates some in the heap so that it’s ready when we need it.
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';
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:
Do you understand why we get undefined in our first
So when we call
favouriteSport() we create a new execution context and hoisting happens. So in our first
console.log we have
undefined until we provide a value to it, in this case – ‘running’.
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.
Personally I would avoid hoisting where I can in favour of more readable code. I tend to use