Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pemula yang ingin fondasi coding kuat sebelum lanjut lebih jauh ke React
• Pembelajar yang sering merasa logika kodenya cepat berantakan
• Siapa pun yang ingin coding lebih terarah, bukan sekadar coba-coba

Apa yang akan Anda pelajari

• Variabel, operator, dan percabangan untuk kebutuhan app nyata
• Perulangan dan kontrol alur tanpa bikin kode makin rumit
• Bentuk fungsi, scope dasar, dan kontrak fungsi TypeScript yang lebih jelas

Mengapa topik ini penting

Banyak bug di React sebenarnya berakar dari logika JavaScript yang kurang rapi. Kalau fundamental lemah, state update, render condition, dan debugging akan terasa ribet.

Bab ini bantu Anda berpikir lebih jernih sebelum masuk pola yang lebih advanced.

Konsep inti

Variabel dan scope

• const untuk nilai yang tidak di-assign ulang
• let untuk nilai yang berubah

Realita di project:

• Kalau semua variabel pakai let, biasanya logika Anda terlalu “liar”.
• Jadikan const sebagai default, lalu pindah ke let kalau memang perlu.

Kondisi dan loop

• if/else, switch, ternary
• for, while, for...of

Di project nyata:

• Percabangan dipakai untuk atur state UI dan aturan bisnis.
• Loop sering dipakai untuk memproses list dari API atau form.

Fungsi

• Declaration, expression, arrow function
• Parameter dan return value

Prinsip simpel: satu fungsi sebaiknya punya satu tanggung jawab utama.

Panduan langkah demi langkah

Langkah 1 — Buat blok logika kecil

Mulai dari satu kondisi, satu loop, dan satu fungsi kecil.

Target: blok logika bisa dipahami dalam kurang dari 10 detik.

Langkah 2 — Rapikan keterbacaan

Gunakan nama variabel yang jelas, hindari nama samar, dan kurangi nested logic berlebihan.

Langkah 3 — Tambahkan anotasi TypeScript

Tambahkan tipe di parameter penting dan return supaya niat fungsi langsung kebaca.

Contoh praktis

Contoh 1 — Utility kondisi

function getDiscount(level: "none" | "silver" | "gold"): number {
	if (level === "gold") return 0.2;
	if (level === "silver") return 0.1;
	return 0;
}

Kenapa ini penting:

• Pilihan input jadi jelas.
• Nilai yang tidak valid bisa dicegah lebih awal.

Contoh 2 — Ringkasan loop

const tasks = ["setup", "typescript", "react"];
for (const task of tasks) {
	console.log(`Done: ${task}`);
}

Real case:

• Pola ini adalah dasar untuk render list di banyak komponen frontend.

Kesalahan umum dan cara menghindarinya

• Re-assign const -> gunakan let hanya saat nilai benar-benar berubah
• Fungsi terlalu panjang (“god function”) -> pecah jadi helper yang fokus
• Mengabaikan tipe return -> definisikan output secara eksplisit
• Nested condition terlalu dalam -> ekstrak jadi helper check yang bernama jelas

Mini Project

• Buat daily task checker dengan:
• prioritas tugas,
• status selesai/belum,
• ringkasan hasil (done vs pending).

Bonus:

• Tambahkan fungsi untuk menampilkan hanya task prioritas tinggi yang belum selesai.

Latihan cepat

• Tulis satu fungsi memakai if/else
• Tulis ulang logika yang sama memakai switch
• Ubah satu function expression ke arrow function
• Jelaskan dalam satu kalimat: kapan switch lebih rapi dibanding if/else?

Ringkasan utama

• Fundamental JS yang kuat bikin React dan TypeScript jauh lebih mudah
• Fungsi kecil dan rapi lebih gampang di-debug dan dirawat
• Anotasi tipe mengubah asumsi jadi kontrak yang jelas

Langkah berikutnya

Lanjut ke [05. Array, Object, dan Data Handling].