Sự khác biệt giữa export default và export trong JavaScript

Cả export và export default đều là các tính năng được giới thiệu trong ES6 (ECMAScript 2015). Chúng giúp tổ chức mã tốt hơn, cho phép chia tách và tái sử dụng code dễ dàng hơn bằng cách sử dụng mô-đun (module).

  • Sự khác biệt giữa export default và export trong JavaScript:
    1. export:
      • Được sử dụng để xuất (export) nhiều giá trị từ một module.
      • Có thể export các biến, hàm, hoặc class.
      • Khi sử dụng export, bạn cần import các giá trị đó bằng cú pháp tên cụ thể và phải khớp chính xác.
      • Ví dụ:
        // module.js
export const name = "Alice";
export function greet() {
  console.log("Hello!");
}

// anotherFile.js
import { name, greet } from './module.js';
    2. export default:
      • Chỉ cho phép export một giá trị duy nhất từ một module.
      • Giá trị được export có thể là một biến, một hàm, hoặc một class.
      • Khi sử dụng export default, bạn có thể import giá trị với bất kỳ tên nào bạn muốn.
      • Ví dụ:
        // module.js
export default function greet() {
  console.log("Hello!");
}

// anotherFile.js
import myGreetFunction from './module.js'; // Tên `myGreetFunction` có thể thay đổi
    3. Khi một file module có cả export default và export thường, bạn có thể import chúng bằng cách sử dụng cả hai cú pháp:
      1. Import giá trị export default: Bạn sử dụng cú pháp import với bất kỳ tên nào bạn muốn.
      2. Import các giá trị export thường: Bạn cần sử dụng cú pháp dấu ngoặc nhọn {} và tên chính xác của giá trị được export.
      3. Cách export:
        // module.js
export const name = "Alice";
export function greet() {
  console.log("Hello!");
}
export default function defaultFunction() {
  console.log("This is the default function!");
}
      4. Cách import:
        // anotherFile.js
import defaultFunc, { name, greet } from './module.js';

defaultFunc(); // "This is the default function!"
console.log(name); // "Alice"
greet(); // "Hello!"
      5. Giải thích:
        • defaultFunc: Đây là cách import export default và có thể đặt tên tùy ý.
        • { name, greet }: Đây là cách import các giá trị export thường. Tên phải khớp chính xác.

        Có thể kết hợp cả hai dạng import trong cùng một dòng lệnh như trong ví dụ trên.

    Tóm tắt:

    • export: Dùng để xuất nhiều giá trị và yêu cầu import bằng tên cụ thể.
    • export default: Chỉ xuất một giá trị duy nhất và cho phép import với bất kỳ tên nào.

Bài viết liên quan: