Belajar Percabangan JavaScript: if, else, dan switch

1. Apa Itu Percabangan?#

Percabangan merupakan bagian dari alur kontrol program (control flow).

Tanpa percabangan, program biasanya menjalankan instruksi secara berurutan.

Contohnya:

1
console.log("Membuka website");
2
console.log("Menampilkan artikel");
3
console.log("Selesai");

Ketiga instruksi tersebut dijalankan berurutan.

Namun, bagaimana jika kita hanya ingin menampilkan artikel ketika statusnya sudah terbit?

Di sinilah percabangan digunakan.

Secara sederhana, alurnya seperti ini:

1
Periksa status artikel
2
        |
3
        v
4
  Apakah sudah terbit?
5
     /         \
6
   Ya          Tidak
7
   |             |
8
   v             v
9
Tampilkan     Jangan tampilkan
10
artikel       artikel

Program memeriksa sebuah kondisi, kemudian menentukan instruksi mana yang perlu dijalankan.

2. Operator Perbandingan#

Sebelum menggunakan percabangan, kita perlu memahami cara membandingkan nilai.

JavaScript menyediakan beberapa operator perbandingan.

Hasil perbandingan biasanya berupa boolean: true atau false.

Contohnya:

1
const jumlahArtikel = 10;
2

3
console.log(jumlahArtikel > 5);
4
console.log(jumlahArtikel < 5);
5
console.log(jumlahArtikel === 10);

Hasilnya:

1
true
2
false
3
true

1
console.log(10 == "10");
2
console.log(10 === "10");

1
true
2
false

3. Percabangan Menggunakan if#

Bentuk percabangan paling sederhana adalah if.

Strukturnya:

1
if (kondisi) {
2
  // Instruksi ketika kondisi bernilai truthy
3
}

Contohnya:

1
const sudahTerbit = true;
2

3
if (sudahTerbit) {
4
  console.log("Artikel bisa dibaca pengunjung.");
5
}

Hasilnya:

1
Artikel bisa dibaca pengunjung.

Karena sudahTerbit bernilai true, kode di dalam blok if dijalankan.

Sekarang ubah menjadi:

1
const sudahTerbit = false;
2

3
if (sudahTerbit) {
4
  console.log("Artikel bisa dibaca pengunjung.");
5
}

Tidak ada pesan yang ditampilkan.

Kenapa?

Karena kondisinya bernilai false.

1
const jumlahArtikel = 8;
2

3
if (jumlahArtikel > 5) {
4
  console.log("Artikel sudah lebih dari lima.");
5
}

1
Artikel sudah lebih dari lima.

4. Menggunakan if dan else#

Bagaimana kalau kita ingin menjalankan instruksi lain ketika kondisi tidak terpenuhi?

Gunakan else.

Strukturnya:

1
if (kondisi) {
2
  // Ketika kondisi truthy
3
} else {
4
  // Ketika kondisi falsy
5
}

Contohnya:

1
const sudahLogin = false;
2

3
if (sudahLogin) {
4
  console.log("Selamat datang kembali!");
5
} else {
6
  console.log("Silakan login terlebih dahulu.");
7
}

Hasilnya:

1
Silakan login terlebih dahulu.

Karena sudahLogin bernilai false, program menjalankan blok else.

Sekarang coba ubah nilainya menjadi true.

Hasilnya akan berubah menjadi:

1
Selamat datang kembali!

Dengan if/else, program bisa memilih satu dari dua jalur.

5. Menggunakan else if untuk Banyak Kondisi#

Tidak semua keputusan hanya memiliki dua kemungkinan.

Misalnya, kita ingin menentukan kategori nilai berdasarkan skor.

Aturannya:

• Nilai 90 ke atas: Sangat Baik.
• Nilai 75 sampai 89: Baik.
• Nilai 60 sampai 74: Cukup.
• Nilai di bawah 60: Perlu Belajar Lagi.

Kita bisa menggunakan else if.

1
const nilai = 82;
2

3
if (nilai >= 90) {
4
  console.log("Sangat Baik");
5
} else if (nilai >= 75) {
6
  console.log("Baik");
7
} else if (nilai >= 60) {
8
  console.log("Cukup");
9
} else {
10
  console.log("Perlu Belajar Lagi");
11
}

Hasilnya:

1
Baik

JavaScript memeriksa kondisi dari atas ke bawah.

Ketika menemukan kondisi pertama yang bernilai true, blok tersebut dijalankan dan bagian else if atau else berikutnya dilewati.

Karena itu, urutan kondisi sangat penting.

1
const nilai = 95;
2

3
if (nilai >= 60) {
4
  console.log("Cukup");
5
} else if (nilai >= 90) {
6
  console.log("Sangat Baik");
7
}

1
Cukup

6. Operator Logika: &&, ||, dan !#

Kadang kita perlu memeriksa lebih dari satu kondisi sekaligus.

JavaScript menyediakan operator logika.

1
const sudahTerbit = true;
2
const disembunyikan = false;
3

4
if (sudahTerbit && !disembunyikan) {
5
  console.log("Artikel ditampilkan.");
6
}

1
Artikel ditampilkan.

