Hoisting
Javascript Hoisting:-
Hoisting:-
In JavaScript, hoisting allows you to use functions and variables before they are declared.
Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope.
“Hoisting is the javascript mechanism where variables and function declaration are moved to the top of their scope before the code execution ”
One of the benefits of hoisting is that it enables us to call functions before they appear in the code. JavaScript only hoists declarations, not initializations.
For Example:-
console.log(abc);
var abc = ‘XYZ’;
In the above example , the output of the code is Undefined.
It does not fail or thrown an error even after abc get assigned after we consol.log it.
This is because Javascript interpreter splits the declaration and assignment of functions and variables.
This is because only Declaration hoist,not Assignment.
In the above example,because of hoisting var abc is declare before it is use,but because assignment doesn’t get hoist
The value of var abc is undefined.
console.log(abc); undefined
var abc = ‘XYZ’;
It “hoist” your declarations to the top of the scope before execution (var abc).
This process is called “Hoisting”.
Let’s take a Look at the concept of hoisting in detail:-
We declare a variable with let, var and const.Variabe hoisting act differently depending on how the variable is declared
Let’s seethe behavior for var variables
1] Variable hoisting with var:-
When the interpreter hoists a variable that declare with var(eg. Var abc), it initializes its value to undefined.
For Example:-
console.log(abc) undefined
var abc = ‘XYZ’
console.log(abc) XYZ
It is important to note that first console.log(abc) output is undefined because abc is hoisted and give a default value. Using an undeclared variable will throw a reference error.
eg:
console.log(abc);Uncaught ReferenceError : abc is not defined
2] Variable hoisting with let and const:-
Variable declared with let and const are hoisted but not initialized with default value like var.Accesing let or const variable before it’s declared will result in a ReferenceError:
For Example:-
console.log(abc); Uncaught ReferenceError : cannot access ‘abc’ before initialization
let abc = ‘xyz’
console.log(abc); Uncaught ReferenceError : cannot access ‘abc’ before initialization
const abc=‘XYZ’
3]Function hoisting in javascript:-
Function declaration are also hoisted.Function hoisting allow us to call/invoke a function before it is defined.
For Example:-
abc(); //‘abc’
function abc(){
console.log(‘abc’)
}
Note:-1.Function declarations or Regular functions are hoisted.
2.Function expression, Arrow function ,IIFE (immediately invoked function expression) will not hoist.
For Example:-
1]
abc();Uncaught TypeError:abc is not a function
var abc=function(){}
2]
abc();Uncaught ReferenceError: Cannot access ‘abc’ before initialization
let abc=function(){}
3]
abc();Uncaught ReferenceError: Cannot access ‘abc’ before initialization
const abc=()=>{}
This is different from calling a function that is never declared,which throws a different ReferenceError:
abc();Uncaught ReferenceError:abc is not defined
Note:-If we declared a variable without let,var and const keywords,then that variables turns automatically into global variable or that type of variables called as Window variables.