Before knowing about hoisting get well versed with 'Execution context' in Javascript and how it works without it we can not understand the hoisting,
So what is Execution context -
Imagine your JavaScript program as a series of instructions to be executed. The execution context is like a backstage area that keeps track of what's happening.
Global Execution Context (Main Stage):
When you run your script, a global execution context is created. It's like the main stage for your entire program.
This context has its own space for variables and instructions, and it manages the overall flow of your script.
Function Execution Context (Sub-stages):
When a function is called, a new execution context is created for that function. Think of it as a sub-stage within the main stage.
This new context has its variables and instructions specific to that function. It helps keep things organized.
Call Stack (Execution stack):
The call stack is like a to-do list that keeps track of which contexts are currently in play.
When a function is called, its context is added to the top of the stack. The JavaScript engine works on the context at the top of the stack.
Execution Context Lifecycle:
As functions finish executing, their contexts are removed (popped) from the stack, and the control goes back to the context below it.
This process continues until the entire script is done.
In simpler terms, the call stack is like a stack of plates, and each plate represents an execution context. When you call a function, you add a plate to the stack. When the function is done, you remove the top plate. The main stage (global context) is where everything starts, and the sub-stages (function contexts) come and go as needed.
Now let's see what Hoisting is!
Hoisting is like JavaScript's backstage pass. It's a behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, even before the code is executed.
In simpler terms, imagine you're reading a script from top to bottom like a story. Hoisting is like someone giving you a sneak peek at the characters before you start reading. So, even if you declare a variable or function later in your code, JavaScript "hoists" it up, making it available for use from the beginning of the scope.
console.log(x); // Outputs: undefined
var x = 18;
console.log(x); // Outputs: 18
Even though console.log(x) appears before the variable declaration var x = 18;, JavaScript hoists the variable declaration to the top during the compilation phase. So, when the code runs, it's as if the variable was declared at the top, giving you undefined for the first console.log and 18 for the second one.
Similarly, function declarations are also hoisted. For example:
hello(); // Outputs: "Hello!"
function hello() {
console.log("Hello!");
}
In this case, the function hello is hoisted to the top, so you can call it even before its actual declaration in the code.
Also In JavaScript, when a variable is hoisted, it gets initialized with the value undefined by default. However, for function declarations, the entire function is hoisted, including its definition and code, so you can use it before its actual declaration in the code.