Hoisting is a phenomena by which we can access variables and functions even before we have declared them without running into any error. Let's see the above statement in practice with the below example where we are trying to console variable "a" before it is declared.
We can see that the debugger is on the very first line of the code and none of the code has been executed yet but in the Global scope at the bottom we can see variable "a" is initialised to undefined and function "addNumbers" has the entire function definition assigned to it.
Output after running the code without any errors
# So why didn't we run into any errors here?
- A execution context was created for this code before the execution starts.
- The first step in an execution context is to allocate memory to each and every variable and function.
- During this assignment of memory it assigns each variable with a special keyword i.e. "undefined" and the functions declared using "Function Declaration" fashion with the entire function copy.
# Will a function work the same way as above if we declare the function using "function expression"?
No, it won't work as the function will be treated as a variable hence it will be assigned "undefined" during memeory allocation step.
# Will hoisting work the same way if we declare variables with "const" and "let"?
Hoisting doesn't work with const and let. They are also hoisted but are never hoisted with a default value like it happens in case of var and functions. Hence, we will run into a ReferenceError.
How to conditionally render in React Functional Components | ReactJs Interview Questions
Discover the power of React's conditional rendering to create dynamic user interfaces.
Stop using Redux for state management | Alternatives to redux
Discover how React can effectively handle passing down state and actions to child components without relying on a centralized state management library like Redux.
Learn how data is handled and shared in function arguments, variables, and objects with simple examples.