--- title: The Function Definition That Silently Broke Your... description: Function declarations and arrow functions are not interchangeable in JavaScript — they differ in hoisting behavior, `this` binding, and critically, how they... canonical: https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Function Definition That Silently Broke Your Production Stack Trace | daily.dev og:description: Function declarations and arrow functions are not interchangeable in JavaScript — they differ in hoisting behavior, `this` binding, and critically, how they... og:url: https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny og:image: https://api.daily.dev/og/posts/u7Sr0erny.png og:image:alt: The Function Definition That Silently Broke Your Production Stack Trace og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Function Definition That Silently Broke Your Production Stack Trace **[Medium](https://daily.dev/sources/medium_js)** · 8 min read · 1 upvotes · 0 comments ## Summary Function declarations and arrow functions are not interchangeable in JavaScript — they differ in hoisting behavior, `this` binding, and critically, how they appear in production stack traces. Anonymous default exports (`export default () => {}`) produce `` frames in error trackers, making production debugging nearly impossible. The post explains the mechanical differences between declarations and expressions, shows how the industry overcorrected toward arrow functions, and provides a clear rule: use function declarations for top-level exports and React components, reserve arrow functions for closures and inline callbacks. It also recommends enforcing the `import/no-anonymous-default-export` ESLint rule to eliminate anonymous stack frames automatically, and provides grep commands to audit existing codebases. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does my React component show up as in the error tracker stack trace? An anonymous default export using an arrow function, such as export default () => {}, fails the engine's name inference, so no identifier is available to log at crash time. Converting the component to a named function declaration, like export default function UserDashboard() {}, ensures the name appears in both stack traces and React DevTools. _Debugging unnamed stack frames in React apps is easier when you track patterns like this on daily.dev._ ### Why does calling a function before its definition work with function declarations but throw an error with arrow functions assigned to const? Function declarations are hoisted and fully available before any code in their scope runs, so calling one before its definition works fine. Arrow functions assigned to const are subject to the Temporal Dead Zone: the binding exists but is uninitialized until the assignment line executes, so calling it earlier throws a ReferenceError. _daily.dev helps developers untangle hoisting quirks like this before they cause production surprises._ ### What ESLint rule prevents anonymous default exports in JavaScript? The import/no-anonymous-default-export rule, set to "error" in an ESLint configuration, rejects both export default () => {} and export default function() {}, forcing every default export to have an identifier. This eliminates the class of bugs where crashed components or modules show up as in production error trackers. _Teams standardizing lint rules to avoid anonymous stack traces can keep up with practices like this on daily.dev._ ## Similar posts on daily.dev - [Day 181 of Everyday Programming](https://daily.dev/posts/day-181-of-everyday-programming-vln5p67eo) · Medium · 1 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The Function Definition That Silently Broke Your Production Stack Trace","url":"https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny"},"datePublished":"2026-07-30T08:38:32.316Z","dateModified":"2026-09-14T06:53:07.810Z","description":"Function declarations and arrow functions are not interchangeable in JavaScript — they differ in hoisting behavior, `this` binding, and critically, how they...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4b746a2e1a1d0a14e62a1d07c7c5fb5e?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4b746a2e1a1d0a14e62a1d07c7c5fb5e?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,react","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"The Function Definition That Silently Broke Your Production Stack Trace"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-function-definition-that-silently-broke-your-production-stack-trace-u7sr0erny#faq","mainEntity":[{"@type":"Question","name":"Why does my React component show up as in the error tracker stack trace?","acceptedAnswer":{"@type":"Answer","text":"An anonymous default export using an arrow function, such as export default () => {}, fails the engine's name inference, so no identifier is available to log at crash time. Converting the component to a named function declaration, like export default function UserDashboard() {}, ensures the name appears in both stack traces and React DevTools. Debugging unnamed stack frames in React apps is easier when you track patterns like this on daily.dev."}},{"@type":"Question","name":"Why does calling a function before its definition work with function declarations but throw an error with arrow functions assigned to const?","acceptedAnswer":{"@type":"Answer","text":"Function declarations are hoisted and fully available before any code in their scope runs, so calling one before its definition works fine. Arrow functions assigned to const are subject to the Temporal Dead Zone: the binding exists but is uninitialized until the assignment line executes, so calling it earlier throws a ReferenceError. daily.dev helps developers untangle hoisting quirks like this before they cause production surprises."}},{"@type":"Question","name":"What ESLint rule prevents anonymous default exports in JavaScript?","acceptedAnswer":{"@type":"Answer","text":"The import/no-anonymous-default-export rule, set to \"error\" in an ESLint configuration, rejects both export default () => {} and export default function() {}, forcing every default export to have an identifier. This eliminates the class of bugs where crashed components or modules show up as in production error trackers. Teams standardizing lint rules to avoid anonymous stack traces can keep up with practices like this on daily.dev."}}]} ```