Hoisting function expression depends on the variable used to store it
if its a var it will be hoisted and initialised with undefined
if its let or const it will be hoisted but suffer from TDZ
We have a utility file where we call a helper function at the top of the file, but the actual function is defined at the bottom. It works fine. But when we refactored it to a const arrow function, the app suddenly crashed with a ReferenceError. Why did this happen, and how would you fix it?
Imagine you are writing a helper function inside a React component file. You want to decide whether to write 'function processItem(item) {}' or 'const processItem = (item) => {}'. How does your choice affect where you can place that helper relative to where it is called?
We're debugging a legacy codebase where a function is conditionally defined inside an 'if' block using a standard 'function myFunc() {}' declaration. In some browsers, it's available outside the block, and in others, it throws an error. Why is this behavior inconsistent, and how would you refactor this to be safe and predictable?
You are building a React component and need to pass a callback to a child. You're debating between declaring a helper function outside the component using 'function helper() {}' versus defining an arrow function expression inside the component body. What are the implications for memory, re-renders, and access to component state?
We are designing a large-scale utility library that will be tree-shaken by Webpack or Rollup. How does choosing function declarations versus exporting const arrow function expressions affect the bundler's ability to perform dead-code elimination and scope hoisting?
In a Node.js microservice, we are dynamically loading plugins at runtime. Some plugins rely on overriding core framework methods. How does the distinction between function declarations and expressions affect our ability to safely monkey-patch or decorate these methods at runtime without breaking lexical scope?
We are migrating a massive, 10-year-old legacy codebase from ES5 to modern TypeScript. We have thousands of implicit global function declarations and complex hoisting patterns. What architectural guidelines or automated AST codemods would you design to safely transition these to block-scoped expressions without breaking runtime execution order?
When designing an enterprise-grade SDK that needs to run in highly constrained environments like Cloudflare Workers, how do you establish team-wide standards around function definition styles to optimize for engine-level optimization, such as V8's Ignition/Turbofan pipeline, and bundle size?