Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang ingin kode lebih rapi tanpa boilerplate berlebihan
• Pemula yang mau pindah dari “satu file serba isi” ke struktur project yang sehat
• Siapa pun yang kodenya sudah jalan tapi makin susah di-maintain

Apa yang akan Anda pelajari

• Cara pakai destructuring, spread/rest, dan template literal dalam workflow nyata
• Cara ES modules (import/export) bikin kode lebih terstruktur
• Cara menyusun folder berbasis fitur supaya project tetap kebaca saat membesar

Mengapa topik ini penting

Begitu project mulai membesar, pola “semua logic di satu file” cepat jadi berantakan. Sintaks modern membantu mengurangi repetisi, dan modules membantu memecah tanggung jawab kode dengan jelas.

Di dunia kerja, kode yang gampang dibaca dan dirawat sama pentingnya dengan kode yang sekadar jalan.

Konsep inti

Destructuring

Pakai destructuring saat benar-benar membuat niat kode lebih jelas.

const user = { name: "Alya", role: "student" };
const { name, role } = user;

Spread dan rest

Dua ini sangat sering kepake untuk update immutable dan fungsi yang fleksibel.

const numbers = [1, 2, 3];
const all = [...numbers, 4, 5];

ES modules

Modules bikin logic lebih reusable dan lebih gampang dites.

export function greet(name: string) {
	return `Hello, ${name}`;
}

Rule sederhana:

• Export yang memang perlu dipakai file lain.
• Simpan detail internal tetap privat di module itu.

Panduan langkah demi langkah

Langkah 1 — Kurangi pola akses berulang

Ganti akses berulang obj.xxx dengan destructuring kalau memang bikin lebih kebaca.

Langkah 2 — Pecah helper ke module terpisah

Pisahkan formatter, validator, dan API helper ke file masing-masing.

Langkah 3 — Organisasi berdasarkan fitur

Kelompokkan file terkait (components, services, types) berdasarkan fitur/domain.

Target bab ini: berhenti menumpuk logic beda-beda dalam satu file besar.

Contoh praktis

Contoh 1 — Pakai utility modular

import { greet } from "./greet";
console.log(greet("Nora"));

Expected output:

Hello, Nora

Contoh 2 — Rest parameter

function sum(...values: number[]): number {
	return values.reduce((a, b) => a + b, 0);
}

Real case:

• Cocok untuk input dinamis seperti filter list, tags, atau form field variatif.

Kesalahan umum dan cara menghindarinya

• Mencampur CommonJS dan ESM dalam satu project -> pilih satu style module
• Semua hal di-destructure -> pakai hanya saat menambah kejelasan
• Struktur folder terlalu dalam dari awal -> mulai simpel dan praktis
• Terlalu banyak export tanpa kebutuhan -> expose hanya yang memang dipakai

Mini Project

• Refactor satu script menjadi module:
• types untuk kontrak data,
• utils untuk helper,
• main untuk alur aplikasi.

Bonus:

• Tambahkan satu file index untuk re-export helper secara rapi.

Latihan cepat

• Refactor satu akses object dengan destructuring
• Pecah satu file besar jadi dua module
• Buat satu file index untuk re-export helper
• Jelaskan dalam satu kalimat: kapan destructuring justru bikin kode lebih susah dibaca?

Ringkasan utama

• Sintaks modern dipakai untuk kejelasan, bukan sekadar gaya
• Modules adalah fondasi project JavaScript/TypeScript yang maintainable
• Struktur yang sederhana dan konsisten lebih kuat daripada overengineering

Langkah berikutnya

Lanjut ke [07. Fondasi Browser sebelum React].