Variables: var, let, const & Scope

9. Practice Problems

1. Show that var hoists as undefined but let throws.
   ✨ Show Answer

   a1.js

   console.log(a);  // undefined
   var a = 10;
   
   try { console.log(b); }
   catch (e) { console.log("err:", e.message); }
   let b = 20;

   Run Copy

2. Demonstrate that const on an array still allows push.
   ✨ Show Answer

   a2.js

   const arr = [1, 2];
   arr.push(3);
   arr[0] = 9;
   console.log(arr); // [9, 2, 3]

   Run Copy

3. Predict the output: a for loop with var + setTimeout printing i. Then fix it with let.
   ✨ Show Answer

   With var, every callback closes over the same i (final value 3). With let, each iteration gets a fresh binding.

   a3.js

   for (var i = 0; i < 3; i++)
       setTimeout(() => console.log("var:", i), 0);
   
   for (let j = 0; j < 3; j++)
       setTimeout(() => console.log("let:", j), 0);

   Run Copy

4. Write a function that creates an inner counter using lexical scope.
   ✨ Show Answer

   a4.js

   function makeCounter() {
       let n = 0;
       return () => ++n;
   }
   const c = makeCounter();
   console.log(c(), c(), c()); // 1 2 3

   Run Copy

5. Use Object.freeze to make a config object truly immutable.
   ✨ Show Answer

   a5.js

   "use strict";
   const CONFIG = Object.freeze({ apiUrl: "/api", retries: 3 });
   try { CONFIG.retries = 5; }
   catch (e) { console.log("blocked:", e.message); }
   console.log(CONFIG);

   Run Copy

6. Show that let in a for loop creates one binding per iteration.
   ✨ Show Answer

   a6.js

   const fns = [];
   for (let k = 0; k < 3; k++) {
       fns.push(() => k);
   }
   console.log(fns.map(f => f())); // [0, 1, 2]

   Run Copy

7. In one paragraph, explain why var should never appear in modern code.
   ✨ Show Answer

   Answer: var is function-scoped, hoisted as undefined, and silently re-declarable — three behaviours that conspire to produce ghost bugs that only show up far from where the variable was written. let and const are block-scoped, throw on TDZ access, and refuse silent re-declaration, so most accidents become visible at the line that caused them. Linters and toolchains in 2026 default to forbidding var.

   var function-scoped, hoisted-as-undefined এবং re-declarable — তিনটি বৈশিষ্ট্য একসাথে এমন bug তৈরি করে যা declaration থেকে অনেক দূরে দেখা দেয়। let/const এসব সমস্যা দূর করে।

8. Show that let in a block is invisible outside.
   ✨ Show Answer

   a8.js

   {
       let hidden = 42;
       console.log("inside:", hidden);
   }
   try { console.log(hidden); }
   catch (e) { console.log("outside:", e.message); }

   Run Copy

9. Predict the output of three nested functions accessing an outer const.
   ✨ Show Answer

   a9.js

   const g = "global";
   function a() {
       const m = "middle";
       function b() {
           const i = "inner";
           console.log(g, m, i);
       }
       b();
   }
   a(); // global middle inner

   Run Copy

10. Show that re-declaring let x in the same scope is a SyntaxError.
    ✨ Show Answer

    You can't catch a SyntaxError at runtime — it's detected at parse time. Try copying this into the browser console:

    a10.js

    // SyntaxError when parsed:
    // let z = 1;
    // let z = 2;
    
    // var allows it (silently!):
    var w = 1;
    var w = 2;
    console.log(w); // 2 — silent overwrite, classic var bug

    Run Copy

11. Build a tiny "module" using an IIFE and a closure to keep state private.
    ✨ Show Answer

    a11.js

    const wallet = (() => {
        let balance = 0;
        return {
            deposit(n) { balance += n; },
            balanceOf() { return balance; }
        };
    })();
    wallet.deposit(100);
    wallet.deposit(50);
    console.log(wallet.balanceOf()); // 150
    console.log(wallet.balance);     // undefined (private)

    Run Copy

12. Why is "use strict" usually unnecessary inside an ES module?
    ✨ Show Answer

    Answer: ES Modules are strict by default. Anything loaded with <script type="module"> or imported in Node runs in strict mode automatically — silent globals throw, this is undefined at the top level, and reserved words can't be used as identifiers.

    ES module-এ "use strict" লেখার দরকার নেই — module-এ এটি default-ভাবেই enabled থাকে।