Functional Patterns — Currying, Composition, Immutability

9. Practice Problems

1. Write a pure increment that doesn't touch its argument.
   ✨ Show Answer

   a1.js

   const increment = ({ count }) => ({ count: count + 1 });
   const s = { count: 5 };
   console.log(increment(s), s);

   Run Copy

2. Curry add so add(2)(3)(4) returns 9.
   ✨ Show Answer

   a2.js

   const add = a => b => c => a + b + c;
   console.log(add(2)(3)(4));

   Run Copy

3. Build pipe and chain three transformations.
   ✨ Show Answer

   a3.js

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

   Run Copy

4. Update the age field of an object immutably.
   ✨ Show Answer

   a4.js

   const u = { name: "Arif", age: 22 };
   console.log({ ...u, age: 23 }, u);

   Run Copy

5. Remove an element from an array immutably.
   ✨ Show Answer

   a5.js

   const remove = (arr, x) => arr.filter(v => v !== x);
   console.log(remove([1, 2, 3, 4], 3));

   Run Copy

6. Why do React-style apps prefer immutable updates?
   ✨ Show Answer

   Answer: Reference equality becomes a cheap "did anything change?" check. Components only re-render when their props or state objects change identity, so { ...state, x: 1 } triggers exactly the right work — much faster than deep comparison and easier to reason about than mutation-tracking proxies.

7. Build partial and use it to create info, warn, error from a generic log.
   ✨ Show Answer

   a7.js

   const partial = (fn, ...p) => (...r) => fn(...p, ...r);
   const log = (level, msg) => console.log(`[${level}] ${msg}`);
   ["INFO", "WARN", "ERROR"].forEach(l => partial(log, l)("hello"));

   Run Copy

8. Compose three string transforms to make a slug.
   ✨ Show Answer

   a8.js

   const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
   const slug = pipe(s => s.trim(), s => s.toLowerCase(), s => s.replace(/\s+/g, "-"));
   console.log(slug("  Hello Bangla World  "));

   Run Copy

9. Demonstrate that Object.freeze is shallow.
   ✨ Show Answer

   a9.js

   const o = Object.freeze({ inner: { x: 1 } });
   o.inner.x = 99;
   console.log(o.inner);   // { x: 99 }

   Run Copy

10. Implement deepFreeze recursively.
    ✨ Show Answer

    a10.js

    const deepFreeze = o => {
        if (o && typeof o === "object") {
            Object.values(o).forEach(deepFreeze);
            Object.freeze(o);
        }
        return o;
    };
    const c = deepFreeze({ a: { b: 1 } });
    try { c.a.b = 2; } catch {}
    console.log(c.a.b);

    Run Copy

11. Map an array of strings to their lengths using map.
    ✨ Show Answer

    a11.js

    console.log(["hi", "there", "hello"].map(s => s.length));

    Run Copy

12. Build a curried filter that filters by predicate.
    ✨ Show Answer

    a12.js

    const filter = pred => arr => arr.filter(pred);
    const evens = filter(n => n % 2 === 0);
    console.log(evens([1, 2, 3, 4]));

    Run Copy

13. In one paragraph, explain when FP shines vs when imperative is better.
    ✨ Show Answer

    Answer: FP shines for data transformation pipelines, validation, state-update reducers, and anywhere correctness over speed matters. Imperative code wins for tight inner loops, DOM updates, parser/state-machine work, and any case where a single in-place mutation expresses intent more directly than a stack of pure transformers. Most modern apps mix both — pure for app state, imperative for hot paths.

14. Show why arr.push + return arr is impure.
    ✨ Show Answer

    The function modifies the caller's array — same input now produces different output across calls. Anyone holding a reference observes the change, leading to "spooky action at a distance" bugs. Use [...arr, x] for the immutable equivalent.