Hoisting - Falicer/Project_Tech_2021 GitHub Wiki

What is Hoisting?

Hoisting is when the JavaScript interpreter moves all variable and function declarations to the top of the current scope. It's important to keep in mind that only the actual declarations are hoisted, and that assignments are left where they are.

Hoisting is done during the interpreter's first run through the code.

Hoisting Variables

The following is the JavaScript lifecycle and indicative of the sequence in which variable declaration and initialisation occurs.

As this image kinda shows, Hoisting is the action of declaring variables on the top of your code file, initializing the variables and then using these variables to manipulate the content of it.

A small example with a function to showcase good hoisting:

hoisted(); // This function has been hoisted.  

function hoisted() {  
    console.log('This function has been hoisted');  
}

This will result the function putting out a console log with "This function has been hoisted".

Summary

Hoisting is the act of declaring variables, classes and functions before using them.

Sources

wabirached. (2020). Understanding Hoisting in JavaScript. Retrieved May 20, 2021, from https://www.codingame.com/playgrounds/7974/understanding-hoisting-in-javascript

Bhatia, K. (2019, September 9). The Magic of Hoisting. Retrieved May 20, 2021, from https://medium.com/better-programming/magic-of-hoisting-3fec34978fd8

Wakio, M. (2019, December 23). Understanding Hoisting in JavaScript. Retrieved May 20, 2020, from https://scotch.io/tutorials/understanding-hoisting-in-javascript