{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"javascript-development","title":"JavaScript Developer Roadmap","url":"https://ihatereading.in/roadmap/javascript-development","machineUrl":"https://ihatereading.in/roadmap/javascript-development.json"},"slug":"functions-and-modules","title":"Functions, Scope & Modules","url":"https://ihatereading.in/roadmap/javascript-development/functions-and-modules","machineUrl":"https://ihatereading.in/roadmap/javascript-development/functions-and-modules.json","summary":{"breadcrumb":"JavaScript Developer Roadmap → Functions, Scope & Modules","purpose":"Learn how functions, closures, scope, and ES modules fit together — the core of reusable JavaScript.","prerequisites":["Syntax, types, and control flow"],"recommendedStart":["Function declarations vs expressions","Closures"],"notRequired":["Deep transpiler or bundler internals"],"afterThisChapter":["Async JavaScript & the Event Loop","Objects, Arrays & JSON"]},"agentLens":null,"topics":[{"id":"functions-and-scope","slug":"functions-and-scope","title":"Functions & scope","level":"beginner","category":null,"importance":"essential","difficulty":"beginner","learn":["Function declarations vs expressions","Arrow functions and lexical `this`","Parameters: default, rest, destructuring"],"why":["Most application logic is composed from small functions.","Callbacks and hooks depend on how scope and `this` behave."],"prerequisites":["syntax-and-types"],"nextTopics":["closures","es-modules"],"relatedTopics":[],"usedIn":[],"understand":null,"questions":{"learning":["What is the difference between a function declaration and a function expression?","When should I use an arrow function?"],"practice":["Rewrite a callback using both a regular function and an arrow function — note `this` behavior."],"interview":["Explain hoisting for function declarations vs `const` arrow assignments."],"advanced":[],"debugging":[],"comparison":["Arrow function vs regular function — when should I use each?"]},"projects":{"beginner":"Utility module with `formatDate`, `clamp`, and `pick` helpers exported from one file.","intermediate":null,"advanced":null},"commonMistakes":["Using arrow functions as object methods when you need dynamic `this`.","Assuming `function foo() {}` and `const foo = () => {}` hoist the same way."],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":[],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":[]},"agentLens":null,"skipIf":null,"build":null,"next":["closures","es-modules"],"prerequisite":["syntax-and-types"]},{"id":"closures","slug":"closures","title":"Closures","level":"intermediate","category":null,"importance":"essential","difficulty":"intermediate","learn":["Inner functions closing over outer variables","Private state without classes","Factory and decorator patterns"],"why":["Closures power debouncing, React hooks, and module patterns.","A frequent JavaScript interview topic because they expose scope + lifetime."],"prerequisites":["functions-and-scope"],"nextTopics":["es-modules","async-and-event-loop"],"relatedTopics":[],"usedIn":[],"understand":{"summary":"A closure is a function plus the lexical environment it was created in — it can read (and often update) variables from outer scopes even after the outer function returns.","example":"function makeCounter() {\n  let n = 0;\n  return () => ++n;\n}\nconst next = makeCounter();\nnext(); // 1\nnext(); // 2","mentalModel":"The inner function carries a backpack of variables from where it was born.","howItWorks":"When an inner function is created, the engine keeps the outer scope alive as long as any inner function still references it.","underTheHood":"Engines store closed-over bindings on the function object or context chain; garbage collection only reclaims outer vars when no closure references remain.","misconceptions":["Closures copy values at creation time for primitives in loops — classic `var` + `setTimeout` bug.","Closures are not the same as classes; they are scope + lifetime, not inheritance."]},"questions":{"learning":["What is a closure?","How does a closure remember outer variables?"],"practice":["Write a closure that maintains private state (counter, rate limiter, or memo cache)."],"interview":["What is a closure? Give a real-world use case.","Fix the loop + `setTimeout` logging the wrong index."],"advanced":["How can closures affect memory if you attach them to long-lived objects?"],"debugging":["Why does my closure return stale state from a React render?"],"comparison":[]},"projects":{"beginner":"Debounced search input: closure holds timer id and clears/reschedules on each keystroke.","intermediate":"Memoization helper `memoize(fn)` that caches results by serialized arguments.","advanced":"Plugin-style middleware runner where each step closes over shared context."},"commonMistakes":[],"bestPractices":[],"debug":{"mistakes":["Capturing loop variable with `var` instead of `let`."],"errors":["Unexpected undefined when outer variable was reassigned before async callback ran."],"scenarios":["Three buttons each log the same index — explain and fix with closures or `let`."]},"compare":["Closure-based module vs ES module — when is each appropriate?"],"resources":{"official":["https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/jquery-is-not-dead"]},"agentLens":null,"skipIf":null,"build":null,"next":["es-modules","async-and-event-loop"],"prerequisite":["functions-and-scope"]},{"id":"es-modules","slug":"es-modules","title":"ES modules (import / export)","level":"intermediate","category":null,"importance":"essential","difficulty":"intermediate","learn":["Named vs default exports","Static import graph and tree-shaking","Node ESM: `.mjs` or `\"type\": \"module\"`"],"why":["Modern apps split code into modules for reuse and bundler optimization.","Interviewers contrast CommonJS vs ESM in Node codebases."],"prerequisites":["functions-and-scope"],"nextTopics":["ecosystem-and-frameworks"],"relatedTopics":[],"usedIn":[],"understand":null,"questions":{"learning":["What is the difference between default and named exports?"],"practice":[],"interview":["CommonJS vs ES modules — loading model and when each appears."],"advanced":[],"debugging":[],"comparison":["CommonJS (`require`) vs ES modules (`import`) — what changes at runtime?"]},"projects":{"beginner":"Split a small CLI into `utils.js` and `index.mjs` with named exports.","intermediate":"Library package with explicit public API surface via `export`.","advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":["Dynamic `import()` vs static `import` — when to lazy-load?"],"resources":{"official":[],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":[]},"agentLens":null,"skipIf":null,"build":null,"next":["ecosystem-and-frameworks"],"prerequisite":["functions-and-scope"]}],"updatedAt":"2026-10-23T01:09:34.043Z"}