{JS}indo

Bab 1: Dasar JavaScript

⏱ 21 menit baca

Sumber: javascript.info | Diterjemahkan & diringkas ke Bahasa Indonesia Untuk: Pemula absolut yang belum pernah ngoding sama sekali Format: Penjelasan padat + Analogi + Contoh Kode + Challenge

Daftar Isi

  1. Hello, World!
  2. Struktur Kode
  3. Variabel
  4. Tipe Data
  5. Interaksi: alert, prompt, confirm
  6. Konversi Tipe
  7. Operator Dasar
  8. Perbandingan
  9. Percabangan: if dan '?'
  10. Operator Logika
  11. Nullish Coalescing Operator '??'
  12. Perulangan: while dan for
  13. Statement switch
  14. Fungsi
  15. Function Expression
  16. Arrow Function

1. Hello, World!

Apa itu JavaScript?

JavaScript adalah bahasa yang digunakan untuk membuat website jadi "hidup" — bisa klik tombol, muncul notifikasi, data berubah tanpa reload halaman. Tapi sekarang JavaScript juga bisa jalan di luar browser (pakai Node.js), jadi bisa bikin aplikasi server, bot, bahkan aplikasi desktop.

Cara Menjalankan JavaScript

Kamu butuh "tempat" untuk menjalankan kode JavaScript. Ada 2 pilihan utama:

Pilihan 1: Di Browser (lewat file HTML)

Browser (Chrome, Firefox, dll) sudah punya "mesin" JavaScript bawaan. Kamu tinggal buat file HTML, sisipkan kode JS di dalamnya:

html
<!DOCTYPE html>
<html>
  <body>
    <script>
      alert("Hello, world!");
    </script>
  </body>
</html>

Simpan sebagai index.html, buka di browser → muncul popup "Hello, world!".

Pilihan 2: Di Terminal/Command Prompt (pakai Node.js)

Node.js memungkinkan JavaScript jalan di komputer kamu langsung, tanpa browser. Ini yang akan kita pakai untuk belajar karena lebih simpel.

Buat file bernama hello.js:

javascript
console.log("Hello, world!");

Buka terminal, jalankan:

bash
node hello.js

Hasilnya muncul di terminal: Hello, world!

Apa bedanya alert dan console.log?

  • alert() → memunculkan popup di browser. Hanya bisa di browser.
  • console.log() → menampilkan teks di terminal/console. Bisa di mana saja.

Untuk belajar, kita pakai console.log + Node.js karena lebih cepat dan praktis.

File Eksternal

Di dunia nyata, kode JavaScript dipisah ke file .js tersendiri (bukan dicampur di HTML). Ini supaya rapi dan bisa dipakai ulang:

html
<script src="script.js"></script>

Artinya: "Hei browser, jalankan kode yang ada di file script.js."

Penting: Kalau tag <script> sudah pakai src, maka kode yang ditulis di dalam tag tersebut akan diabaikan. Pilih salah satu.

Challenge 1.1

Buat file hello.js yang menampilkan 3 baris:

Nama saya [nama kamu] Saya sedang belajar JavaScript Hari ini tanggal [tanggal hari ini]

Jalankan dengan node hello.js.

2. Struktur Kode

Statement = Perintah

Setiap baris perintah di JavaScript disebut statement. Analoginya seperti kalimat dalam bahasa manusia — setiap kalimat menyampaikan satu instruksi.

javascript
console.log("Baris pertama");
console.log("Baris kedua");

Dua statement di atas masing-masing menyuruh komputer menampilkan teks.

Titik Koma (;) — Tanda Akhir Perintah

Setiap statement diakhiri titik koma. Ini seperti titik (.) di akhir kalimat bahasa Indonesia.

"Tapi saya lihat ada kode tanpa titik koma dan tetap jalan?"

Benar. JavaScript punya fitur bernama Automatic Semicolon Insertion (ASI) — dia akan coba menebak di mana titik koma seharusnya. Tapi tebakannya tidak selalu benar:

javascript
// Ini akan ERROR karena JS salah tebak:
console.log("Hello")[(1, 2)].forEach(console.log);
// JS mengira ini satu baris: console.log("Hello")[1, 2].forEach(...)

Kesimpulan: Selalu tulis titik koma. Jangan andalkan tebakan komputer.

Komentar — Catatan untuk Manusia

Komentar adalah teks yang diabaikan oleh komputer. Gunanya untuk:

  • Menjelaskan kode ke diri sendiri atau orang lain
  • Menonaktifkan kode sementara saat debugging
javascript
// Ini komentar satu baris. Semua setelah // diabaikan.

/*
  Ini komentar banyak baris.
  Bisa untuk penjelasan panjang.
*/

console.log("Ini dijalankan");
// console.log("Ini TIDAK dijalankan karena dikomentar");

Tips VS Code: Tekan Ctrl + / untuk mengubah baris jadi komentar (atau sebaliknya).

Challenge 2.1

Tulis program yang menampilkan biodata kamu (nama, umur, hobi). Tambahkan komentar di atas setiap console.log yang menjelaskan apa yang ditampilkan.

3. Variabel

Analogi: Variabel = Kotak Berlabel

Bayangkan kamu punya gudang berisi kotak-kotak. Setiap kotak:

  • Punya label (nama variabel)
  • Berisi sesuatu (nilai/value)

Kamu bisa ambil isi kotak, ganti isinya, atau lihat apa yang ada di dalamnya.

javascript
let umur = 25;
//  ↑ label   ↑ isi kotak

3 Cara Membuat Variabel

javascript
const nama = "Yazid"; // KONSTAN — isinya tidak bisa diganti
let umur = 25; // BISA DIUBAH — isinya bisa diganti nanti
var kota = "Jakarta"; // CARA LAMA — jangan pakai ini

Kenapa ada 3? Dan mana yang harus dipakai?

KeywordBisa diubah?Kapan pakai?
constTidakDefault. Pakai ini dulu untuk semua variabel
letYaHanya kalau kamu yakin nilainya akan berubah
varYaJangan pakai. Ini cara lama yang punya banyak masalah

Kenapa const dulu?

Karena kalau kamu tahu suatu nilai tidak akan berubah, lebih aman dikunci. Ini mencegah bug — kamu tidak akan tidak sengaja mengubah nilai yang seharusnya tetap.

javascript
const hargaBarang = 50000; // harga sudah fix, tidak berubah
let jumlahBarang = 1; // jumlah bisa berubah (user bisa tambah)

jumlahBarang = 3; // OK, let boleh diubah
hargaBarang = 60000; // ERROR! const tidak boleh diubah

Aturan Penamaan Variabel

Nama variabel itu seperti label kotak — harus jelas dan mengikuti aturan:

