the difference between export default and export const with a simple analogy and real examples

 

Simple Analogy

Imagine you own a restaurant:

• export default → The restaurant’s main dish
  → Every restaurant has one signature dish that it's best known for.
• export const → Additional menu items
  → The restaurant also has several other dishes that customers can order.

For example, in a Japanese restaurant:

• Main dish (export default) → Sushi
• Additional dishes (export const) → Ramen, Takoyaki, Matcha Latte

When customers arrive:

• If they order the "main dish," they automatically get sushi, without specifying the name.
• If they order additional dishes, they must mention the dish name correctly.

Difference Between export default vs export const in Code

Now, let’s look at a real-world example in JavaScript.

File: restaurant.js

// Main dish (export default)
export default function sushi() {
    return "This is the best sushi in town!";
}

// Additional dishes (export const)
export const ramen = () => "Enjoy your hot ramen!";
export const takoyaki = () => "Delicious Takoyaki!";

File: app.js

import sushi, { ramen, takoyaki } from "./restaurant.js"; 

console.log(sushi());     // Output: This is the best sushi in town!
console.log(ramen());     // Output: Enjoy your hot ramen!
console.log(takoyaki());  // Output: Delicious Takoyaki!

Key Differences

1. Default export (sushi) is imported without {} and can be renamed freely when importing.

   import sushiSpecial from "./restaurant.js";
   console.log(sushiSpecial()); // Output: This is the best sushi in town!
   

2. Named exports (ramen, takoyaki) must be imported with {} and their names cannot be changed directly.

   import { ramen as hotRamen } from "./restaurant.js"; 
   console.log(hotRamen()); // Output: Enjoy your hot ramen!
   

   (You can rename it using as, but {} is still required.)

More Detailed Comparison

Feature	export default	export const
Number of exports per file	Only one	Can have multiple
Import syntax	import anyName from "file.js"	import { exactName } from "file.js"
Can rename on import?	Yes, freely	No, unless using as
Requires {} in import?	No	Yes

When to Use export default and export const?

Scenario	Use export default	Use export const
If a module has only one main feature	✅	❌
If a module has multiple independent features	❌	✅
If you want flexibility in renaming on import	✅	❌
If you need to import multiple features from one file	❌	✅

Real-World Examples

1. Default export is ideal for a single main feature

   • React.js uses export default for its main component:

     export default function Button() { return <button>Click me</button>; }
     

     import Button from "./Button.js"; // Can be renamed freely
     

2. Named exports are ideal for utility functions

   • Lodash or helper functions often use export const:

     export const add = (a, b) => a + b;
     export const subtract = (a, b) => a - b;
     

     import { add, subtract } from "./math.js"; // Must match the exact names
     

Conclusion

• Use export default when a module has a single main feature that users will primarily use.
  (For example: a single main function, a single main class, a single main component.)
• Use export const when a module has multiple independent features that users may use separately.
  (For example: multiple utility functions, multiple configuration variables, multiple classes.)

Hope this explanation makes everything crystal clear!