The Four Forms
// 1. Function declaration — hoisted, callable before definition
export default function MyComponent() { ... }
// 2. Named export declaration — hoisted, multiple exports per file
export function helperFn() { ... }
// 3. Const arrow / expression — NOT hoisted, must be defined before use
export const helperFn = () => { ... }
// 4. Local declaration — no export, file-scoped only
function internalHelper() { ... }
Key Differences
function declaration | const arrow | |
|---|---|---|
| Hoisted | Yes | No (temporal dead zone) |
this binding | Dynamic | Lexical (inherits from outer scope) |
| Can be a method | Yes | Yes |
arguments object | Yes | No |
Hoisting matters when you call a function above its definition in the file. const will throw a ReferenceError; function declarations work fine.
In React / Next.js
Both styles are common for components — it's a style choice, not a correctness one:
// Declaration style — what Next.js docs use for pages/layouts
export default function Page() {
return <main />
}
// Expression style — common in component libraries and some style guides
const Page = () => <main />
export default Page
Consistent rule of thumb:
- Pages and layouts →
export default function(matches Next.js conventions) - Utility functions in a module → named exports, either form is fine
- Single-export utility file →
export default function - Multiple exports in one file → named
export functionorexport const