Aturan wajib (kalau dilanggar = error):

  • Hanya boleh huruf, angka, $, dan _
  • Tidak boleh diawali angka
  • Tidak boleh pakai spasi

Konvensi (tidak error tapi harus diikuti supaya rapi):

  • Gunakan camelCase: huruf kecil di awal, huruf besar di setiap kata baru
  • Nama harus deskriptif — orang lain bisa paham tanpa baca kode lainnya
javascript
// BAGUS — jelas dan deskriptif
let namaLengkap = "Budi Santoso";
let totalHarga = 150000;
let sudahBayar = false;

// JELEK — tidak jelas
let x = "Budi Santoso";
let a = 150000;
let b = false;

// ERROR — melanggar aturan
let 1nama = "Budi";       // diawali angka
let nama lengkap = "Budi"; // ada spasi
let nama-saya = "Budi";   // tanda hubung tidak boleh

Kenapa harus deskriptif?

Bayangkan kamu baca kode ini 3 bulan kemudian:

javascript
let x = 50000;
let y = 3;
let z = x * y;

Kamu pasti bingung: "x itu apa? y itu apa?"

Bandingkan dengan:

javascript
let hargaPerItem = 50000;
let jumlahItem = 3;
let totalBelanja = hargaPerItem * jumlahItem;

Langsung paham tanpa perlu penjelasan tambahan.

Konstanta UPPERCASE

Ada konvensi khusus: kalau nilainya sudah diketahui sebelum program jalan (hard-coded), tulis dengan HURUF_BESAR:

javascript
const WARNA_MERAH = "#FF0000";
const MAX_LOGIN_ATTEMPT = 5;
const API_URL = "https://api.example.com";

Ini bukan aturan wajib, tapi membantu membedakan "konstanta yang memang sudah ditentukan dari awal" vs "konstanta yang dihitung saat program jalan":

javascript
const PAJAK_PERSEN = 11; // sudah tahu dari awal → UPPERCASE
const totalPajak = (hargaBarang * PAJAK_PERSEN) / 100; // dihitung saat jalan → camelCase

Challenge 3.1

  1. Buat variabel const untuk: nama planet kita, kecepatan cahaya (300000 km/s)
  2. Buat variabel let untuk: jumlah pengunjung website (mulai dari 0)
  3. Tambahkan 5 pengunjung baru, lalu tampilkan: "Pengunjung saat ini: [jumlah]"
  4. Coba ubah nama planet — apa yang terjadi?

4. Tipe Data

Kenapa Tipe Data Penting?

Komputer perlu tahu jenis data yang dia pegang supaya tahu cara memprosesnya:

  • Angka 5 + angka 3 = 8 (dijumlahkan)
  • Teks "5" + teks "3" = "53" (disambung)

Kalau kamu tidak paham tipe data, kamu akan bingung kenapa "5" + 3 hasilnya "53" bukan 8.

JavaScript Punya 8 Tipe Data

1. Number — Angka

Untuk semua jenis angka: bulat, desimal, positif, negatif.

javascript
let umur = 25; // bilangan bulat
let suhu = 36.5; // desimal
let minus = -10; // negatif
let saldo = 1500000; // angka besar

Ada 2 nilai spesial di tipe Number:

javascript
let takTerhingga = Infinity; // lebih besar dari angka apapun
let bukanAngka = NaN; // "Not a Number" — hasil operasi yang gagal

NaN muncul kalau kamu coba operasi matematika yang tidak masuk akal:

javascript
console.log("hello" * 2); // NaN — tidak bisa kali teks dengan angka
console.log("hello" - 1); // NaN

2. String — Teks

String adalah kumpulan karakter (huruf, angka, simbol) yang dibungkus tanda kutip:

javascript
let nama = "Yazid"; // kutip ganda
let kota = "Jakarta"; // kutip tunggal
let pesan = `Halo, ${nama}`; // backtick (template literal)

Apa bedanya ketiga tanda kutip?

Kutip ganda ("...") dan kutip tunggal ('...') fungsinya sama persis. Pilih salah satu dan konsisten.

Backtick (`...`) punya kelebihan: bisa menyisipkan variabel langsung ke dalam teks pakai ${...}:

javascript
let nama = "Yazid";
let umur = 25;

// Tanpa backtick — harus disambung manual pakai +
console.log("Nama saya " + nama + ", umur " + umur + " tahun");

// Dengan backtick — lebih rapi dan mudah dibaca
console.log(`Nama saya ${nama}, umur ${umur} tahun`);

Keduanya menghasilkan output yang sama, tapi backtick jauh lebih enak dibaca dan ditulis.

