Export mặc định và export có tên

Trong module JavaScript, bạn có hai cách chính để xuất code: xuất có tên và xuất mặc định.

Xuất có tên cho phép bạn xuất nhiều giá trị từ một module:

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

Khi nhập các hàm được xuất có tên (named exports), bạn phải dùng đúng các tên bên trong dấu ngoặc nhọn:

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

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

Nếu bạn cần đổi tên một mục nhập có tên, hãy dùng từ khóa as để tạo bí danh:

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

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

Xuất mặc định cho phép bạn xuất một giá trị chính từ một module:

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

export default user;

Khi nhập một export mặc định, bạn có thể dùng tên bất kỳ mà không cần dấu ngoặc nhọn:

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

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

Khi nào nên dùng loại nào? Dùng export có tên khi một module cung cấp nhiều tiện ích liên quan (ví dụ: một nhóm hàm hỗ trợ). Dùng export mặc định khi một module có một mục đích chính hoặc một giá trị chính (ví dụ: một lớp, một component hoặc một đối tượng cấu hình).

Bạn có thể kết hợp cả hai kiểu xuất trong một module:

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

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

export default car;

Và nhập chúng cùng nhau:

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

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