1
const peran = "editor";
2

3
if (peran === "admin" || peran === "editor") {
4
  console.log("Akses diberikan.");
5
}

1
Akses diberikan.

1
const sudahLogin = false;
2

3
if (!sudahLogin) {
4
  console.log("Pengguna belum login.");
5
}

1
Pengguna belum login.

1
const sudahLogin = false;
2

3
sudahLogin && console.log("Tampilkan dashboard");

7. Percabangan Bersarang (Nested if)#

Kita juga bisa menempatkan if di dalam if lainnya.

Contohnya:

1
const sudahLogin = true;
2
const peran = "admin";
3

4
if (sudahLogin) {
5
  console.log("Pengguna sudah login.");
6

7
  if (peran === "admin") {
8
    console.log("Menu admin ditampilkan.");
9
  }
10
}

Hasilnya:

1
Pengguna sudah login.
2
Menu admin ditampilkan.

Teknik ini disebut nested if.

Nested if berguna ketika suatu pemeriksaan hanya relevan setelah kondisi sebelumnya terpenuhi.

Namun, jika terlalu banyak percabangan bersarang, kode akan semakin sulit dibaca.

Kadang kita bisa menyederhanakannya menggunakan operator logika.

1
if (sudahLogin && peran === "admin") {
2
  console.log("Menu admin ditampilkan.");
3
}

Kedua pendekatan dapat digunakan. Pilih yang paling mudah dipahami sesuai kebutuhan.

8. Menggunakan switch#

Selain if/else, JavaScript menyediakan switch.

switch berguna ketika kita ingin memilih tindakan berdasarkan beberapa kemungkinan nilai dari satu ekspresi.

Contohnya, kita ingin menampilkan nama kategori berdasarkan kode.

1
const kodeKategori = "JS";
2

3
switch (kodeKategori) {
4
  case "HTML":
5
    console.log("Kategori HTML");
6
    break;
7

8
  case "CSS":
9
    console.log("Kategori CSS");
10
    break;
11

12
  case "JS":
13
    console.log("Kategori JavaScript");
14
    break;
15

16
  default:
17
    console.log("Kategori tidak ditemukan");
18
}

Hasilnya:

1
Kategori JavaScript

1
const kode = "A";
2

3
switch (kode) {
4
  case "A":
5
    console.log("Kategori A");
6

7
  case "B":
8
    console.log("Kategori B");
9

10
  default:
11
    console.log("Kategori lainnya");
12
}

1
Kategori A
2
Kategori B
3
Kategori lainnya

1
const hari = "Sabtu";
2

3
switch (hari) {
4
  case "Sabtu":
5
  case "Minggu":
6
    console.log("Akhir pekan");
7
    break;
8

9
  default:
10
    console.log("Hari kerja");
11
}

1
Akhir pekan

9. Kapan Menggunakan if/else dan switch?#

Keduanya sama-sama digunakan untuk percabangan, tetapi cocok untuk kebutuhan yang berbeda.

Gunakan if/else ketika:

• Membandingkan rentang angka.
• Menggunakan operator >, <, >=, atau <=.
• Menggabungkan beberapa kondisi logika.
• Memerlukan pemeriksaan yang tidak hanya berdasarkan satu nilai.

Gunakan switch ketika:

• Memeriksa beberapa kemungkinan nilai dari satu ekspresi.
• Setiap nilai memiliki tindakan yang berbeda.
• Banyak pemeriksaan kesetaraan membuat if/else sulit dibaca.

Contohnya, untuk menentukan kategori nilai berdasarkan rentang angka, if/else biasanya lebih sesuai.

Sedangkan untuk memilih tindakan berdasarkan kode kategori "HTML", "CSS", atau "JS", switch bisa lebih mudah dibaca.

Tidak ada aturan bahwa salah satunya selalu lebih baik.

Yang penting adalah memilih struktur yang jelas dan mudah dipelihara.

10. Mengenal Operator Ternary#

JavaScript juga memiliki operator ternary.

Operator ini berguna untuk memilih salah satu dari dua nilai berdasarkan kondisi.

Strukturnya:

1
kondisi ? nilaiJikaBenar : nilaiJikaSalah

Contohnya:

1
const sudahTerbit = true;
2

3
const status = sudahTerbit ? "Terbit" : "Draft";
4

5
console.log(status);

Hasilnya:

1
Terbit

Contoh tersebut setara dengan:

1
const sudahTerbit = true;
2
let status;
3

4
if (sudahTerbit) {
5
  status = "Terbit";
6
} else {
7
  status = "Draft";
8
}
9

10
console.log(status);

Ternary cocok untuk kondisi sederhana yang memilih satu dari dua nilai.

Namun, hindari membuat ternary bersarang terlalu panjang karena dapat mengurangi keterbacaan kode.

Jika logikanya mulai rumit, if/else sering menjadi pilihan yang lebih jelas.

11. Praktik: Menentukan Status Artikel#

Sekarang kita buat contoh yang lebih dekat dengan pengelolaan website BapakGabut.

Bayangkan sebuah artikel mempunyai data berikut:

