Hoisting is the mechanism where the JS interpreter scan the code and hoists the variables and functions at the top so that they can be accessed before declaring them.
Javascript handles hoisting of variables and functions differently.
Variable Hoisting
var
console.log(name) // undefined
var name = "xyz"
console.log(name) // "xyz"
After hoisting, the above code looks like the code snippet written below
var name;
console.log(name) // undefined
name = "xyz"
console.log(name) //
Hence the first line of console.log(name) outputs undefined instead of throwing an error.
let and const
They way hoisting is handled with let and const is different than how var is handled. We wont be able to access the variable until it is declared.
Lets look at the previous example with let keyword
console.log(name) // throws error
let name = "xyz"
console.log(name) // "xyz"
This happens because, in case of var, before executing the code line by line, variables are declared and initialised with undefined. But, let/const doesn't get initialised until it finds the initialisation in the code. So, when we try to access the variable, it throws an error.
Function Hoisting
In JS there are three ways of in which we create function.
- Function Declaration
- Function Expression
- Arrow functions
Function Declaration
Ex of regular function declaration
function addNum(a, b){
return a+b;
}
When the interpreter scans the JS code, regular function definitions are hoisted at the top and made available at all other places
console.log(addNum(4, 5)) //prints 9
function addNum(a, b){
return a+b;
}
Once this code is hoisted it looks as below
//Hoisted function definition
console.log(addNum(4, 5)) //prints 9
...
...
Rest of the code follows
Function Expression
console.log(add(4, 5)) //throws error add is not a function
var add = function (a, b){
return a+b;
}
functions Expressions are not completely hoisted in JS, Instead only declarations are hoisted bcz, it is only recognised as variable.
In the same way, when a function is referenced using let keyword, hoisting behaves the same way as that of regular let.
Ex:
console.log(add(4, 5)) //throws error
let add = function (a, b){
return a+b;
}
Arrow functions
Just like function Expressions, arrow functions are not hoisted in JS
Top comments (1)
Nicely explained