JavaScript

Belum masuk. Progresmu tidak tersimpan.

Masuk
  • Bab 2 dari 12
  • 25 menit
  • 1 latihan kode
  • 4 soal kuis

Operator dan Struktur Kontrol

Di bab ini (10 bagian)
  1. Tujuan
  2. Operator aritmatika dan penugasan
  3. Perbandingan: == vs ===
  4. Operator logika dan short-circuit
  5. Truthy dan falsy
  6. if, else if, else
  7. Ternary
  8. switch
  9. Kesalahan umum
  10. Rangkuman

Tujuan bab ini

  • Memakai operator aritmatika, penugasan, perbandingan, dan logika dengan benar.
  • Menjelaskan beda == dan === serta alasan memilih ===.
  • Menentukan nilai truthy dan falsy, lalu memanfaatkan short-circuit.
  • Menulis keputusan dengan if/else if/else, ternary, dan switch.

Operator aritmatika dan penugasan

Operator adalah simbol yang melakukan operasi pada nilai. Yang paling akrab tentu operator hitung.

OperatorArtiContohHasil
+tambah7 + 29
-kurang7 - 25
*kali7 * 214
/bagi7 / 23.5
%sisa bagi (modulo)7 % 21
**pangkat (ES2016)2 ** 38

Pembagian di JavaScript selalu menghasilkan desimal kalau tidak habis, karena hanya ada satu tipe number. Mau bilangan bulat? Pakai Math.floor(7 / 2) yang menghasilkan 3. Modulo sangat berguna untuk mengecek genap/ganjil: n % 2 === 0 artinya genap.

Operator penugasan menyingkat pola "ubah nilai lalu simpan lagi":

let skor = 10;
skor += 5;   // sama dengan skor = skor + 5 -> 15
skor *= 2;   // 30
skor -= 4;   // 26
skor++;      // 27 (tambah 1)
console.log(skor); // 27

Perbandingan: == vs ===

Operator perbandingan menghasilkan boolean: >, <, >=, <=, ==, !=, ===, !==.

Bedanya penting:

  • == (loose equality) mengubah tipe dulu kalau tipenya berbeda, baru membandingkan.
  • === (strict equality) membandingkan nilai dan tipe tanpa konversi.
console.log(5 == "5");           // true  ("5" diubah jadi 5)
console.log(5 === "5");          // false (number vs string)
console.log(0 == false);         // true
console.log(0 === false);        // false
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log("" == 0);            // true  (aneh tapi nyata)

Aturan konversi == panjang dan penuh kejutan, jadi kebiasaan yang disarankan hampir semua style guide: selalu pakai === dan !==. Kodemu jadi bisa ditebak. Satu catatan untuk object: === membandingkan referensi, jadi {} === {} bernilai false karena itu dua object berbeda di memori.

Operator logika dan short-circuit

OperatorNamaBernilai true bila
&&ANDkedua sisi truthy
||ORsalah satu sisi truthy
!NOTmembalik nilai
const usia = 18;
const punyaKTP = true;
console.log(usia >= 17 && punyaKTP); // true
console.log(usia < 13 || punyaKTP);  // true
console.log(!punyaKTP);              // false

Di JavaScript, && dan || sebenarnya mengembalikan salah satu operand, bukan selalu true/false. Mereka juga berhenti lebih awal (short-circuit):

  • a || b: kalau a truthy, langsung kembalikan a tanpa melihat b. Kalau tidak, kembalikan b.
  • a && b: kalau a falsy, langsung kembalikan a. Kalau tidak, kembalikan b.
const namaUser = "";
console.log(namaUser || "Tamu");   // "Tamu" (nilai default)

const login = true;
login && console.log("Selamat datang!"); // jalan karena login truthy

console.log(0 || null || "ada");   // "ada"
console.log(1 && "dua" && 0);      // 0

Analogi short-circuit: kamu cari kunci di saku. Begitu ketemu di saku pertama, kamu tidak perlu cek saku lain.

Truthy dan falsy

Setiap nilai di JavaScript bisa dianggap benar atau salah saat dipakai sebagai kondisi. Yang perlu dihafal cukup daftar falsy, karena sisanya truthy:

Nilai falsy
false
0, -0, 0n
"" (string kosong)
null
undefined
NaN

