Hoisting in JavaScript: What You Should Know

What is Hoisting?

Javascript is the language of the web and when used appropriately is very powerful. Hoisting is Javascript's ability to access certain program elements(functions and var) during runtime even before their program declaration is encountered.

Suppose you have a function as below:

You might be wondering if line 1 will execute considering it is being called even before it is declared.

Well, it does work,

Why does it work? isn't it supposed to be declared before being used?

You"re about to find out why and how it works...

When JavaScript code is executed, the JavaScript engine performs two passes through the code. During the first pass, known as the "creation" phase, the engine sets up the memory space for all variable and function declarations in the current scope, and assigns them with default values. For example, when a variable is declared using the var keyword, it is automatically initialized with a value of undefined. During the second pass, known as the "execution" phase, the engine executes the code in the order that it appears in the script. When the engine encounters a variable or function that has been declared, it will first look for it in the current scope. If it is found, the engine will use that value. If it is not found, the engine will look for it in the outer scope, and so on until it reaches the global scope. If a variable or function has not been declared yet, but is used in the code, the engine will still be able to find it because it was already declared during the creation phase and initialized with a default value. So, in short, hoisting works by moving all variable and function declarations to the top of their respective scopes during the creation phase, before the code is executed.

Well You should remember that;

Variables defined with let and const are hoisted to the top of the block, but not initialized. Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.

Using a let variable before it is declared will result in a ReferenceError.

Using a const variable before it is declared, is a syntax error, so the code will simply not run.

Conclusion

While hoisting enables certain Javascript program elements like functions and variables declared using the var keyword to be used even before the declaration, others like objects and variables declared using the let and const keywords would result in an error. Most times the use of hoisting is not encouraged and shouldn't be used. Hoisting impedes code readability as functions are used before the declaration, to avoid bugs, always declare all variables at the beginning of every scope.