Ekspor default vs. ekspor bernama

Dalam module JavaScript, ada dua cara utama untuk mengekspor kodemu: ekspor bernama dan ekspor default.

Ekspor Bernama memungkinkan kamu mengekspor beberapa nilai dari sebuah module:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

Saat mengimpor ekspor bernama, kamu harus menggunakan nama yang persis sama di dalam kurung kurawal:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

Jika kamu perlu mengganti nama impor bernama, gunakan kata kunci as untuk membuat alias:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

Ekspor default memungkinkan kamu mengekspor satu nilai utama dari module:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

Saat mengimpor ekspor default, kamu bisa menggunakan nama apa pun tanpa kurung kurawal:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

Kapan menggunakan yang mana? Gunakan named exports saat sebuah module menyediakan beberapa utilitas terkait (misalnya, kumpulan fungsi helper). Gunakan default export saat sebuah module memiliki satu tujuan utama atau nilai utama (misalnya, class, komponen, atau object konfigurasi).

Kamu bisa menggabungkan kedua jenis ekspor dalam satu module:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

Dan impor semuanya bersama-sama:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4