Top 5 JavaScript Interview Problems (With Real-World Solutions)

Chapter 2: Variable Scope, Hoisting & Closures — with Real Interview Challenges

🧠 Why This Matters

This isn’t just about var, let, and const.

This is about:

• Why your variables aren’t behaving the way you expect
• Why callbacks act weird inside loops
• How to create memory-efficient logic in JavaScript
• Solving real bugs in live interview environments

Interviewers use scope, hoisting, and closure challenges to separate people who know syntax from those who know how JavaScript really works under the hood.

Let’s break it down — and then apply it in battle-tested, real-world problems.

🔎 Scope in JavaScript

Scope defines where variables and functions are accessible.

💡 Types of Scope:

✅ Scope Example:

function run() {

  let x = 5;

  if (true) {

    let y = 10;

    console.log(x); // ✅ 5

    console.log(y); // ✅ 10

  }

  console.log(y); // ❌ ReferenceError

}

🚀 Real-World Challenge #1: Scope Shadowing

var a = 1;

function outer() {

  var a = 2;

  function inner() {

    console.log(a);

  }

  return inner;

}

const result = outer();

result(); // What gets logged?

✅ Answer: 2
Because of lexical scope, inner() remembers the a defined in its outer environment.

🔁 Hoisting in JavaScript

🚨 Hoisting = Declarations are moved up during compilation

console.log(name); // undefined

var name = "Ali";

console.log(age); // ❌ ReferenceError

let age = 25;

var is hoisted (with value undefined)
let is hoisted but in the Temporal Dead Zone (TDZ) until initialized

🚀 Real-World Challenge #2: TDZ Trap

function test() {

  console.log(a); // ???

  let a = 10;

}

test();

✅ Answer: ReferenceError
Why? let was hoisted but not initialized — it's in the Temporal Dead Zone.

🔒 Closures — Functions That Remember

A closure is when a function “remembers” variables from its outer scope — even after that outer scope has finished executing.

🔁 Closure Example

function counter() {

  let count = 0;

  return function () {

    return ++count;

  };

}

const increment = counter();

console.log(increment()); // 1

console.log(increment()); // 2

✅ count stays in memory thanks to the closure

🚀 Real-World Challenge #3: Custom Counter Using Closure

// Implement this function:

const counter = createCounter();

console.log(counter()); // 1

console.log(counter()); // 2

console.log(counter()); // 3

✅ Solution:

function createCounter() {

  let count = 0;

  return function () {

    return ++count;

  };

}

🔁 Closure in Loops — The Classic JS Bug

for (var i = 0; i < 3; i++) {

  setTimeout(() => console.log(i), 1000);

}

// Expected: 0 1 2

// Actual: 3 3 3

✅ Fix 1: Use let (block scoped):

for (let i = 0; i < 3; i++) {

  setTimeout(() => console.log(i), 1000); // ✅ 0 1 2

}

✅ Fix 2: Use closure (IIFE):

for (var i = 0; i < 3; i++) {

  (function (x) {

    setTimeout(() => console.log(x), 1000);

  })(i);

}

🚀 Real-World Challenge #4: Closure in DOM Event Handlers<button id="btn0">Button 0</button>

<button id="btn1">Button 1</button>

<button id="btn2">Button 2</button>

for (var i = 0; i < 3; i++) {

  document.getElementById(`btn${i}`).addEventListener("click", function () {

    console.log(i); // ❌ Always logs 3

  });

}

✅ Fix it using a closure:

for (var i = 0; i < 3; i++) {

  (function (index) {

    document.getElementById(`btn${index}`).addEventListener("click", function () {

      console.log(index);

    });

  })(i);

}

✅ Or just use let:

for (let i = 0; i < 3; i++) {

  document.getElementById(`btn${i}`).addEventListener("click", function () {

    console.log(i);

  });

}

✅ Summary