Default Exports

So far, we have looked at Named Exports. When you use named exports, you must use curly braces {} to import specific names exactly as they were exported.

However, if a module’s sole purpose is to export one single thing (like a single large React component or a single configuration object), you can use a Default Export.

The Syntax

Exporting (math.js) You use the export default syntax.

const add = (a, b) => a + b;

// Only one default export is allowed per file
export default add;

Importing (main.js) Because there is only one default export in the file, you do not use curly braces when importing. Furthermore, you can name the imported variable whatever you want!

// No curly braces!
import myCustomAddName from "./math.js";

console.log(myCustomAddName(1, 2)); // 3

Best Practices

While default exports seem convenient, many large engineering teams actually ban them in favor of strictly using Named Exports.

Why?

• Named exports enforce consistent naming across your entire codebase.
• Named exports make IDE auto-completion and refactoring significantly easier.
• If you ever need to export a second function from a file later on, refactoring a default export into named exports is a massive headache.