Dẫn nhập

Javascript có nhiều cách import và export dữ liệu, tuy nhiên để dùng đúng chúng ta cần hiểu đúng những cách đó. Bài viết gồm cheatsheet export/import đơn giản để các bạn có thể hiểu được những cách thức import và export dữ liệu trong Javascript.

Đoạn code bên dưới là cheatsheet gồm những cách export và cách import tương ứng. Gồm 3 loại: tên (named), mặc định (default) và loại mở rộng - danh sách (list). Chỉ cần đảm bảo việc import của bạn phù hợp với export tương ứng thì sẽ không có bug nha 🤣🤣

// Named export/import
export const name = 'value';
import { name } from '/module/my-module.js';

// Default export/import
export default 'value';
import anyName from '/module/my-module.js';

// Rename import
export { name as newName };

import { newName } from '/module/my-module.js';

// Named export + default export | Import all module's contents
export const name = 'value';
export default 'value';

import * as anyName from '/module/my-module.js';

// Export list + rename | Import list + rename
export { name1, name2 as newName2 };
import { name1 as newName1, newName2 } from '/module/my-module.js';

Tiếp theo chúng ta sẽ cùng tìm hiểu từng kiểu và xem cách thức nó hoạt động 🤓

1. Named export

Từ khóa chúng ta nên quan tâm là tên. Vì vậy chúng ta sẽ dùng tên để export dữ liệu 😂 😂

export const name = 'value';
import { name } from '/modules/my-module.js';

console.log(name); // 'value'

 

❌ Như đã nói ở trên, không tên, không export! Các bạn có thể xem ví dụ minh họa dưới đây:

export 'value';
import { }; // 👈 Vì export bằng giá trị nên chả biết nhập gì vào { }

2. Default export

Bằng default export, bạn không tên khi export. Vì vậy bạn có thể đặt bất kỳ tên cho nó khi import.

export default 'value';
import anyName from '/modules/my-module.js';

console.log(anyName); // 'value'

 

❌ Không khai báo biến khi export theo mặc định

export default const name = 'value'; // Lỗi lòi

 

Kết hợp Default + Named export

Bạn có thể cùng lúc sử dụng default export và named export trong 1 file 🤝

export const name = 'value1';
export default 'value2';

import anyName, { name } from '/modules/my-module.js';
console.log(anyName); // 'value2'
console.log(name); // 'value1'

3. Export list

Kiểu thứ ba là kiểu mở rộng từ named export nha, theo tài liệu của mozilla thì chỉ có 2 kiểu là named export và default export thôi 🤓🤓

const name1 = 'value1';
const name2 = 'value2';
export { name1, name2 };

import { name1, name2 } from '/modules/my-module.js';
console.log(name1); // 'value1'
console.log(name2); // 'value2'

 

Điều quan trọng bạn cần lưu ý là những danh sách này KHÔNG phải là objects. Mà công nhận nó giống objects thật, nhưng không phải nha các bạn 😂😂. Nó là một export list (mình để y tiếng Anh luôn vì dịch ra hơi chuối).

❌ Export list ≠ Object

// Cái này không phải export object đâu nha
export {
  name: 'value',
};

 

Đổi tên Export

Nếu không thích tên được export, bạn có thể đổi tên nó bằng cách sử dụng từ khóa as

const name = 'value';
export { name as newName };

import { newName } from '/modules/my-module.js';
console.log(newName); // 'value'
// Tên gốc (name) không còn truy cập được
console.log(name); // undefined

 

❌ Không thể kết hợp inline export với export list

export const name = 'value';
// Bạn đã export name👆, export nữa lồi lòi :))
export { name }; // Lỗi đó nha

 

Đổi tên Import

Giống với đổi tên export, bạn có thể đổi tên import với từ khóa as

const name1 = 'value1';
const name2 = 'value2';
export { name1, name2 as newName2 };

import { name1 as newName1, newName2 } from '/modules/my-module.js';
console.log(name1); // undefined
console.log(newName1); // 'value1'
console.log(newName2); // 'value2'

 

Import All

Sử dụng ký hiệu * để import toàn bộ nội dung file, sau đó lấy dữ liệu nó ra bằng cách gọi các thuộc tính theo tên đã đặt ở file export.

export const name = 'value';
export default 'defaultValue';

import * as anyName from '/modules/my-module.js';
console.log(anyName); // Module { name: 'value', default: 'defaultValue' }
console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultName'

 

Name vs Default

Có rất nhiều tranh luận về việc có nên sử dụng default export. Sẽ câu có câu trả lời đúng hay sai, cách tốt nhất là giải pháp nào phù hợp với bạn và nhóm của bạn.

Các bạn có thể tham khảo những bài dưới đây (tiếng Anh nha):

Nguồn tham khảo