Higher-Order Functions & Closures

9. Practice Problems

1. Write makeAdder(x) that returns a function adding x to its argument.
   ✨ Show Answer

   a1.js

   const makeAdder = x => y => x + y;
   const add5 = makeAdder(5);
   console.log(add5(3));     // 8

   Run Copy

2. Build a counter that supports increment, decrement, and reset.
   ✨ Show Answer

   a2.js

   function makeCounter(start = 0) {
       let n = start;
       return {
           inc() { return ++n; },
           dec() { return --n; },
           reset() { n = start; return n; }
       };
   }
   const c = makeCounter(10);
   console.log(c.inc(), c.inc(), c.dec(), c.reset());

   Run Copy

3. Implement compose(f, g)(x) === f(g(x)).
   ✨ Show Answer

   a3.js

   const compose = (f, g) => x => f(g(x));
   const pipeline = compose(n => n * 2, n => n + 1);
   console.log(pipeline(5)); // (5+1)*2 = 12

   Run Copy

4. Implement curry for a 3-arg function.
   ✨ Show Answer

   a4.js

   const curry = fn => a => b => c => fn(a, b, c);
   const add3 = (x, y, z) => x + y + z;
   console.log(curry(add3)(1)(2)(3)); // 6

   Run Copy

5. Show the var-loop bug, then fix it three ways: let, IIFE, and forEach.
   ✨ Show Answer

   a5.js

   // Bug
   for (var i = 0; i < 3; i++)
       setTimeout(() => console.log("bug", i), 0);
   
   // Fix 1: let
   for (let j = 0; j < 3; j++)
       setTimeout(() => console.log("let", j), 0);
   
   // Fix 2: IIFE
   for (var k = 0; k < 3; k++)
       ((idx) => setTimeout(() => console.log("iife", idx), 0))(k);
   
   // Fix 3: forEach
   [0,1,2].forEach(idx =>
       setTimeout(() => console.log("each", idx), 0));

   Run Copy

6. Build a private "secret" holder where the secret can only be read with a correct password.
   ✨ Show Answer

   a6.js

   function vault(secret, pwd) {
       return attempt => attempt === pwd ? secret : "denied";
   }
   const v = vault("42 is the answer", "hello");
   console.log(v("x"));
   console.log(v("hello"));

   Run Copy

7. Implement partial(fn, ...preset) — like .bind without changing this.
   ✨ Show Answer

   a7.js

   const partial = (fn, ...preset) => (...rest) => fn(...preset, ...rest);
   const greet = (greeting, name) => `${greeting}, ${name}!`;
   const hi = partial(greet, "Hi");
   console.log(hi("Arif"));

   Run Copy

8. Build throttle(fn, ms): ignore subsequent calls within ms.
   ✨ Show Answer

   a8.js

   const throttle = (fn, ms) => {
       let last = 0;
       return (...args) => {
           const now = Date.now();
           if (now - last >= ms) {
               last = now;
               return fn(...args);
           }
       };
   };
   const log = throttle(msg => console.log("hit:", msg), 100);
   log("a"); log("b"); log("c"); // only "a" within 100 ms

   Run Copy

9. Build debounce(fn, ms): only fire after ms of silence.
   ✨ Show Answer

   a9.js

   const debounce = (fn, ms) => {
       let id;
       return (...args) => {
           clearTimeout(id);
           id = setTimeout(() => fn(...args), ms);
       };
   };
   const save = debounce(v => console.log("saved:", v), 200);
   save("a"); save("ab"); save("abc"); // only "abc"

   Run Copy

10. Closure-based id generator: each call returns id 1, 2, 3...
    ✨ Show Answer

    a10.js

    const nextId = (() => { let n = 0; return () => ++n; })();
    console.log(nextId(), nextId(), nextId());

    Run Copy

11. Closure with multiple variables: write a "stopwatch" with start, stop, lap.
    ✨ Show Answer

    a11.js

    function stopwatch() {
        let t0 = null;
        return {
            start() { t0 = Date.now(); },
            lap() { return Date.now() - t0; }
        };
    }
    const sw = stopwatch();
    sw.start();
    for (let i = 0; i < 1e6; i++);
    console.log("ms:", sw.lap());

    Run Copy

12. Use a closure to track the number of times a function has been called.
    ✨ Show Answer

    a12.js

    const spy = fn => {
        let calls = 0;
        const wrapped = (...args) => { calls++; return fn(...args); };
        wrapped.calls = () => calls;
        return wrapped;
    };
    const add = spy((a, b) => a + b);
    add(1, 2); add(3, 4);
    console.log(add.calls()); // 2

    Run Copy

13. Build pipe(...fns) that returns a function applying them left-to-right.
    ✨ Show Answer

    a13.js

    const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
    const p = pipe(n => n + 1, n => n * 2, n => n - 3);
    console.log(p(5)); // ((5+1)*2)-3 = 9

    Run Copy

14. Why is the closure pattern slower than a class with private # fields?
    ✨ Show Answer

    Answer: Each call to a "factory" function creates fresh closures and fresh method functions, costing memory and a tiny bit of allocation. A class shares one method definition on its prototype across all instances. For tiny utilities the difference is invisible; for hot paths producing thousands of instances, classes win.

15. Show that closures over a single variable share state, not copies.
    ✨ Show Answer

    a15.js

    function pair() {
        let n = 0;
        return [() => ++n, () => n];
    }
    const [inc, peek] = pair();
    inc(); inc(); inc();
    console.log(peek()); // 3 — shared

    Run Copy

16. Use a closure to make a once-per-event handler.
    ✨ Show Answer

    a16.js

    const once = fn => {
        let fired = false;
        return (...a) => { if (!fired) { fired = true; return fn(...a); } };
    };
    const handler = once(() => console.log("clicked"));
    handler(); handler(); handler();

    Run Copy

17. In one paragraph, explain a closure to a friend who knows Python.
    ✨ Show Answer

    Answer: A closure is a function plus the local variables it remembers from where it was defined. Python has the same idea — a nested function can refer to a variable from its enclosing function and that variable stays alive even after the outer function returns. JavaScript's let/const simply make this work cleanly per scope, with no extra nonlocal keyword required to mutate; you just close over the binding.

18. Build a tiny event bus: on(name, fn), emit(name, data).
    ✨ Show Answer

    a18.js

    const bus = (() => {
        const map = {};
        return {
            on(name, fn) { (map[name] ??= []).push(fn); },
            emit(name, data) { (map[name] || []).forEach(f => f(data)); }
        };
    })();
    bus.on("hi", d => console.log("got:", d));
    bus.emit("hi", "hello");

    Run Copy