You must have heard term ‘hoisting’ many times but, not sure how it works lets try to understand it together.
First thing lets see the meaning of Hoist, as a google definition the word “Hoist” means
“raise (something) by means of ropes and pulleys.”
So now we have meaning of word lets understand how it works in our program.
As we have seen hoist means to “raise something”. So in our program that “something” is our variables and functions. Since there are three ways to declare the variables lets try to figure them out.
Hoisting with var
var a ; // declared 'a' variable
console.log(a) // printing 'a' variable
As we can see in the snippet we have declared variable first and then accessing it. it will give result as undefined as no value has been assigned. Now lets reverse it. ( try to access variable first and then declare it)
console.log(a) // printing 'a' variable
var a ; // declared 'a' variable
What do you think will happen? If you still think it will give undefined, then you are right! Now lets understand the reason behind it.
The JavaScript interpreter splits the declaration and assignment of functions and variables: it "hoists" your declarations to the top of their containing scope before execution.
So this means whatever variables you declare at different lines ( line 10 or line 1000 ) it does not matter. The interpreter knows that variable with such name exists because it hoists them and respective value to that variable will be assigned to it at that line only.
So you might be thinking what about let and const ? lets understand that..
console.log(a) // printing 'a'
let a; // declaring 'a'
Here in this case the variable a will be hoisted but it will not have default value undefined . it will throw an error Uncaught ReferenceError: Cannot access 'a' before initialization
Notice that interpreter hoists the variable a .the error message tells us the variable is initialized somewhere. Similar is the case with const . It will throw an error. But it will still hoist the variable.
(also you have to initialize const with some value otherwise it will throw an error)
So understand more deeply why this error occurs ? The reason behind this error is Temporal Dead Zone. its an area between beginning of the variable's enclosing scope and when variable is declared.
console.log(a) // accessing a
.
.
.
.// Temporal Dead Zone (TDZ)
.
.
let a; // TDZ ends since variable is declared
Also this hoisting works with functions!
add(1,2)
function add (a,b){
return a+b
}
Function declarations are hoisted too. it allows us to call functions before declaring them. ( this is very useful) Note that function declarations are hoisted and not function expressions.
How to use hoisting?
The function hoisting is very useful when programming. You can write all your functions at the bottom and then call them in your main code. This helps in keeping code clean and debugging also becomes easier.
With variable hoisting, its better to avoid it and avoid using var also. That way it won’t cause any uncertain errors. Also its better to use let and const because if at someplace you are trying to access variable before initializing it will throw an error and won’t waste your time finding out which line was causing the error.
Conclusion
hoisting is useful with functions. avoid variable hoisting and use let and const instead of var this will save your time and also help you avoid unnecessary bugs.