Hoisting in JavaScript
Hoisting might sound a bit confusing but it’s really not, let’s see how.
What is Hoisting ?
Hoisting is a JavaScript mechanism where variables and function declarations are available before the execution starts, regardless of whether their scope is global or local. In other words, functions and variables are hoisted in JavaScript.
Let’s see how hoisting works for variables and function declarations below :
Hoisting for Function Declarations
Before the execution starts, all the function declarations are present in the memory object. A property is created in the memory object, which points to the functions.
In the below snippet, as we all know, in this case, the result will be 5.
function add(a, b){
console.log(a + b); //5
}
add(2,3)Now, let’s see what happens when we do it the other way round.
add(2,3)function add(a, b){
console.log(a + b); //5
}
In the above snippet, the function is called before it is declared and the result is the same without any error being thrown, this is hoisting in action. The function declaration is stored in the memory before the code is executed. When the code executes, the function is already available for us to use.
Now, we all are aware of the term function expressions right ? So let’s see if hoisting works for function expressions.
const add = function(a, b){
console.log(a+b); //3
}
add(1,2);The above snippet is a function expression, where we get the desired result when the code is executed, i.e 3. Now let’s try and see what happens when we do it the other way round.
add(1,2);const add = function(a, b){
console.log(a+b); //error
}
This does not work because it is a function expression and not a function declaration. So let’s note that Hoisting works only for function declarations and not function expressions.
Hoisting for Variables
So let’s see how hoisting works for variables
console.log(foo); //undefined
var foo = 10;
console.log(foo); //10
In the above code we have used the variable before we declare it and it gives us undefined. This is how hoisting works for variables. The memory is scanned for variable declarations before the execution phase and the variables are set to undefined. Variables which do not have a value yet are always set to undefined.
console.log(abc); // undefined
var abc= 23;
function foo(){
console.log(abc); //undefined
var abc= 65;
console.log(abc); //65
}
foo();
console.log(abc); //23
The variable inside the function gets its own execution context and prints the result where as the variable outside the function is stored in the global execution context of the memory.
So, we know how hoisting works in JavaScript :) Thank you.
