Hoisting is the process of lifting and declaring a variable defined with
varto the top of its scope, be it functional scope (if defined in function) or global scope (if declared outside of a function). Additionally, function declarations are hoisted to the top of the current scope as well.
Let’s dive into some code.
So now that we have our definition, what do we mean by “lifted and declared”?
The above is actually executed as the following:
We can see the difference between declaring a variable (that is hoisted) and not declaring a variable at all.
Let’s go a bit further, what about variable hoisting within a function?
Given that there is no block scope when using
var, the variable
x is hoisted to the top of the function.
As variables as hoisted, so are function declarations.
Function declarations are hoisted to the top of the scope chain.
Function expressions are not hoisted.
Function hoisting overrides variable hoisting.
For reference, if we did not have the function declaration, our log statement would print
Initializing our variable will override the function declaration.
This is because during execution, the above example is actually changed to the following:
Confusing, no? Shouldn’t what we write at author time (i.e. the lexical scope) be the same as what is happening during execution? Why yes, yes it should be. Enter ES6!
ES6 Block Scope and Hoisting
The good news is that block scope helps us avoid pitfalls introduced with hoisting. Let’s bring back our previous example using
const instead of
let in this manner will trigger a
And we will get the same error with
Identifiers (i.e. variables) declared with the
var keyword are created as if they are defined at the top of the scope (be it function or global). This process is called “hoisting” and applies to variables defined with
var and function declarations.
While block scope with
Check out the further reading below and happy coding!