Hoisting in Javascript

Hoisting is JavaScript's behavior of moving declarations to the top of their scope. Understanding hoisting is crucial for avoiding bugs.

Key Concepts

• var declarations are hoisted and initialized with undefined
• let/const are hoisted but in Temporal Dead Zone
• Function declarations are fully hoisted
• Function expressions are not hoisted

---

Variable Hoisting (var)

What actually happens: var x; // Declaration hoisted console.

log(x); // undefined x = 5; // Assignment stays in place console.

log(x); // 5.

Code

console.log(x); // undefined (not ReferenceError)
var x = 5;
console.log(x); // 5

let and const Hoisting (Temporal Dead Zone)

log(y); // ReferenceError: Cannot access 'y' before initialization console.

log(z); // ReferenceError: Cannot access 'z' before initialization let and const are hoisted but in "Temporal Dead Zone" until initialization.

Code

let y = 10;
console.log(y); // 10
const z = 20;
console.log(z); // 20

Function Declaration Hoisting

Function declarations are fully hoisted (both declaration and body).

Code

sayHello(); // "Hello!" - Works because function is fully hoisted
function sayHello() {
  console.log("Hello!");
}

Function Expression Hoisting

sayHi(); // TypeError: sayHi is not a function What happens: var sayHi; // Declaration hoisted, initialized with undefined sayHi(); // TypeError: undefined is not a function sayHi = function() {.

}; // Assignment stays in place.

Code

var sayHi = function() {
  console.log("Hi!");
};

Arrow Function Hoisting

sayBye(); // TypeError: sayBye is not a function Arrow functions behave like function expressions.

Code

var sayBye = () => {
  console.log("Bye!");
};

Hoisting Order

What happens: function a() {.

} // Function hoisted first var a; // Variable declaration hoisted (ignored, already declared) a = 1; // Assignment typeof a is "number".

Code

var a = 1;
function a() {
  return 2;
}
console.log(typeof a); // "number" (not "function")

Hoisting in Different Scopes

Code

function test() {
  console.log(inner); // undefined (hoisted within function scope)
  var inner = "inner variable";
  console.log(inner); // "inner variable"
}
test();

Class Hoisting

const instance = new MyClass(); // ReferenceError Classes are hoisted but not initialized (like let/const).

Code

class MyClass {
  constructor() {
    console.log("MyClass created");
  }
}

Common Interview Questions

Q1: What will be the output.

Explanation: var foo is hoisted to top of function scope Q2: What will be the output.

Q3: What will be the output.

Best Practices ✅ Always declare variables at the top of scope.

code ✅ Use let/const instead of var let and const prevent accidental hoisting issues ✅ Declare functions before using them (for clarity) ✅ Use function expressions for conditional functions.

Code

var foo = 1;
function bar() {
  if (!foo) {
    var foo = 10;
  }
  console.log(foo);
}
bar(); // 10 (not 1)
function test() {
  console.log(a); // undefined
  console.log(foo()); // 2
  var a = 1;
  function foo() {
    return 2;
  }
}
test();
var x = 1;
function test() {
  console.log(x); // undefined
  var x = 2;
  console.log(x); // 2
}
test();
console.log(x); // 1
function goodPractice() {
  let x;
  let y;
  x = 1;
  y = 2;
}
function myFunction() {
}
const myFunc = condition ? function() {} : function() {};

---

Summary

Understanding hoisting is essential for mastering javascript. Practice these examples and experiment with variations to deepen your understanding.

Key Takeaways

• hoisting is a fundamental concept in javascript
• Practice with these examples to build confidence
• Experiment with variations to explore edge cases
• Understanding hoisting will help you in technical interviews