Semakin berkembang suatu aplikasi maka semakin banyak pula baris code yang ditulis, pada satu file JavaScript mungkin terdapat lebih dari 1000 baris code.

Agar lebih mudah dikelola, kita perlu memecah file JavaScript tersebut menjadi beberapa file JavaScript yang disebut module.

ℹ️ INFO

Silahkan download source code materi ES Module di sini untuk dieksekusi di VS Code.

Hal ini dikarenakan Repl.it menggunakan Node js dan Node js menggunakan CommonJS module dan belum sepenuhnya support ES module.

Export & Import

Kita bisa export function, variable, object atau semua yang ada dalam satu module untuk kemudian di import ke module yang lain.

⬆️ Export satu per satu

filename: profile.js

Copy
1export const dinoName = 'brachio';
2
3export const sayHi = (name, message) => {
4  console.log(`Hi ${name}, ${message}`);
5};

⬇️ Import satu per satu

filename: main.js

Copy
1import { dinoName, sayHi } from './profile.js';
2
3// run
4sayHi(dinoName, 'How are you?');

⬆️ Export semua

Copy
1const dinoName = 'brachio';
2
3const sayHi = (name, message) => {
4  console.log(`Hi ${name}, ${message}`);
5};
6
7export {dinoName, sayHi};

⬇️ Import semua

Copy
1import * as profile from './profile.js';
2
3console.log(profile.dinoName);
4profile.sayHi(profile.dinoName, 'How are you?');

⬆️ Export dengan nama/alias

Copy
1const dinoName = 'brachio';
2
3const sayHi = (name, message) => {
4  console.log(`Hi ${name}, ${message}`);
5};
6
7export {dinoName as name, sayHi};

⬇️ Import dengan nama/alias

Copy
1import {name, sayHi as speak} from './profile.js';
2
3// run
4speak(name, 'How are you?');

⬆️ Default Export

Hanya satu default export per module.

Copy
1export const dinoName = 'brachio';
2
3const sayHi = (name, message) => {
4  console.log(`Hi ${name}, ${message}`);
5};
6
7export default sayHi;

⬇️ Import Default

Dengan import default, curly braces {} dapat dihilangkan saat import dan menggunakan nama yang berbeda.

Copy
1import speak from './profile.js'; 
2
3// run
4speak('brachio', 'How are you?');

Ilustrasi ES Module.