1
const judulArtikel = "Belajar JavaScript";
2
const statusArtikel = "published";
3
const jumlahKata = 1200;

Kita ingin menentukan apakah artikel boleh ditampilkan.

Aturannya:

• Artikel dengan status "published" dapat ditampilkan.
• Artikel dengan status "draft" belum dapat ditampilkan.
• Status lain dianggap tidak dikenal.

Kita bisa menggunakan switch.

1
const judulArtikel = "Belajar JavaScript";
2
const statusArtikel = "published";
3
const jumlahKata = 1200;
4

5
console.log(`Judul: ${judulArtikel}`);
6
console.log(`Jumlah kata: ${jumlahKata}`);
7

8
switch (statusArtikel) {
9
  case "published":
10
    console.log("Status: Artikel sudah diterbitkan");
11
    console.log("Artikel boleh ditampilkan");
12
    break;
13

14
  case "draft":
15
    console.log("Status: Artikel masih draft");
16
    console.log("Artikel belum ditampilkan");
17
    break;
18

19
  default:
20
    console.log("Status artikel tidak dikenal");
21
}

Hasilnya:

1
Judul: Belajar JavaScript
2
Jumlah kata: 1200
3
Status: Artikel sudah diterbitkan
4
Artikel boleh ditampilkan

Sekarang kita tambahkan pemeriksaan jumlah kata.

Misalnya, untuk keperluan latihan, kita ingin memberikan label "Artikel panjang" jika jumlah kata minimal 1000.

1
if (jumlahKata >= 1000) {
2
  console.log("Kategori panjang: Artikel panjang");
3
} else {
4
  console.log("Kategori panjang: Artikel singkat");
5
}

Hasilnya:

1
Kategori panjang: Artikel panjang

Perlu dicatat bahwa batas 1000 kata ini hanyalah aturan contoh dalam program latihan, bukan standar kualitas artikel atau persyaratan mesin pencari.

1
const judulArtikel = "Belajar JavaScript";
2
const statusArtikel = "published";
3

4
if (statusArtikel === "published" && judulArtikel !== "") {
5
  console.log("Artikel siap dibaca.");
6
} else {
7
  console.log("Artikel belum siap dibaca.");
8
}

1
Artikel siap dibaca.

12. Kesalahan Umum Saat Membuat Percabangan#

1
let status = "draft";
2

3
if (status = "published") {
4
  console.log("Artikel terbit");
5
}

1
if (status === "published") {
2
  console.log("Artikel terbit");
3
}

1
const nilai = 95;
2

3
if (nilai >= 60) {
4
  console.log("Cukup");
5
} else if (nilai >= 90) {
6
  console.log("Sangat Baik");
7
}

1
const nama = "BapakGabut";
2

3
if (nama) {
4
  console.log("Nama tersedia");
5
}

1
if (nama !== "") {
2
  console.log("Nama tersedia");
3
}

13. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

Buat program sederhana untuk menentukan status sebuah artikel.

Gunakan data berikut:

1
const judul = "Belajar Percabangan JavaScript";
2
const status = "draft";
3
const jumlahKata = 850;
4
const kategori = "javascript";

Buat program dengan aturan:

1. Jika status "published", tampilkan pesan bahwa artikel sudah terbit.
2. Jika status "draft", tampilkan pesan bahwa artikel belum diterbitkan.
3. Jika status selain keduanya, tampilkan pesan bahwa status tidak dikenal.
4. Jika jumlah kata minimal 1000, tampilkan "Artikel panjang". Jika tidak, tampilkan "Artikel singkat".
5. Gunakan switch untuk menampilkan nama kategori berdasarkan kode "html", "css", atau "javascript".

Sebagai tantangan tambahan, buat variabel:

1
const sudahLogin = true;
2
const peran = "editor";

Tampilkan pesan "Boleh mengedit artikel" hanya jika pengguna sudah login dan memiliki peran "admin" atau "editor".

Coba juga ubah beberapa nilai variabel untuk melihat bagaimana hasil program berubah.

Ingat, aturan akses pada latihan ini hanya simulasi logika. Pada aplikasi nyata, izin mengedit tetap harus diperiksa di server, bukan hanya melalui JavaScript di browser.

14. Penutup#

Pada artikel ini, kita sudah belajar bagaimana JavaScript mengambil keputusan menggunakan percabangan.

Kita mengenal operator perbandingan, operator logika, if, else, else if, switch, dan operator ternary.

Kita juga belajar bahwa urutan kondisi, pemilihan operator, serta penggunaan break dapat memengaruhi hasil program.

Dengan percabangan, program tidak lagi sekadar menjalankan instruksi secara berurutan. Program sudah bisa menentukan tindakan berdasarkan kondisi tertentu.

Tetapi bagaimana jika kita ingin menjalankan instruksi yang sama berkali-kali?

Misalnya, menampilkan angka 1 sampai 100, atau memproses daftar artikel satu per satu.

Apakah kita harus menulis console.log() sebanyak 100 kali?

Tentu tidak.

Pada artikel berikutnya, kita akan belajar Belajar Perulangan JavaScript: for, while, dan do…while.

Sampai jumpa di artikel berikutnya, Gabuters!