Hoist Me Up, Scotty…
What is hoisting in ES6 and how to make it work for you?
Hoisting is how Javascript moves declarations to the top of their scope and stores them in memory during the compile phase before the file is executed.
It is what allows you to invoke a function or reference a variable before it is declared. However, only declarations are hoisted and not assignments.
So, how does hoisting affect your code?
There are a few ways hoisting will affect your code. The first is how you write and call your functions. When a function declaration is hoisted, the function can be invoked before the function has been declared.
For example :
This code will return “This is a hoisted function declaration” because function declarations are hoisted.
This is not the case for function expressions. Function expressions can not be hoisted. These functions have to be initialized before they can be invoked.
This code will throw a ReferenceError because the function expression can not be invoked before it is initialized. The result would be the same if you use arrow functions as well since those are also expressions.
If you want the ability to invoke your functions from anywhere in your code, then you’re going to want to utilize function declarations. Hoisting makes this possible. The benefit of using a function expression, also known as an anonymous function, is that it is stored in a variable. It can be used inside of an if statement or for loop. It is also more concise and can be written in one line.
Variables are also affected by hoisting…
For variables, whether it can be hoisted depends on the keyword used to initialize the variable. If using var the variable declaration will be hoisted but not the initialization. For let and const, variables are not hoisted. They cannot be accessed before their declarations and will throw a reference error.
For example :
The variable twelve will return undefined because the variable declaration has been hoisted and not the assignment. Since only the variable declaration is hoisted, what is stored in the variable is undefined because it hasn’t been defined in the code yet.
The variable ten will throw a “ReferenceError: ten is not defined” because with let the variable cannot be accessed before it is defined.
The variable eight will throw a “ReferenceError: Cannot access ‘eight’ before initialization” because of the same reason as let. The difference between let and const is that with const you can not reassign the variable after it is declared. These errors occur because of how these variables are scoped. Var has global or function scope depending on where it was declared. If it has global scope, it allows access to the variable through the file. Let and const have block scope and can be accessed within the block it was declared.
“Change is the essential process of all existence.”
-Spock
But what is the purpose of hoisting?
Although with hoisting there are some limitations of using anonymous functions and variables. Hoisting gives you the advantage of using functions before you declare it in your code.