Ingat: ${} hanya bekerja di dalam backtick (`), bukan di kutip biasa.

3. Boolean — Benar atau Salah

Hanya punya 2 kemungkinan nilai: true atau false. Ini dipakai untuk logika dan pengambilan keputusan:

javascript
let sudahLogin = true;
let sudahBayar = false;

// Biasanya muncul dari perbandingan:
let dewasa = umur >= 17; // true kalau umur 17+, false kalau kurang

Analogi: Boolean itu seperti saklar lampu — hanya bisa ON atau OFF, tidak ada "setengah nyala".

4. null — Sengaja Kosong

null artinya "sengaja dikosongkan" atau "tidak ada nilai". Ini kamu yang set manual:

javascript
let data = null; // "Saya tahu variabel ini ada, tapi isinya memang kosong untuk sekarang"

Analogi: Kotak yang sengaja dikosongkan. Kotaknya ada, tapi kamu memutuskan untuk tidak mengisinya.

5. undefined — Belum Diisi

undefined artinya "belum pernah diisi". Ini otomatis dari JavaScript:

javascript
let sesuatu;
console.log(sesuatu); // undefined — variabel ada tapi belum dikasih nilai

Bedanya null vs undefined:

  • null = kamu sengaja mengosongkan → "Saya tahu ini kosong"
  • undefined = belum pernah diisi → "Ini belum diatur"

Analogi:

  • null = Formulir yang kamu isi dengan tanda strip (-) di kolom "Nama Tengah" karena memang tidak punya
  • undefined = Formulir yang kolom "Nama Tengah"-nya belum kamu isi sama sekali

6. BigInt — Angka Sangat Besar

Number biasa punya batas (sekitar 9 quadrillion). Kalau butuh angka lebih besar, pakai BigInt:

javascript
let angkaBesar = 1234567890123456789012345678901234567890n; // tambah 'n' di akhir

Kamu jarang butuh ini di awal belajar. Tahu saja bahwa ini ada.

7. Symbol — Identitas Unik

Dipakai untuk membuat identifier yang dijamin unik. Ini topik advanced, skip dulu untuk sekarang.

8. Object — Kumpulan Data

Semua tipe di atas disebut primitif (menyimpan satu nilai). Object bisa menyimpan banyak nilai sekaligus:

javascript
let user = {
  nama: "Yazid",
  umur: 25,
  kota: "Jakarta",
};

Object akan dibahas mendalam di bab terpisah.

Operator typeof — Mengecek Tipe Data

Kalau kamu bingung suatu variabel isinya tipe apa, pakai typeof:

javascript
console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" ← ini BUG lama di JS, seharusnya "null"
console.log(typeof {}); // "object"

Fun fact: typeof null menghasilkan "object" — ini bug dari tahun 1995 yang tidak pernah diperbaiki karena terlalu banyak kode yang sudah bergantung pada perilaku ini.

JavaScript Bersifat Dinamis

Artinya, satu variabel bisa berubah tipe:

javascript
let data = "hello"; // sekarang string
data = 42; // sekarang number — tidak error!

Ini berbeda dari bahasa seperti Java/C++ yang tipenya harus tetap. Di JavaScript lebih fleksibel, tapi juga lebih rawan bug kalau tidak hati-hati.

Challenge 4.1

Tanpa menjalankan kode, tebak output dari masing-masing baris:

javascript
let nama = "Ilya";
console.log(`hello ${1}`); // ?
console.log(`hello ${"nama"}`); // ?
console.log(`hello ${nama}`); // ?
console.log(typeof null); // ?
console.log(typeof undefined); // ?

Setelah menebak, baru jalankan untuk cek jawaban kamu.

5. Interaksi: alert, prompt, confirm

Konteks: Browser vs Node.js

Tiga fungsi ini (alert, prompt, confirm) adalah fungsi bawaan browser untuk berinteraksi dengan user lewat popup. Mereka tidak tersedia di Node.js.

Kenapa tetap dibahas? Karena:

  1. Banyak tutorial dan soal latihan menggunakannya
  2. Konsepnya (input/output) berlaku di mana saja
  3. Kalau kamu bikin website, kamu akan pakai ini

alert — Menampilkan Pesan Popup

javascript
alert("Selamat datang!");

Memunculkan popup dengan tombol OK. User harus klik OK untuk melanjutkan. Ini cara paling simpel untuk menampilkan pesan di browser.

prompt — Meminta Input dari User

javascript
let nama = prompt("Siapa nama kamu?", "");

Memunculkan popup dengan kolom input. User bisa mengetik sesuatu.

  • Parameter pertama: teks pertanyaan
  • Parameter kedua: nilai default di kolom input (opsional)
  • Hasilnya: string yang diketik user, atau null jika user klik Cancel

confirm — Pertanyaan Ya/Tidak

javascript
let setuju = confirm("Apakah kamu yakin ingin menghapus?");

Memunculkan popup dengan tombol OK dan Cancel.

  • Klik OK → return true
  • Klik Cancel → return false

Bagaimana di Node.js?

Di Node.js, untuk menerima input dari user kita pakai modul readline:

javascript
const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.question("Siapa nama kamu? ", (jawaban) => {
  console.log(`Halo, ${jawaban}!`);
  rl.close();
});

Ini lebih kompleks, jadi untuk latihan-latihan awal, kamu boleh langsung hardcode nilainya:

javascript
// Daripada minta input, langsung tulis nilainya untuk latihan
let nama = "Yazid";
let umur = 25;
console.log(`Halo ${nama}! Tahun depan umur kamu ${umur + 1}`);

Challenge 5.1

Buat program yang menghitung umur kamu dalam hari:

  1. Set variabel tahunLahir (hardcode)
  2. Set variabel tahunSekarang (hardcode)
  3. Hitung perkiraan umur dalam hari (asumsikan 1 tahun = 365 hari)
  4. Tampilkan: "Kamu sudah hidup kira-kira [X] hari!"

6. Konversi Tipe

Kenapa Perlu Konversi?

Kadang data yang kamu punya tipenya tidak sesuai dengan yang kamu butuhkan:

  • User mengetik "25" di form (string), tapi kamu mau hitung matematika (butuh number)
  • Kamu punya angka 100, tapi mau tampilkan sebagai teks "Skor: 100"

JavaScript kadang melakukan konversi otomatis (implicit), tapi hasilnya sering membingungkan. Lebih baik kamu konversi manual (explicit) supaya jelas.

Konversi ke String

javascript
let angka = 123;
let teks = String(angka); // "123"

// Atau cara cepat: tambahkan string kosong
let teks2 = angka + ""; // "123"

Konversi ke Number

Ini yang paling sering kamu butuhkan (karena input dari user selalu berupa string):

javascript
let str = "123";
let num = Number(str); // 123 (sekarang bisa dihitung)

Aturan konversi ke Number — hafalkan ini:

InputHasilPenjelasan
"123"123String angka → angka
"hello"NaNBukan angka → NaN
"" (string kosong)0Kosong dianggap 0
true1true = 1
false0false = 0
null0null = 0
undefinedNaNundefined = NaN
javascript
console.log(Number("123")); // 123
console.log(Number("hello")); // NaN
console.log(Number("")); // 0
console.log(Number(true)); // 1
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

Konversi ke Boolean

Ini penting untuk memahami if statement nanti. Aturannya simpel:

Nilai yang jadi false (disebut "falsy"):

  • 0 — angka nol
  • "" — string kosong
  • null
  • undefined
  • NaN

Semua selain itu jadi true (disebut "truthy").

javascript
Boolean(0); // false
Boolean(""); // false
Boolean(null); // false

Boolean(1); // true
Boolean("hello"); // true
Boolean("0"); // true ← HATI-HATI! String "0" itu TRUTHY (bukan string kosong)
Boolean(" "); // true ← String spasi juga TRUTHY

Jebakan klasik: String "0" dan " " (spasi) itu truthy karena mereka bukan string kosong. Yang falsy hanya string yang benar-benar kosong: "".

Challenge 6.1

Tanpa menjalankan kode, tebak hasilnya dan jelaskan kenapa:

javascript
console.log(Boolean("0")); // ?
console.log(Boolean(0)); // ?
console.log(Boolean("")); // ?
console.log(Boolean(" ")); // ?
console.log(Number(null)); // ?
console.log(Number(undefined)); // ?
console.log(Number("")); // ?
console.log(Number(" ")); // ?

7. Operator Dasar

Operator Aritmatika — Matematika Dasar

javascript
let a = 10,
  b = 3;

console.log(a + b); // 13 — penjumlahan
console.log(a - b); // 7  — pengurangan
console.log(a * b); // 30 — perkalian
console.log(a / b); // 3.333... — pembagian (selalu desimal di JS)
console.log(a % b); // 1  — modulus (sisa bagi)
console.log(a ** b); // 1000 — pangkat (10³)

Modulus (%) — Apa gunanya?

Modulus mengembalikan sisa pembagian. Ini sangat berguna untuk:

  • Cek genap/ganjil: angka % 2 === 0 → genap
  • Cek kelipatan: angka % 3 === 0 → kelipatan 3
  • Membuat sesuatu berulang (cycling)
javascript
console.log(10 % 3); // 1 (10 dibagi 3 = 3 sisa 1)
console.log(8 % 2); // 0 (8 dibagi 2 = 4 sisa 0 → genap!)
console.log(7 % 2); // 1 (7 dibagi 2 = 3 sisa 1 → ganjil!)

Penggabungan String dengan +

Operator + punya perilaku ganda:

  • Kalau kedua sisi angka → penjumlahan matematika
  • Kalau salah satu sisi string → penggabungan teks
javascript
// Angka + Angka = matematika
console.log(5 + 3); // 8

// String + apapun = penggabungan
console.log("5" + 3); // "53" (3 diubah jadi string, lalu disambung)
console.log(3 + "5"); // "35"
console.log("Halo" + " " + "Dunia"); // "Halo Dunia"

Jebakan urutan operasi:

javascript
console.log(2 + 2 + "1"); // "41" — bukan "221"!
// Kenapa? Dibaca dari kiri: (2+2) = 4, lalu 4+"1" = "41"

console.log("1" + 2 + 2); // "122"
// Kenapa? Dari kiri: "1"+2 = "12", lalu "12"+2 = "122"

Tips: Kalau mau penjumlahan angka yang datanya dari string, konversi dulu ke Number: Number("5") + 3 → 8

Operator Assignment (Penugasan Singkat)

Ini cara singkat untuk mengubah nilai variabel:

javascript
let x = 10;

// Cara panjang        // Cara singkat
x = x + 5;
x += 5; // x sekarang 15
x = x - 3;
x -= 3; // x sekarang 12
x = x * 2;
x *= 2; // x sekarang 24
x = x / 4;
x /= 4; // x sekarang 6
x = x % 4;
x %= 4; // x sekarang 2

Keduanya melakukan hal yang sama. Cara singkat lebih umum dipakai karena lebih ringkas.

Increment (++) dan Decrement (--)

Cara paling singkat untuk menambah/mengurangi 1:

javascript
let counter = 0;
counter++; // counter = 1 (sama dengan counter += 1)
counter++; // counter = 2
counter--; // counter = 1 (sama dengan counter -= 1)

Prefix vs Postfix — Perbedaan Halus:

javascript
let a = 1;

// Prefix (++a): naikkan DULU, baru gunakan nilainya
let b = ++a; // a jadi 2, b = 2

// Postfix (a++): gunakan nilainya DULU, baru naikkan
let c = a++; // c = 2 (nilai a sebelum naik), a jadi 3

Kalau kamu hanya pakai counter++ sendirian (bukan di dalam ekspresi lain), prefix dan postfix hasilnya sama. Perbedaannya hanya terasa kalau dipakai di dalam ekspresi.

Tips pemula: Pakai counter++ saja, jangan dipusingkan prefix/postfix dulu.

Challenge 7.1

Tanpa menjalankan kode, tebak hasilnya:

javascript
console.log("" + 1 + 0); // ?
console.log("" - 1 + 0); // ?
console.log(3 * "3"); // ?
console.log(1 + 2 + "3"); // ?
console.log("1" + 2 + 3); // ?

Hint: Ingat aturan + dengan string vs operator lain (-, *, /) yang selalu konversi ke number.

8. Perbandingan

Operator Perbandingan — Menghasilkan Boolean

Operator perbandingan selalu menghasilkan true atau false:

javascript
console.log(5 > 3); // true  — 5 lebih besar dari 3
console.log(5 < 3); // false — 5 TIDAK lebih kecil dari 3
console.log(5 >= 5); // true  — 5 lebih besar ATAU sama dengan 5
console.log(5 <= 4); // false
console.log(5 == 5); // true  — 5 sama dengan 5
console.log(5 != 3); // true  — 5 tidak sama dengan 3

== vs === (Ini SANGAT Penting)

JavaScript punya 2 cara membandingkan kesamaan:

== (loose equality / non-strict): Membandingkan nilai saja. Kalau tipenya beda, JavaScript akan coba konversi dulu:

javascript
5 == "5"; // true — "5" dikonversi ke 5, lalu dibandingkan
0 == false; // true — false dikonversi ke 0
"" == false; // true — keduanya jadi 0
null == undefined; // true — kasus khusus

=== (strict equality): Membandingkan nilai DAN tipe. Tidak ada konversi:

javascript
5 === "5"; // false — number vs string, langsung false
0 === false; // false — number vs boolean
null === undefined; // false — null vs undefined
5 === 5; // true — sama tipe, sama nilai

ATURAN EMAS: Selalu pakai === dan !==. Jangan pakai == dan !=.

Kenapa? Karena == punya aturan konversi yang rumit dan sering menghasilkan hal yang tidak kamu harapkan. Dengan ===, hasilnya selalu predictable.

Perbandingan String

String dibandingkan per karakter berdasarkan urutan Unicode (mirip urutan alfabet, tapi huruf kecil > huruf besar):

javascript
console.log("apple" > "banana"); // false — 'a' < 'b' dalam alfabet
console.log("Bee" > "apple"); // false — huruf besar punya kode lebih kecil
console.log("a" > "A"); // true  — 'a' (97) > 'A' (65) di Unicode

Jebakan: null dan undefined dalam Perbandingan

javascript
// Perbandingan == (khusus)
null == undefined; // true (satu-satunya kasus khusus)
null == 0; // false (null hanya == undefined)

// Perbandingan > < >= <= (null jadi 0)
null > 0; // false (0 > 0 = false)
null == 0; // false (null hanya == undefined, bukan 0!)
null >= 0; // true  (0 >= 0 = true) ← ANEH tapi begitulah JS

Tips: Hindari membandingkan null/undefined dengan >, <, >=, <=. Hasilnya membingungkan.

Challenge 8.1

Tanpa menjalankan kode, tebak true atau false:

javascript
5 > 4; // ?
"apple" > "pineapple"; // ?
undefined == null; // ?
undefined === null; // ?
null == 0; // ?
null === 0; // ?
0 == false; // ?
0 === false; // ?
"" == false; // ?
"" === false; // ?

9. Percabangan: if dan '?'

Konsep: Membuat Keputusan

Sampai sekarang, kode kita jalan lurus dari atas ke bawah. Tapi di dunia nyata, program perlu membuat keputusan:

  • Kalau user sudah login → tampilkan dashboard
  • Kalau saldo cukup → proses pembayaran
  • Kalau umur < 17 → tolak akses

Ini namanya percabangan — kode memilih jalur mana yang dijalankan berdasarkan kondisi.

if...else

javascript
const umur = 18;

if (umur >= 17) {
  console.log("Boleh bikin SIM");
} else {
  console.log("Belum boleh bikin SIM");
}

Cara bacanya: "JIKA umur >= 17, MAKA jalankan blok pertama. KALAU TIDAK, jalankan blok kedua."

Anatomi if:

javascript
if (kondisi) {
  // kode yang jalan kalau kondisi TRUE
} else {
  // kode yang jalan kalau kondisi FALSE
}

kondisi di dalam kurung akan dievaluasi jadi boolean (true/false). Kalau hasilnya bukan boolean, JavaScript akan konversi otomatis (ingat aturan truthy/falsy dari Bab 6).

else if — Lebih dari 2 Pilihan

javascript
const nilai = 75;

if (nilai >= 90) {
  console.log("Grade A — Luar biasa!");
} else if (nilai >= 80) {
  console.log("Grade B — Bagus!");
} else if (nilai >= 70) {
  console.log("Grade C — Cukup");
} else if (nilai >= 60) {
  console.log("Grade D — Kurang");
} else {
  console.log("Grade E — Tidak lulus");
}

JavaScript mengecek dari atas ke bawah. Begitu menemukan kondisi yang true, dia jalankan blok itu dan skip semua yang di bawahnya.

Jadi urutan penting! Kalau kamu taruh nilai >= 60 di paling atas, semua nilai 60+ akan masuk ke situ dan tidak pernah sampai ke pengecekan 70, 80, 90.

Operator Ternary (?) — if/else Versi Singkat

Kalau kamu hanya perlu memilih antara 2 nilai berdasarkan kondisi, pakai ternary:

javascript
// Syntax: kondisi ? nilaiKalauTrue : nilaiKalauFalse

const umur = 20;
const status = umur >= 17 ? "dewasa" : "anak-anak";
console.log(status); // "dewasa"

Ini sama persis dengan:

javascript
let status;
if (umur >= 17) {
  status = "dewasa";
} else {
  status = "anak-anak";
}

Tapi ditulis dalam 1 baris. Gunakan ternary untuk kasus sederhana saja. Kalau logikanya kompleks, pakai if/else biasa supaya lebih mudah dibaca.

Ternary bertingkat (boleh tapi hati-hati):

javascript
const nilai = 75;
const grade = nilai >= 90 ? "A" : nilai >= 80 ? "B" : nilai >= 70 ? "C" : "D";

Tips: Kalau ternary bertingkat sudah lebih dari 2 level, lebih baik pakai if/else if saja. Kode yang mudah dibaca lebih penting dari kode yang singkat.

Challenge 9.1

Buat program yang menentukan tarif parkir:

  • Motor: Rp 2.000/jam
  • Mobil: Rp 5.000/jam
  • Truk: Rp 10.000/jam

Variabel: jenisKendaraan dan jamParkir. Hitung dan tampilkan total biaya. Tambahkan: kalau lebih dari 5 jam, dapat diskon 10%.

10. Operator Logika

Konsep: Menggabungkan Kondisi

Kadang satu kondisi tidak cukup:

  • "Kalau umur >= 17 DAN punya KTP" → boleh daftar
  • "Kalau bayar pakai OVO ATAU GoPay" → dapat cashback

Operator logika memungkinkan kamu menggabungkan beberapa kondisi.

OR ( || ) — "Salah satu benar = benar"

javascript
true || false; // true
false || true; // true
false || false; // false (dua-duanya salah)
true || true; // true

Penggunaan di if:

javascript
const metode = "OVO";

if (metode === "OVO" || metode === "GoPay" || metode === "Dana") {
  console.log("Dapat cashback 5%!");
}

Fitur tersembunyi OR — mengembalikan nilai truthy pertama:

OR tidak selalu mengembalikan true/false. Dia mengembalikan nilai truthy pertama yang ditemukan (dari kiri ke kanan), atau nilai terakhir kalau semua falsy:

javascript
console.log(null || "Halo" || undefined); // "Halo" (truthy pertama)
console.log(null || undefined || 0); // 0 (semua falsy, return terakhir)

// Berguna untuk default value:
let namaUser = ""; // user belum isi nama
let tampilan = namaUser || "Anonim"; // "Anonim" (karena "" falsy)

AND ( && ) — "Semua harus benar"

javascript
true && true; // true
true && false; // false
false && true; // false (yang pertama sudah salah, langsung false)

Penggunaan di if:

javascript
const umur = 20;
const punyaKTP = true;

if (umur >= 17 && punyaKTP) {
  console.log("Boleh daftar");
}

Fitur tersembunyi AND — mengembalikan nilai falsy pertama:

javascript
console.log(1 && 2 && 3); // 3 (semua truthy, return terakhir)
console.log(1 && null && 3); // null (falsy pertama)
console.log(1 && 0 && 3); // 0 (falsy pertama)

NOT ( ! ) — Membalik

javascript
!true; // false
!false; // true
!0; // true (0 falsy, dibalik jadi true)
!"hello"; // false ("hello" truthy, dibalik jadi false)

Double NOT (!!) — Konversi ke boolean:

javascript
!!1; // true
!!0; // false
!!"hello"; // true
!!""; // false

Ini cara cepat mengkonversi nilai apapun ke boolean (sama seperti Boolean(nilai)).

Prioritas: ! → && → ||

javascript
// ! dijalankan pertama, lalu &&, lalu ||
let result = (!false && true) || false;
// Langkah 1: !false = true
// Langkah 2: true && true = true
// Langkah 3: true || false = true

Kalau ragu, pakai kurung () untuk memperjelas:

javascript
let result = (!false && true) || false; // lebih jelas

Challenge 10.1

Tanpa menjalankan kode, tebak hasilnya dan jelaskan step-by-step:

javascript
console.log(null || 2 || undefined); // ?
console.log(1 && null && 2); // ?
console.log(null || (2 && 3) || 4); // ?

Hint untuk soal ketiga: ingat prioritas && lebih tinggi dari ||.

11. Nullish Coalescing Operator '??'

Masalah dengan || untuk Default Value

Di bab sebelumnya, kita pakai || untuk default value:

javascript
let nama = inputUser || "Anonim";

Tapi ada masalah: || menganggap 0, "", dan false sebagai falsy. Padahal kadang nilai-nilai itu valid:

javascript
let tinggi = 0; // tinggi badan bayi yang baru lahir = 0 cm? Mungkin saja valid!
let display = tinggi || 100; // 100 ← SALAH! Kita mau 0, bukan 100!

Solusi: ?? (Nullish Coalescing)

?? hanya menganggap null dan undefined sebagai "kosong". Nilai lain (termasuk 0, "", false) dianggap valid:

javascript
let tinggi = 0;
let display = tinggi ?? 100; // 0 ← BENAR! 0 bukan null/undefined

let nama = "";
let tampil = nama ?? "Anonim"; // "" ← BENAR! String kosong bukan null/undefined

let data = null;
let hasil = data ?? "default"; // "default" ← null diganti default

Kapan Pakai || vs ??

SituasiPakai
Mau ganti SEMUA nilai falsy (0, "", false, null, undefined)||
Hanya mau ganti null/undefined, sisanya valid??
javascript
// Contoh: form input
let skor = 0; // user memang dapat skor 0

// || SALAH — menganggap 0 sebagai "kosong"
console.log(skor || "Belum ada skor"); // "Belum ada skor" ← SALAH

// ?? BENAR — 0 adalah nilai valid
console.log(skor ?? "Belum ada skor"); // 0 ← BENAR

Challenge 11.1

Buat program yang menampilkan profil user dengan default value yang benar:

javascript
const user = {
  nama: null, // belum diisi
  umur: 0, // bayi baru lahir
  kota: "", // sengaja dikosongkan
  email: undefined, // belum diatur
};

// Tampilkan semua field dengan default value yang TEPAT:
// - nama: default "Anonim" (karena null)
// - umur: tetap 0 (valid!)
// - kota: tetap "" (valid!)
// - email: default "belum@diisi.com" (karena undefined)
// Gunakan ?? untuk semua

12. Perulangan: while dan for

Konsep: Mengulang Tanpa Copy-Paste

Bayangkan kamu mau menampilkan angka 1 sampai 100. Tanpa loop:

javascript
console.log(1);
console.log(2);
console.log(3);
// ... 97 baris lagi?!

Dengan loop:

javascript
for (let i = 1; i <= 100; i++) {
  console.log(i);
}

3 baris vs 100 baris. Loop = cara menyuruh komputer mengulang sesuatu.

while — "Ulang selama kondisi masih benar"

javascript
let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++; // PENTING: tanpa ini, loop tidak pernah berhenti!
}

Cara bacanya: "SELAMA i kurang dari 5, jalankan kode di dalam , lalu ulangi."

Alur eksekusi:

  1. Cek kondisi: i < 5? → 0 < 5? → true → masuk
  2. Print 0, i jadi 1
  3. Cek kondisi: 1 < 5? → true → masuk
  4. Print 1, i jadi 2
  5. ... (terus sampai i = 5)
  6. Cek kondisi: 5 < 5? → false → KELUAR dari loop

BAHAYA: Infinite Loop! Kalau kamu lupa i++, kondisi i < 5 akan selalu true dan program tidak pernah berhenti. Kalau ini terjadi, tekan Ctrl + C di terminal untuk menghentikan paksa.

do...while — "Jalankan minimal 1 kali, baru cek"

javascript
let i = 10;
do {
  console.log(i); // 10 (tetap jalan 1 kali meskipun kondisi false)
  i++;
} while (i < 5);

Bedanya dengan while: do...while pasti jalan minimal 1 kali karena kondisi dicek di akhir, bukan di awal.

for — Loop Paling Umum

javascript
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Anatomi for:

javascript
for (inisialisasi; kondisi; langkah) {
  // kode yang diulang
}
  • Inisialisasi (let i = 0): dijalankan 1x di awal
  • Kondisi (i < 5): dicek sebelum setiap iterasi. Kalau false, loop berhenti
  • Langkah (i++): dijalankan setelah setiap iterasi

Kapan pakai while vs for?

  • for → kalau kamu tahu berapa kali mau mengulang
  • while → kalau kamu tidak tahu berapa kali, tergantung kondisi

break — Hentikan Loop Paksa

javascript
for (let i = 0; i < 100; i++) {
  if (i === 5) break; // STOP! Keluar dari loop sekarang juga
  console.log(i); // 0, 1, 2, 3, 4
}
// Setelah break, eksekusi lanjut di sini

continue — Lewati Iterasi Ini

javascript
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // Kalau genap, SKIP, langsung ke iterasi berikutnya
  console.log(i); // 1, 3, 5, 7, 9 (hanya ganjil)
}

Analogi:

  • break = "Saya mau keluar dari ruangan sekarang" (loop selesai total)
  • continue = "Saya skip yang ini, lanjut ke berikutnya" (loop tetap jalan)

Loop Bersarang (Nested Loop)

Loop di dalam loop. Berguna untuk pola 2 dimensi (tabel, grid, dll):

javascript
for (let baris = 1; baris <= 3; baris++) {
  for (let kolom = 1; kolom <= 3; kolom++) {
    console.log(`Baris ${baris}, Kolom ${kolom}`);
  }
}
// Output: Baris 1 Kolom 1, Baris 1 Kolom 2, ... Baris 3 Kolom 3

Loop luar jalan 3 kali. Setiap kali loop luar jalan, loop dalam jalan 3 kali. Total: 3 x 3 = 9 iterasi.

Challenge 12.1

Soal 1: FizzBuzz (soal interview klasik!)

Tampilkan angka 1-30 dengan aturan:

  • Kalau habis dibagi 3: print "Fizz"
  • Kalau habis dibagi 5: print "Buzz"
  • Kalau habis dibagi 3 DAN 5: print "FizzBuzz"
  • Selain itu: print angkanya

Output awal: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, ...

Hint: Cek "habis dibagi 3 DAN 5" duluan sebelum cek masing-masing. Kenapa? Pikirkan!

Soal 2: Segitiga Bintang

Buat output:

* ** *** **** *****

Hint: Pakai nested loop. Loop luar = baris (1-5). Loop dalam = jumlah bintang per baris.

13. Statement switch

Kapan Pakai switch?

Kalau kamu punya satu variabel yang mau dicek terhadap banyak kemungkinan nilai, switch lebih rapi dari if/else if yang panjang:

javascript
// Dengan if/else if — panjang dan repetitif
if (hari === 1) {
  console.log("Senin");
} else if (hari === 2) {
  console.log("Selasa");
} else if (hari === 3) {
  console.log("Rabu");
}
// ... dan seterusnya

// Dengan switch — lebih rapi
switch (hari) {
  case 1:
    console.log("Senin");
    break;
  case 2:
    console.log("Selasa");
    break;
  case 3:
    console.log("Rabu");
    break;
  default:
    console.log("Hari tidak valid");
}

Anatomi switch

javascript
switch (ekspresi) {
  case nilai1:
    // kode kalau ekspresi === nilai1
    break;
  case nilai2:
    // kode kalau ekspresi === nilai2
    break;
  default:
  // kode kalau tidak ada yang cocok
}

Penting:

  1. switch menggunakan perbandingan strict (===), bukan ==
  2. break wajib di setiap case. Tanpa break, eksekusi akan "jatuh" ke case berikutnya (fall-through)
  3. default opsional, tapi sebaiknya selalu ada untuk menangani kasus tak terduga

Fall-through (Tanpa break)

javascript
const angka = 1;
switch (angka) {
  case 1:
    console.log("Satu");
  // tidak ada break!
  case 2:
    console.log("Dua");
  // tidak ada break!
  case 3:
    console.log("Tiga");
    break;
}
// Output: "Satu", "Dua", "Tiga" — SEMUA dijalankan sampai ketemu break!

Grouping Case — Memanfaatkan Fall-through

Kadang fall-through berguna untuk mengelompokkan case yang punya aksi sama:

javascript
const hari = 6;

switch (hari) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("Hari kerja");
    break;
  case 6:
  case 7:
    console.log("Akhir pekan!");
    break;
  default:
    console.log("Hari tidak valid");
}

Challenge 13.1

Buat kalkulator sederhana:

  • Variabel a = 10, b = 3, operator = "/"
  • Gunakan switch untuk menghitung berdasarkan operator (+, -, *, /)
  • Handle kasus: pembagian dengan 0 (tampilkan error), operator tidak dikenal
  • Tampilkan: "10 / 3 = 3.333..."

14. Fungsi

Konsep: Kenapa Butuh Fungsi?

Bayangkan kamu punya kode untuk menghitung diskon yang dipakai di 10 tempat berbeda. Tanpa fungsi, kamu harus copy-paste kode yang sama 10 kali. Kalau ada bug? Harus perbaiki di 10 tempat.

Fungsi = kode yang dibungkus dan diberi nama, supaya bisa dipanggil berkali-kali tanpa copy-paste.

Analogi: Fungsi itu seperti resep masakan. Kamu tulis resep sekali, lalu bisa masak berkali-kali tanpa harus mengingat ulang langkah-langkahnya.

Membuat dan Memanggil Fungsi

javascript
// MEMBUAT fungsi (menulis resep)
function sapa(nama) {
  console.log(`Halo, ${nama}! Selamat datang.`);
}

// MEMANGGIL fungsi (memasak pakai resep)
sapa("Yazid"); // "Halo, Yazid! Selamat datang."
sapa("Budi"); // "Halo, Budi! Selamat datang."
sapa("Ani"); // "Halo, Ani! Selamat datang."

Tulis sekali, pakai berkali-kali. Kalau mau ubah format sapaan, cukup ubah di satu tempat.

Parameter — "Bahan" yang Dibutuhkan Fungsi

Parameter adalah variabel yang diterima fungsi dari luar:

javascript
function hitungLuas(panjang, lebar) {
  //                 ↑ parameter 1   ↑ parameter 2
  console.log(`Luas: ${panjang * lebar} m²`);
}

hitungLuas(5, 3); // "Luas: 15 m²"
hitungLuas(10, 7); // "Luas: 70 m²"

Analogi: Parameter = bahan masakan. Resep kue butuh tepung dan gula (parameter). Setiap kali masak, kamu bisa pakai jumlah berbeda (argumen).

Default Value — Nilai Cadangan

Kalau parameter tidak diisi saat pemanggilan, nilainya jadi undefined. Kamu bisa set default:

javascript
function sapa(nama = "Teman") {
  console.log(`Halo, ${nama}!`);
}

sapa("Yazid"); // "Halo, Yazid!"
sapa(); // "Halo, Teman!" (pakai default karena tidak diisi)

Return — Mengembalikan Hasil

Fungsi bisa mengembalikan nilai ke pemanggil pakai return:

javascript
function tambah(a, b) {
  return a + b; // kembalikan hasilnya
}

const hasil = tambah(3, 5); // hasil = 8
console.log(hasil); // 8
console.log(tambah(10, 20)); // 30

Tanpa return:

javascript
function sapa(nama) {
  console.log(`Halo, ${nama}!`);
  // tidak ada return
}

const hasil = sapa("Yazid"); // "Halo, Yazid!" ditampilkan
console.log(hasil); // undefined (karena tidak ada return)

Penting tentang return:

  • return langsung menghentikan fungsi. Kode setelah return tidak akan dijalankan.
  • Fungsi tanpa return mengembalikan undefined.
javascript
function cekUmur(umur) {
  if (umur < 0) {
    return "Umur tidak valid"; // fungsi BERHENTI di sini
  }
  return `Umur kamu ${umur} tahun`;
  console.log("Ini tidak pernah dijalankan"); // DEAD CODE
}

Prinsip: Satu Fungsi = Satu Tugas

Fungsi yang baik melakukan satu hal saja. Namanya harus menjelaskan apa yang dilakukan:

javascript
// BAGUS — jelas, satu tugas
function hitungPajak(harga, persenPajak) {
  return (harga * persenPajak) / 100;
}

function tampilkanStruk(items, total) {
  console.log("=== STRUK BELANJA ===");
  items.forEach((item) => console.log(item));
  console.log(`Total: Rp ${total}`);
}

// KURANG BAGUS — terlalu banyak tugas
function prosesTransaksi(items) {
  // hitung total
  // hitung pajak
  // hitung diskon
  // tampilkan struk
  // simpan ke database
  // kirim email
  // ... terlalu banyak!
}

Kenapa satu tugas?

  • Lebih mudah dibaca dan dipahami
  • Lebih mudah di-debug kalau ada error
  • Bisa dipakai ulang di tempat lain

Challenge 14.1

Buat fungsi-fungsi berikut:

  1. hitungLuasSegitiga(alas, tinggi) — return luas segitiga (rumus: alas x tinggi / 2)

  2. cekBilanganPrima(n) — return true jika n bilangan prima, false jika bukan

    • Bilangan prima = hanya bisa dibagi 1 dan dirinya sendiri
    • Hint: cek apakah ada angka dari 2 sampai n-1 yang bisa membagi n habis

  3. hitungFaktorial(n) — return n! (n faktorial)

    • Contoh: 5! = 5 x 4 x 3 x 2 x 1 = 120
    • Hint: pakai loop dari n ke 1, kalikan semua

15. Function Expression

Fungsi = Nilai

Di JavaScript, fungsi bukan hanya "blok kode". Fungsi adalah nilai yang bisa disimpan di variabel, dikirim sebagai argumen, dll. Ini konsep penting yang membedakan JavaScript dari banyak bahasa lain.

javascript
// Function Declaration (cara biasa)
function sapa() {
  console.log("Halo!");
}

// Function Expression (fungsi disimpan di variabel)
const sapa2 = function () {
  console.log("Halo juga!");
}; // perhatikan titik koma di akhir (karena ini assignment)

sapa(); // "Halo!"
sapa2(); // "Halo juga!"

Keduanya bisa dipanggil dengan cara yang sama. Lalu apa bedanya?

Perbedaan Penting: Hoisting

Function Declaration bisa dipanggil sebelum dideklarasikan:

javascript
sapa(); // BISA! "Halo!"

function sapa() {
  console.log("Halo!");
}

JavaScript "mengangkat" (hoist) deklarasi fungsi ke atas file sebelum eksekusi.

Function Expression TIDAK bisa:

javascript
sapa(); // ERROR! Cannot access 'sapa' before initialization

const sapa = function () {
  console.log("Halo!");
};

Karena const sapa belum diinisialisasi saat dipanggil.

Callback — Fungsi sebagai Argumen

Karena fungsi adalah nilai, kamu bisa mengirim fungsi sebagai argumen ke fungsi lain. Fungsi yang dikirim ini disebut callback:

javascript
function prosesAngka(angka, operasi) {
  return operasi(angka);
}

const kpiDua = function (n) {
  return n * 2;
};
const kuadrat = function (n) {
  return n * n;
};

console.log(prosesAngka(5, kpiDua)); // 10
console.log(prosesAngka(5, kuadrat)); // 25

Kenapa ini berguna?

Kamu bisa membuat fungsi yang fleksibel — perilakunya berubah tergantung callback yang dikirim:

javascript
function ulangi(n, aksi) {
  for (let i = 0; i < n; i++) {
    aksi(i);
  }
}

ulangi(3, function (i) {
  console.log(`Iterasi ke-${i}`);
});
// "Iterasi ke-0"
// "Iterasi ke-1"
// "Iterasi ke-2"

Challenge 15.1

Buat fungsi operasiArray(arr, fungsi) yang:

  • Menerima array angka dan sebuah fungsi
  • Menjalankan fungsi tersebut ke setiap elemen array
  • Return array baru berisi hasilnya
javascript
// Contoh penggunaan:
const angka = [1, 2, 3, 4, 5];
const kpiTiga = function (n) {
  return n * 3;
};

console.log(operasiArray(angka, kpiTiga)); // [3, 6, 9, 12, 15]

Hint: Buat array kosong, loop array input, push hasil fungsi ke array baru, return array baru.

16. Arrow Function

Syntax yang Lebih Singkat

Arrow function adalah cara menulis function expression yang lebih ringkas (diperkenalkan di ES6/2015):

javascript
// Function Expression biasa
const tambah = function (a, b) {
  return a + b;
};

// Arrow Function — sama persis hasilnya
const tambah2 = (a, b) => a + b;

Aturan Penulisan

javascript
// 1. Satu parameter — kurung boleh dihilangkan
const kpiDua = (n) => n * 2;
const kpiDua2 = (n) => n * 2; // boleh juga pakai kurung

// 2. Tanpa parameter — kurung WAJIB
const sapa = () => console.log("Halo!");

// 3. Banyak parameter — kurung WAJIB
const tambah = (a, b) => a + b;

// 4. Body satu baris — otomatis di-return (tanpa kata 'return')
const kuadrat = (n) => n * n; // otomatis return n * n

// 5. Body banyak baris — pakai {} dan HARUS tulis 'return' manual
const hitungPajak = (harga, persen) => {
  const pajak = (harga * persen) / 100;
  const total = harga + pajak;
  return total; // WAJIB tulis return kalau pakai {}
};

Jebakan umum:

javascript
// SALAH — pakai {} tapi lupa return
const kuadrat = (n) => {
  n * n;
}; // return undefined!

// BENAR
const kuadrat = (n) => n * n; // tanpa {} = auto return
const kuadrat2 = (n) => {
  return n * n;
}; // dengan {} = manual return

Kapan Pakai Arrow Function?

Cocok untuk:

  • Fungsi pendek/sederhana
  • Callback (fungsi yang dikirim sebagai argumen)
javascript
// Arrow function sangat cocok untuk callback:
const angka = [1, 2, 3, 4, 5];

const genap = angka.filter((n) => n % 2 === 0); // [2, 4]
const kpiDua = angka.map((n) => n * 2); // [2, 4, 6, 8, 10]
const total = angka.reduce((sum, n) => sum + n, 0); // 15

Belum cocok untuk (nanti dibahas):

  • Method di dalam object (masalah this)
  • Fungsi yang butuh arguments object

Challenge 16.1

Ubah semua fungsi berikut menjadi arrow function (sesingkat mungkin):

javascript
function kuadrat(n) {
  return n * n;
}

function sapaNama(nama) {
  return `Halo, ${nama}!`;
}

function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}

function isGenap(n) {
  return n % 2 === 0;
}

Ringkasan Bab 1

TopikPoin Kunci
Variabelconst default, let kalau perlu ubah, jangan pakai var
Tipe Data7 primitif + object. typeof untuk cek. Pahami truthy/falsy
Konversi|| untuk default (skip semua falsy), ?? untuk default (skip null/undefined saja)
Operator+ dengan string = gabung. Selalu pakai === bukan ==
Percabanganif/else untuk logika, ternary ? untuk pilihan singkat, switch untuk banyak case
Perulanganfor kalau tahu jumlah iterasi, while kalau tergantung kondisi. Hati-hati infinite loop
FungsiDeclaration, Expression, Arrow. Satu fungsi = satu tugas

Challenge Akhir Bab 1: Mini Project

Sistem Nilai Siswa

Buat program yang:

  1. Punya data 5 siswa (nama + nilai ujian) — hardcode di variabel
  2. Punya fungsi tentukanGrade(nilai) yang return grade (A/B/C/D/E)
  3. Punya fungsi hitungRataRata(nilaiArray) yang return rata-rata
  4. Punya fungsi cariNilaiTertinggi(nilaiArray) yang return nilai tertinggi
  5. Tampilkan:
    • Daftar semua siswa dengan grade-nya
    • Rata-rata kelas
    • Siswa dengan nilai tertinggi

Contoh output:

=== RAPOR KELAS === 1. Budi - Nilai: 85 - Grade: B 2. Ani - Nilai: 92 - Grade: A 3. Citra - Nilai: 67 - Grade: C 4. Dedi - Nilai: 78 - Grade: B 5. Eka - Nilai: 55 - Grade: D Rata-rata kelas: 75.4 Nilai tertinggi: Ani (92)

Tips: Kamu belum belajar array & object secara mendalam, tapi coba dulu! Ini latihan eksplorasi. Array = [item1, item2, ...], akses pakai array[index], panjang pakai array.length

Bab selanjutnya: Kualitas Kode (Code Quality) — cara menulis kode yang rapi, bisa di-debug, dan mudah dipahami orang lain.

Sudah paham materi ini?

Tandai sebagai selesai untuk melacak progress-mu.