Day 14 — Scope & closures
Hands-on
Topic 1 function makeCounter() {
// function makeCounter() {
// let count = 0; // private — cannot be reached from outside
// return function () {
// count++; // each call mutates the SAME closed-over count
// return count;
// };
// }
// const c = makeCounter();
// console.log(c()); // 1
// console.log(c()); // 2
// console.log(c()); // 3
// console.log(count) // ReferenceError — count is private to the closure
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).
Section 2 2. Private variables — bank account
// 2. Private variables — bank account
// function createAccount(initial) {
// let balance = initial; // PRIVATE — no one outside can touch it
// return {
// deposit: (amt) => balance += amt,
// withdraw: (amt) => balance -= amt,
// getBalance: () => balance,
// };
// }
// const acc = createAccount(1000);
// acc.deposit(500);
// console.log(acc.getBalance()); // 1500
// acc.balance // undefined — truly private
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).
Section 3 3. Memoization — cache expensive results
// 3. Memoization — cache expensive results
// function memoize(fn) {
// const cache = {}; // closed-over cache, lives across calls
// return function (n) {
// if (n in cache) return cache[n]; // hit → return cached
// cache[n] = fn(n); // miss → compute and store
// return cache[n];
// };
// }
// const slowSquare = (n) => { console.log("computing..."); return n * n; };
// const fastSquare = memoize(slowSquare);
// fastSquare(5); // "computing..." → 25
// fastSquare(5); // 25 (no log — served from cache)
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).
Section 4 Part 4
(function () {
const secret = "hidden"; // not visible outside
console.log("IIFE ran");
})();
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).
Section 5 IIFE with parameters
// IIFE with parameters
(function (city) {
console.log(`Greetings from ${city}`);
})("Jaipur");
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).
Section 6 Arrow IIFE (modern)
// Arrow IIFE (modern)
(() => {
const x = 42;
console.log(x);
})();
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).
Section 7 Part 7
const counterModule = (function () {
let count = 0; // private (closure)
return {
inc: () => ++count,
get: () => count,
};
})();
counterModule.inc();
counterModule.inc();
console.log(counterModule.get()); // 2
// counterModule.count // undefined — private
Try the steps, then compare with ../js/day14.js (loaded at the bottom of this page).