JavaScript Hoisting
Hoisting is a JS default behavior of defining all the declarations at the top of the scope before code execution. Its main benefit is enabling us to call functions before they appear in the code.
I noticed during my first month of coding Vanilla JS that, not fully understanding the concept of hoisting could cause a lot of issues/bugs/errors down the road. Through this blog, I am going to explain what goes under the hood of JS hoisting.
When you execute a piece of JavaScript code, the JavaScript engine creates the global execution context .
There are two phases in the global execution context: creation and execution. Hoisting occurs during the first phase, aka the creation 😉. JavaScript engine moves the variable and function declaration to the top. That is what is called hoisting.
Does hoisting always occur?
Short answer: Yes! Better answer: No!
Here is a brief breakdown for when hoisting does not work:
Variable hoisting
Variable hoisting means the JavaScript engine moves the variable declaration to the top of the script. The following example declares the hello variable and sets its value to “hi”. The return value is undefined.
console.log(hello); // undefined
var hello= "hi";It looks like the var hello was declared but never assigned. hmm..🧐!
Technically, it means that, during the creation phase of the global execution context, the JavaScript engine places the variable hello in the memory and initializes its value to undefined.
The let keyword
console.log(hello);
let hello = "hi";// "ReferenceError: Cannot access 'hello' before initialization
The error message explains that the hello is already in the heap memory. However, it hasn’t initialized.
Behind the scenes, the JavaScript engine hoists the variable declarations that use the let keyword. However, it doesn’t initialize those variables.
Function expressions
The following example changes the add from a regular function to a function expression:
let x = 30,
y = 10;
let result = add(x,y);
console.log(result); //add is not a function var add function(x, y) {
return x + y;
}
During the creation phase of the global execution context, the JavaScript Engine creates the add variable in the memory and initializes its value to undefined. The add variable is assigned to an anonymous function only during the execution phase of the global execution context.
Arrow functions
Arrow functions are not hoisted either. the following example showcases the arrow functions hoisting concept. It works the same way as function expressions.
let x = 20, y = 10; let result = add(x,y); console.log(result);
//"TypeError: add is not a functionvar add = (x, y) => x + y;
If there is something we should remember, it would be our concept of declaration before initialization, in case of let & declaration and initialization to undefined, in case of variables, function expressions (same as variable), and arrow functions.
citation: “JavaScript Hoisting Explained By Examples.” JavaScript Tutorial, 30 Apr. 2020, www.javascripttutorial.net/.