Semua yang lain truthy, termasuk yang sering menjebak: "0", "false", " " (spasi), [] (array kosong), dan {} (object kosong).

if ([]) console.log("array kosong itu truthy"); // tercetak
if ("0") console.log("string '0' juga truthy"); // tercetak

if, else if, else

if menjalankan blok kode hanya bila kondisinya truthy. Kondisi diperiksa dari atas ke bawah, dan begitu satu cocok, sisanya dilewati.

const nilai = 75;
if (nilai >= 80) {
  console.log("A");
} else if (nilai >= 60) {
  console.log("B");
} else {
  console.log("C");
}
// B

Urutan itu penting. Kalau nilai >= 60 ditulis paling atas, nilai 95 juga akan dapat "B" karena kondisi pertama sudah cocok. Mulailah dari kondisi yang paling ketat.

Ternary

Ternary adalah if/else versi satu baris yang menghasilkan nilai: kondisi ? nilaiJikaBenar : nilaiJikaSalah.

const umur = 16;
const status = umur >= 17 ? "boleh bikin KTP" : "belum cukup umur";
console.log(status); // belum cukup umur

Pakai ternary untuk pilihan sederhana. Kalau sudah bertingkat tiga atau lebih, kembali ke if/else supaya mudah dibaca.

switch

switch cocok saat kamu membandingkan satu nilai dengan banyak kemungkinan tetap. Perbandingannya memakai ===.

const hari = 2;
switch (hari) {
  case 1:
    console.log("Senin");
    break;
  case 2:
    console.log("Selasa");
    break;
  case 6:
  case 7:
    console.log("Akhir pekan");
    break;
  default:
    console.log("Hari lain");
}
// Selasa

break menghentikan switch. Tanpa break, eksekusi akan "jatuh" (fall-through) ke case berikutnya. Kadang itu disengaja, seperti case 6 dan case 7 yang berbagi satu blok di atas. default dijalankan kalau tidak ada case yang cocok.

Contoh if/else dan switch

Kesalahan umum

  • Memakai = di dalam kondisi. if (x = 5) memberi nilai, bukan membandingkan, dan selalu truthy. Tulis x === 5.
  • Mengandalkan ==. "" == 0 bernilai true. Pakai ===.
  • Lupa break di switch. Case berikutnya ikut jalan.
  • Menganggap array kosong falsy. [] truthy; cek panjangnya dengan arr.length === 0.
  • Memakai || untuk default angka. 0 || 10 menghasilkan 10, padahal 0 mungkin nilai sah. Operator ?? (nullish coalescing) dibahas di bab fitur modern.

Rangkuman

  • Aritmatika: + - * / % **; penugasan seperti += menyingkat perubahan nilai.
  • === membandingkan nilai dan tipe tanpa konversi, jadi pilih itu daripada ==.
  • && dan || mengembalikan salah satu operand dan berhenti lebih awal (short-circuit).
  • Falsy hanya false, 0, -0, 0n, "", null, undefined, NaN; sisanya truthy.
  • if/else if/else memeriksa dari atas, ternary untuk pilihan singkat, switch untuk banyak nilai tetap dengan break.

Selesaikan bab ini

  1. 1. Baca materi
  2. 2. Latihan kode (1)
  3. 3. Kuis (4 soal)

Latihan kode: Nilai huruf dan nama hari

Lengkapi dua fungsi berikut:

  • nilaiHuruf(skor) mengembalikan "A" untuk skor 80 ke atas, "B" untuk 70-79, "C" untuk 60-69, dan "D" di bawah 60. Pakai if/else if/else.
  • namaHari(n) mengembalikan "Senin" untuk 1, "Selasa" untuk 2, "Rabu" untuk 3, "Akhir pekan" untuk 6 atau 7, dan "Tidak dikenal" untuk nilai lain. Pakai switch.

Contoh: nilaiHuruf(75) menghasilkan "B", namaHari(7) menghasilkan "Akhir pekan".

Cek pemahaman

  1. 1Apa output kode berikut?

    console.log(5 == "5", 5 === "5");
  2. 2Manakah nilai berikut yang falsy?

  3. 3Apa output kode berikut?

    const nama = "";
    console.log(nama || "Tamu");
  4. 4Di dalam switch, case yang tidak diakhiri break akan lanjut menjalankan case berikutnya.