Things you should know about JavaScript Hoisting.
- What is hoisting in JavaScript?
- Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase. This means that you can use variables and functions before they are declared in the code.
- Does hoisting affect both variable and function declarations?
- Yes, hoisting affects both variable and function declarations. However, how they are hoisted differs between
var,let,const, and function declarations.
- Yes, hoisting affects both variable and function declarations. However, how they are hoisted differs between
- What is the difference between the hoisting of
varandlet/constvariables?- Variables declared with
varare hoisted and initialized withundefined. Variables declared withletandconstare also hoisted, but they are not initialized. Accessing them before their declaration results in a ReferenceError due to the “temporal dead zone” (TDZ).
- Variables declared with
- How are function declarations hoisted compared to function expressions?
- Function declarations are fully hoisted, meaning both the function name and its implementation are moved to the top of the scope. Function expressions, whether using
var,let, orconst, only have their variable declaration hoisted, not the assignment. Therefore, accessing them before their assignment results inundefinedforvaror a ReferenceError forletandconst.
- Function declarations are fully hoisted, meaning both the function name and its implementation are moved to the top of the scope. Function expressions, whether using
- Consider the following code snippet:
console.log(x);var x = 5;
What will be the output and why?- The output will be
undefined. This is because the declarationvar xis hoisted to the top of the scope, but the assignmentx = 5is not. Thus, whenconsole.log(x)runs,xis declared but not yet assigned a value.
- The output will be
- Consider the following code snippet:
console.log(x); let x = 5;What will be the output and why?- The output will be a ReferenceError. This is because
letdeclarations are hoisted but not initialized, so accessingxbefore its declaration is within the temporal dead zone.
- The output will be a ReferenceError. This is because
- Consider the following code snippet:
console.log(foo()); function foo() { return "Hello, world!"; }What will be the output and why?- The output will be
"Hello, world!". Function declarations are fully hoisted, meaning both the function name and its body are moved to the top of the scope. Therefore,foois accessible before its declaration.
- The output will be
- Consider the following code snippet:
console.log(foo()); var foo = function() { return "Hello, world!"; }What will be the output and why?- The output will be a TypeError. The variable
foois hoisted and initialized withundefined, but the function assignmentfoo = function() { return "Hello, world!"; }is not hoisted. Thus, whenconsole.log(foo())runs, it tries to callundefinedas a function, which results in a TypeError.
- The output will be a TypeError. The variable
- What happens if you try to access a variable declared with
letorconstbefore its declaration?- Accessing a variable declared with
letorconstbefore its declaration results in a ReferenceError. This is due to the temporal dead zone, the time between entering the scope and the actual variable declaration and initialization.
- Accessing a variable declared with
- True or False: Only function declarations are hoisted, while function expressions are not.
- False. Both function declarations and function expressions are hoisted. However, for function expressions, only the variable declaration is hoisted, not the function assignment. This means the variable is available, but it is
undefineduntil the assignment is reached.
