Intermediate · Level 5: JavaScript AdvancedIntermediate45 menitBahasa Indonesia

ES Modules dan import/export

Belajar membaca export dan import dasar agar file JavaScript bisa dipisah dengan jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami module sebagai file JavaScript dengan batas tanggung jawab
Membaca named export dan named import
Memahami kebutuhan script type module di browser

JavaScriptES Modulesimportexport

Isi lesson

7 blok

1.
Satu file besar mulai sulit dirawatBelum selesaiWajib
2.
export keluar, import masukBelum selesaiWajib
3.
lesson-utils.js mengekspor helperBelum selesaiWajib
4.
main.js mengimpor helperBelum selesaiWajib
5.
HTML perlu type moduleBelum selesaiWajib
6.
Cek pemahamanBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Satu file besar mulai sulit dirawat

Wajib

Di local project sebelumnya, menaruh semua JavaScript di script.js masih masuk akal. Tetapi saat fitur bertambah, satu file bisa berisi DOM selection, event handler, state, localStorage, formatter, dan fetch sekaligus. File seperti itu sulit dibaca dan sulit diubah.

ES modules membantu kamu memecah JavaScript menjadi beberapa file. Satu file bisa mengekspor function atau value. File lain bisa mengimpor bagian yang dibutuhkan.

Bagian ini memengaruhi progres lesson.

export keluar, import masuk

Wajib

export berarti sebuah file menyediakan function, object, atau value agar bisa dipakai file lain. import berarti sebuah file mengambil bagian yang diekspor dari file lain.

Untuk awal, fokus pada named export. Named export memakai nama yang jelas dan diimpor dengan kurung kurawal. Ini membantu kamu membaca dari mana function berasal dan apa yang dipakai oleh file utama.

Bagian ini memengaruhi progres lesson.

lesson-utils.js mengekspor helper

Wajib

export function formatLessonTitle(title) {
  return title.trim();
}

export const maxVisibleLessons = 5;

File lesson-utils.js menyediakan function formatLessonTitle dan value maxVisibleLessons. Karena keduanya memakai named export, file lain harus mengimpor dengan nama yang sama.

Bagian ini memengaruhi progres lesson.

main.js mengimpor helper

Wajib

import { formatLessonTitle, maxVisibleLessons } from "./lesson-utils.js";

const rawTitle = "  Scope Dasar  ";

console.log(formatLessonTitle(rawTitle));
console.log(maxVisibleLessons);

main.js mengambil dua named export dari lesson-utils.js. Path ./lesson-utils.js berarti file berada di folder yang sama dengan main.js.

Bagian ini memengaruhi progres lesson.

HTML perlu type module

Wajib

html

<script type="module" src="main.js"></script>

Di browser, file yang memakai import harus dijalankan sebagai module. Karena itu script di HTML memakai type="module".

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Jika main.js memakai import dari file lain, script mana yang paling tepat di HTML?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

ES modules membantu memecah JavaScript ke beberapa file.
export menyediakan function atau value dari satu file.
import mengambil function atau value dari file lain.
Named export dan named import memakai nama yang sama.
Browser membutuhkan script type="module" untuk menjalankan import.
Berikutnya, kamu akan memecah file JavaScript lokal berdasarkan tanggung jawab.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Satu file besar mulai sulit dirawat.

Memuat progres Review module