Introduction
When you load your javascript to browser, javascript engine executes it and create global execution context. That has two phases.
- Creation
- Execution
Hosting happens on when the phase on creation mode, the javascript engine moves the Variable and Function declaration to the top of the scope.
Variable Hoisting
Lets run the Example : 1 code first.
Example : 1
console.log(name); <em>// undefined</em>
var name = "JavaScript";
Hope it doesn’t make an error and showing“undefined”. Cause Javascript moves the Variable declaration top of the scope.
okay, just run Example : 2 code
Example : 2
var name;
console.log(name); <em>// undefined</em>
var name = "JavaScript";
I think , still you got the same result on example two.
Its meaning during the creation phase,var nameautomatically declare to the top & initialize value“undefined”
Function Hoisting
Lets run the Example : 1 code first.
Example : 1
let result = add(20, 30);
console.log(result);
function add(a, b) {
return a + b;
}
Like as Variable Javascript engine hoisted the function to the top.
Example : 2
function add(a, b) {
return a + b;
}
let result = add(30, 30);
console.log(result);
If you compare the output both are giving same result. During the creating phase thefunction addautomatically move to the top of scope.
Note :
- Unlike var, they are not initialized with a default value while hoisting.
- They cannot be read/written until they have been fully initialized.
- Javscript hoisting not working arrow function and expression.
