perbedaan export default dan export const dengan analogi sederhana dan contoh nyata

 

Analogi Sederhana

Bayangkan kamu punya restoran:

• export default → Menu utama restoran
  → Setiap restoran punya satu hidangan andalan yang paling terkenal.
• export const → Menu tambahan
  → Restoran juga punya beberapa hidangan lain yang bisa dipesan.

Misalnya, di restoran Jepang:

• Hidangan utama (export default) → Sushi
• Hidangan tambahan (export const) → Ramen, Takoyaki, Matcha Latte

Saat pelanggan datang:

• Kalau mereka pesan “menu utama”, mereka akan otomatis dapat Sushi, tanpa harus menyebut nama spesifiknya.
• Kalau mereka pesan hidangan tambahan, mereka harus menyebut nama makanannya dengan benar.

Perbedaan export default vs export const dalam Kode

Sekarang, kita buat contoh nyata dalam kode JavaScript.

File: restaurant.js

// Menu utama restoran (export default)
export default function sushi() {
    return "This is the best sushi in town!";
}

// Menu tambahan (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!

Perbedaan yang Terlihat

1. Ekspor default (sushi) diimpor tanpa {} dan bisa dinamai apa saja saat diimpor.

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

2. Ekspor named (ramen, takoyaki) harus diimpor dengan {} dan namanya tidak bisa diubah.

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

   (Kita bisa mengganti namanya dengan as, tetapi tetap harus pakai {}.)

Perbandingan Lebih Detail

Fitur	export default	export const
Jumlah ekspor per file	Hanya satu	Bisa lebih dari satu
Cara mengimpor	import bebasNama from "file.js"	import { namaAsli } from "file.js"
Bisa ganti nama?	Ya, bebas diubah saat impor	Tidak langsung, harus pakai as
Perlu {} saat impor?	Tidak	Ya

Kapan Menggunakan export default dan export const?

Situasi	Gunakan export default	Gunakan export const
Jika modul hanya memiliki satu fitur utama	✅	❌
Jika modul memiliki banyak fitur independen	❌	✅
Jika ingin bebas mengganti nama saat impor	✅	❌
Jika ingin impor beberapa fitur dari satu file	❌	✅

Contoh di Dunia Nyata

1. Ekspor default cocok untuk satu fitur utama

   • React.js menggunakan export default untuk komponen utama:

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

     import Button from "./Button.js"; // Bebas mengganti nama
     

2. Ekspor named cocok untuk banyak fungsi

   • Lodash atau utility functions sering menggunakan export const:

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

     import { add, subtract } from "./math.js"; // Harus pakai nama yang sesuai
     

Kesimpulan

• Gunakan export default jika modul hanya memiliki satu hal utama yang akan digunakan.
  (Misalnya: satu fungsi utama, satu class utama, satu komponen utama.)
• Gunakan export const jika modul memiliki banyak hal yang bisa diekspor dan digunakan secara terpisah.
  (Misalnya: beberapa fungsi helper, beberapa variabel konfigurasi, beberapa kelas.)

Mudah dipahami kan?