Mengenal Percabangan JavaScript: Jenis & Contohnya Lengkap
Irhan Hisyam Dwi Nugroho
•
28 August 2025
•
441
Percabangan JavaScript adalah konsep penting yang wajib dipahami oleh Warga Bimbingan yang sedang belajar ngoding. Dengan percabangan, program bisa mengambil keputusan berdasarkan kondisi tertentu.
Fitur ini sangat berguna ketika kita ingin program berjalan sesuai situasi yang berbeda. Contohnya, jika nilai lebih dari 75 maka tampilkan “Lulus”, jika tidak tampilkan “Remedial”.
Dalam artikel ini, kita akan membahas jenis-jenis percabangan, fungsinya, serta contoh penggunaannya secara lengkap dan mudah dipahami. Yuk, pelajari bareng-bareng sampai paham!
Apa Itu Percabangan JavaScript?
Percabangan JavaScript adalah struktur kontrol yang digunakan untuk menentukan alur program berdasarkan kondisi tertentu.
Artinya, program bisa menjalankan kode yang berbeda tergantung pada apakah suatu kondisi bernilai true atau false.
Percabangan memungkinkan program “berpikir” dan membuat keputusan seperti “jika ini terjadi, maka lakukan itu”.
Konsep ini sangat penting untuk membuat program yang interaktif, responsif, dan fleksibel.
Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat
Fungsi Percabangan JavaScript
Saat belajar JavaScript, kamu akan sering menemui kondisi di mana program harus memilih tindakan tertentu. Di sinilah percabangan berfungsi. Berikut tiga fungsi utamanya yang perlu kamu pahami:
1. Mengambil Keputusan Berdasarkan Kondisi
Fungsi utama percabangan adalah untuk menentukan alur program berdasarkan hasil dari suatu kondisi.
Misalnya, jika nilai siswa lebih dari 75, maka tampilkan “Lulus”. Tanpa percabangan, program tidak bisa menyesuaikan diri terhadap berbagai situasi yang mungkin terjadi.
2. Membuat Program Lebih Interaktif dan Dinamis
Dengan percabangan, program dapat merespons input atau keadaan tertentu secara langsung.
Misalnya, saat pengguna memilih menu tertentu, program bisa menampilkan tampilan atau hasil yang sesuai. Ini membuat aplikasi terasa lebih hidup dan sesuai dengan kebutuhan pengguna.
3. Menyederhanakan Alur Logika Program
Percabangan membantu menyusun logika program agar lebih terstruktur dan mudah dibaca. Daripada menulis kode berulang untuk setiap kemungkinan, cukup gunakan if, else, atau switch.
Hal ini membuat program lebih efisien, meminimalkan kesalahan logika, dan memudahkan proses debugging maupun pengembangan jangka panjang.
Baca juga: Ingin Belajar Front End Development? Cek Roadmapnya di sini!
Jenis-Jenis Percabangan JavaScript
Sumber: Canva
Dalam JavaScript, percabangan digunakan untuk mengatur alur program berdasarkan kondisi tertentu. Berikut adalah jenis-jenis percabangan JavaScript beserta penjelasan dan contohnya:
1. if Statement
if digunakan untuk menjalankan suatu blok kode jika kondisi bernilai true. Ini adalah bentuk percabangan paling dasar dan paling sering digunakan. Cocok untuk kondisi sederhana dengan satu kemungkinan.
let nilai = 80; if (nilai >= 75) { console.log("Lulus"); } |
Output:
Penjelasan:
Jika nilai lebih besar atau sama dengan 75, maka akan mencetak “Lulus”. Jika tidak, maka program tidak melakukan apa-apa.
2. if...else Statement
Digunakan saat kamu ingin menentukan dua kemungkinan: kondisi terpenuhi atau tidak. Jika kondisi if tidak terpenuhi, maka blok else akan dijalankan. Ideal untuk logika “ya atau tidak”.
let usia = 16; if (usia >= 18) { console.log("Dewasa"); } else { console.log("Belum dewasa"); } |
Output:
Penjelasan:
Jika usia 18 ke atas, program mencetak “Dewasa”. Jika tidak, akan mencetak “Belum dewasa”.
3. if...else if...else Statement
Digunakan saat ada lebih dari dua kondisi yang ingin dicek. Percabangan ini memberikan fleksibilitas dalam menangani banyak kemungkinan. Cocok untuk kasus seperti penilaian atau kategori.
let nilai = 85; if (nilai >= 90) { console.log("A"); } else if (nilai >= 75) { console.log("B"); } else { console.log("C"); } |
Output:
Penjelasan:
Jika nilai di atas 90, hasilnya “A”; jika 75–89, maka “B”; selain itu akan mencetak “C”. Program hanya menjalankan salah satu blok yang pertama kali true.
Baca juga: Cara Menjadi Web Developer Freelance: Panduan Pemula
4. switch Statement
switch digunakan untuk memeriksa banyak kemungkinan nilai dari satu variabel. Ini lebih rapi dibanding if...else berulang, terutama saat membandingkan satu nilai tetap. Cocok untuk pilihan seperti menu atau status.
let hari = "Senin"; switch (hari) { case "Senin": console.log("Mulai kerja"); break; case "Sabtu": console.log("Libur"); break; default: console.log("Hari biasa"); } |
Output:
Penjelasan:
Program akan mencetak sesuai nilai hari. Jika tidak cocok dengan semua case, maka blok default akan dijalankan.
5. Ternary (Conditional) Operator
Ternary operator adalah versi ringkas dari if...else. Cocok digunakan untuk kondisi sederhana dalam satu baris. Biasanya dipakai saat ingin langsung menampilkan atau menyimpan hasil berdasarkan kondisi.
let umur = 20; let status = umur >= 18 ? "Dewasa" : "Anak-anak"; console.log(status); |
Output:
Penjelasan:
Jika umur 18 atau lebih, maka status berisi “Dewasa”. Jika tidak, maka nilainya “Anak-anak”.
Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024
Kapan Menggunakan if atau switch?
Sumber: Canva
Setelah mengenal jenis-jenis percabangan, kamu mungkin bingung kapan harus pakai if atau switch. Berikut panduan singkat untuk memilih yang paling sesuai.
1. Gunakan if untuk kondisi logis yang kompleks
Jika kondisi melibatkan perbandingan, logika AND atau OR, atau ekspresi boolean yang rumit, if adalah pilihan yang tepat.
Misalnya, saat kamu ingin mengecek apakah nilai berada dalam rentang tertentu dan statusnya aktif. if lebih fleksibel untuk menangani logika yang bercabang dan bertingkat.
2. Pakai switch jika membandingkan satu nilai tetap
Switch cocok digunakan saat kamu hanya ingin memeriksa satu variabel terhadap banyak kemungkinan nilai tetap.
Misalnya, saat memproses input pilihan menu dari pengguna. Penulisan dengan switch akan lebih rapi dan mudah dibaca dibanding if...else berulang.
3. Gunakan if saat ada kondisi yang tidak selalu eksplisit
Jika kondisi yang ingin diperiksa tidak selalu berupa nilai pasti, seperti pengecekan nilai lebih besar dari angka tertentu, maka if lebih sesuai.
Switch tidak bisa menangani ekspresi seperti x > 10. Jadi, untuk kondisi yang bersifat fleksibel atau evaluatif, gunakan if.
4. Pilih switch untuk struktur pilihan yang terorganisir
Saat kamu punya banyak pilihan tetap (seperti hari, status, atau jenis kategori), switch membantu membuat kode lebih terstruktur.
Setiap case ditangani satu per satu, dan mudah ditambahkan jika diperlukan. Ini membuat program lebih mudah dibaca, terutama untuk kasus-kasus menu atau konfigurasi.
Baca juga: 10 Text Editor Terbaik untuk Web Developer (2025)
Ingin Jadi Full Stack Web Developer?
Setelah memahami jenis dan contoh percabangan JavaScript, kini saatnya kamu melangkah lebih jauh dan membangun website yang dinamis dan profesional!
Yuk, ikuti Bootcamp Full Stack Web Development di dibimbing.id! Di sini, kamu akan belajar dari dasar hingga mahir: mulai dari HTML, CSS, JavaScript, percabangan, fungsi, hingga framework seperti React.
Kamu akan dibimbing langsung oleh mentor berpengalaman dengan kurikulum praktis yang disesuaikan dengan kebutuhan industri. Kamu juga akan belajar membuat aplikasi web yang interaktif dan siap produksi dengan logika program yang efisien.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni mencapai 96%, peluang kariermu di bidang IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang disini dan mulai perjalananmu menjadi Full Stack Web Developer profesional! #BimbingSampeJadi
Referensi
- JavaScript - Conditional Statements [Buka]
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
