🔍 Day 33 — Closures, Scope & Hoisting in JavaScript

Welcome to Day 33 🌱 Today we’re tackling three of JavaScript’s most fascinating—and interview-favourite—concepts: Scope, Hoisting, and Closures. Understanding them turns you from a script writer into a real JavaScript engineer who knows what happens under the hood.

🧩 1️⃣ Understanding Scope

Scope decides where variables are visible in your program. JavaScript has three main kinds of scope:

• Global Scope – visible everywhere in the file.
• Function Scope – variables defined inside a function are not visible outside it.
• Block Scope – (let/const) inside { } braces are limited to that block.

let globalVar = "I’m global";

function demoScope() {
  let localVar = "I’m local";
  if(true){
    const blockVar = "I’m block-scoped";
    console.log(blockVar); // ✅
  }
  // console.log(blockVar); ❌ not visible here
  console.log(globalVar, localVar);
}

demoScope();

⚙️ 2️⃣ Lexical Scope

Lexical scope means functions can access variables from the place they were defined, not from where they’re called.

function outer(){
  let outerVar = "outside";
  function inner(){
    console.log("Accessing:", outerVar);
  }
  inner();
}
outer();

Even though inner() is called inside outer(), it remembers variables from its lexical environment.

💡 3️⃣ Hoisting — How JavaScript Lifts Declarations

When JS runs a script, it first creates memory for variables and functions before executing them. That’s called hoisting.

console.log(a); // undefined (not error)
var a = 5;

sayHi(); // Works!
function sayHi(){ console.log("Hi there!"); }

• var is hoisted but initialized with undefined.
• let/const are hoisted but remain in the Temporal Dead Zone until execution reaches them.
• Function declarations are fully hoisted.

🔒 4️⃣ Closures — Functions That Remember

A closure is created when an inner function remembers and accesses variables from its outer function, even after that outer function has finished executing.

function counter(){
  let count = 0;
  return function(){
    count++;
    console.log("Count:", count);
  }
}
const add = counter();
add(); // 1
add(); // 2
add(); // 3

Each call to counter() creates a new private scope that the returned function continues to access. Closures help create private variables and maintain state.

📦 5️⃣ Real-World Closure Example

function makeMultiplier(factor){
  return function(number){
    return number * factor;
  }
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

🧠 6️⃣ Common Interview Question

for(var i=1;i<=3;i++){
  setTimeout(()=>console.log(i),1000);
}
// Prints 4,4,4 — not 1,2,3

Because var is function-scoped. Fix it with let or an IIFE:

for(let i=1;i<=3;i++){
  setTimeout(()=>console.log(i),1000);
}

🎯 Summary

Closures give JavaScript its power to remember state. Scope defines visibility, hoisting defines timing, and closures bind them together to create magic. Tomorrow, we’ll peek inside JavaScript’s engine itself — how the Event Loop and Call Stack manage everything asynchronously.

← Prev Next →