Tutorial Javascript Tahap 7 - Bentuk Percabangan

Tutorial Javascript Tahap 7 - Bentuk Percabangan

 

Pendahuluan

Percabangan atau conditional statements merupakan fondasi utama yang memberikan kecerdasan pada sebuah program dalam bahasa pemrograman Javascript. Dengan pemahaman mendalam terhadap konsep ini, pengembang dapat membuat aplikasi yang responsif dan adaptif, mampu mengambil keputusan berdasarkan berbagai kondisi. Pada tahap belajar Javascript ini, kita akan menjelajahi enam bentuk percabangan yang menjadi pilar utama dalam pengembangan perangkat lunak menggunakan bahasa pemrograman yang powerful ini. Mulai dari pernyataan `if` yang sederhana hingga penggunaan operator ternary yang elegan, artikel ini akan memberikan wawasan mendalam tentang bagaimana memanfaatkan percabangan untuk meningkatkan logika dan kontrol alur program. Segera temukan dan pahami setiap bentuk percabangan, karena hal ini akan membuka pintu ke pemahaman yang lebih luas tentang kekuatan Javascript dalam mengatasi tantangan pemrograman.

 

Percabangan IF

Percabangan if adalah salah satu konsep penting dalam pemrograman yang memungkinkan pengeksekusian suatu blok kode tergantung pada kebenaran atau kebenaran dari suatu kondisi. Mari kita lanjutkan dengan membahas lebih detail konsep ini.

 

Dalam pemrograman, percabangan if sering digambarkan dalam bentuk flowchart untuk memvisualisasikan alur logika. Misalnya, jika kita memiliki suatu kondisi, seperti "Jika total belanja lebih besar dari Rp 100.000," kita dapat menggunakan blok percabangan if untuk menentukan tindakan yang sesuai.

```python
total_belanja = float(input("Total belanja? "))



if total_belanja > 100000:
    print("Selamat Anda dapat hadiah")



print("Terimakasih sudah berbelanja di toko kami")
```

 

Dalam contoh di atas, kita menggunakan bahasa pemrograman Python. Pengguna diminta untuk memasukkan total belanja, dan kemudian dilakukan pengecekan dengan percabangan if. Jika total belanja melebihi Rp 100.000, pesan "Selamat Anda dapat hadiah" akan ditampilkan. Meskipun demikian, pesan terima kasih akan selalu muncul, karena terletak di luar blok percabangan.

 

Penting untuk memahami bahwa percabangan if memungkinkan kita mengendalikan alur eksekusi program berdasarkan kondisi tertentu. Dengan konsep ini, kita dapat membuat program yang lebih dinamis dan responsif terhadap situasi yang mungkin berubah. Percabangan if juga dapat dikombinasikan dengan else untuk menangani kondisi yang salah atau tidak memenuhi syarat.

 

Percabangan If/else

 

Percabangan `if/else` dalam Javascript membuka pintu kepada kompleksitas keputusan yang lebih rinci dalam pengendalian alur program. Dibandingkan dengan percabangan `if`, percabangan `if/else` memberikan dua pilihan yang masing-masing dijalankan tergantung pada apakah kondisi yang diuji bernilai benar atau salah.

 

Mari kita perluas pemahaman kita dengan melihat contoh konkrit. Misalkan kita memiliki suatu program yang memeriksa usia pengguna untuk menentukan apakah mereka memenuhi syarat untuk mendapatkan diskon. Flowchartnya dapat dijelaskan sebagai berikut:

 

Flowchart percabangan if/else:

```
Jika usia >= 18,
  Maka berikan diskon 10%.
Jika usia < 18,
  Maka berikan diskon 5%.
```

 

Dalam skrip Javascript yang terkait, kita dapat menggunakan struktur `if/else` untuk menerapkan logika ini dengan cara yang lebih terstruktur dan ekspresif.

 

```javascript
var usia = prompt("Berapa usia Anda?", 0);



if (usia >= 18) {
  document.write("<h2>Selamat, Anda mendapatkan diskon 10%!</h2>");
} else {
  document.write("<h2>Anda mendapatkan diskon 5% karena usia di bawah 18 tahun.</h2>");
}



document.write("<p>Terima kasih telah berbelanja di toko kami.</p>");
```

 

Dalam contoh di atas, jika usia pengguna lebih besar atau sama dengan 18, pesan "Selamat, Anda mendapatkan diskon 10%!" akan muncul. Namun, jika usia kurang dari 18, pesan "Anda mendapatkan diskon 5% karena usia di bawah 18 tahun." akan ditampilkan. Dengan adanya percabangan `if/else`, kita dapat membuat keputusan yang lebih kompleks dan memberikan respons yang sesuai dengan berbagai kondisi.

 

Pentingnya percabangan `if/else` terletak pada kemampuannya untuk menangani variasi keputusan dalam program, memperkaya logika program, dan memberikan solusi yang lebih dinamis dalam menghadapi situasi yang beragam. Pada tahap selanjutnya, kita akan melangkah lebih jauh untuk menjelajahi bentuk-bentuk percabangan lainnya dan memperdalam pemahaman kita tentang konsep pengendalian alur program dalam Javascript.

 

Percabangan if/else/

 

Percabangan `if/else/if` dalam Javascript memberikan kemampuan untuk menangani skenario yang lebih kompleks dengan lebih dari dua kondisi atau blok pilihan. Dalam struktur ini, kita dapat mengevaluasi serangkaian kondisi secara berurutan hingga salah satu di antaranya terpenuhi, dan blok kode yang sesuai akan dieksekusi.

 

Sebagai contoh, bayangkan kita memiliki program yang menentukan level diskon berdasarkan total belanja. Flowchartnya dapat dijelaskan sebagai berikut:

 

Flowchart percabangan if/else/if:

```
Jika total belanja >= Rp 200.000,
  Maka berikan diskon 15%.
Jika total belanja >= Rp 100.000,
  Maka berikan diskon 10%.
Jika total belanja >= Rp 50.000,
  Maka berikan diskon 5%.
Jika total belanja < Rp 50.000,
  Tidak ada diskon.
```

 

Dengan menggunakan percabangan `if/else/if`, kita dapat mengimplementasikan logika ini dalam skrip Javascript dengan cara yang jelas dan terstruktur.

 

```javascript
var totalBelanja = prompt("Total belanja?", 0);



if (totalBelanja >= 200000) {
  document.write("<h2>Selamat, Anda mendapatkan diskon 15%!</h2>");
} else if (totalBelanja >= 100000) {
  document.write("<h2>Anda mendapatkan diskon 10%.</h2>");
} else if (totalBelanja >= 50000) {
  document.write("<h2>Anda mendapatkan diskon 5%.</h2>");
} else {
  document.write("<h2>Maaf, tidak ada diskon untuk total belanja ini.</h2>");
}



document.write("<p>Terima kasih telah berbelanja di toko kami.</p>");
```

 

Dalam contoh di atas, program akan mengevaluasi total belanja secara berurutan dan memberikan diskon sesuai dengan kondisi yang pertama kali terpenuhi. Percabangan `if/else/if` membantu kita membuat keputusan yang lebih terinci dan memberikan respons yang lebih sesuai dengan variasi kondisi yang mungkin terjadi dalam program Javascript. Melalui pemahaman mendalam terhadap struktur ini, kita dapat meningkatkan fleksibilitas dan kecerdasan program yang kita kembangkan. Pada tahap selanjutnya, kita akan terus menjelajahi konsep-konsep percabangan lainnya untuk memperdalam kemampuan pemrograman Javascript kita.

 

Percabangan Switch/case

 

Percabangan `switch/case` dalam Javascript memberikan alternatif yang bersih dan terstruktur untuk menangani serangkaian nilai yang mungkin dihasilkan oleh suatu variabel. Berbeda dengan percabangan `if/else/if`, struktur `switch/case` dapat lebih efisien ketika kita harus membandingkan variabel dengan beberapa nilai yang berbeda.

 

Mari kita perluas pemahaman kita dengan melihat contoh konkret. Misalkan kita memiliki program yang menentukan tindakan berdasarkan hari dalam seminggu:

 

```javascript
var hari = prompt("Masukkan hari dalam seminggu:", "Senin");



switch (hari) {
  case "Senin":
    document.write("<p>Ini hari pertama, semangat!</p>");
    break;
  case "Selasa":
  case "Rabu":
  case "Kamis":
    document.write("<p>Ini hari kerja, tetap semangat!</p>");
    break;
  case "Jumat":
    document.write("<p>Sebentar lagi akhir pekan!</p>");
    break;
  case "Sabtu":
  case "Minggu":
    document.write("<p>Ini akhir pekan, nikmati waktu luang Anda!</p>");
    break;
  default:
    document.write("<p>Hari tidak valid, harap masukkan hari yang benar.</p>");
}
```

 

Dalam contoh di atas, `switch` mengevaluasi variabel `hari` dan membandingkannya dengan setiap `case`. Jika sebuah `case` cocok, blok kode yang sesuai akan dieksekusi. Pemberian `break` setelah setiap blok `case` berfungsi untuk menghentikan pengecekan lebih lanjut. Jika tidak ada `case` yang cocok, `default` akan dieksekusi.

 

Percabangan `switch/case` memberikan struktur yang jelas dan efisien dalam menangani banyak kemungkinan nilai, membuat kode lebih terbaca. Pemahaman yang baik tentang percabangan ini akan memperkaya kemampuan pemrograman Javascript kita, terutama dalam situasi di mana kita perlu membandingkan satu variabel dengan beberapa nilai yang mungkin.

 

Percabangan operator tenary

 

Percabangan menggunakan operator ternary dalam Javascript memungkinkan kita menulis pernyataan kondisional dengan sintaksis yang lebih ringkas. Dalam contoh yang diberikan, kita menggunakan operator ternary untuk menentukan jawaban tergantung pada input pengguna terhadap pertanyaan apakah Jakarta ibu kota Indonesia.

 

Operator ternary dirancang untuk menyederhanakan struktur percabangan, dan dalam kasus ini, kita mendapatkan jawaban dalam satu baris kode.

 

```javascript
var jwb = prompt("Apakah Jakarta ibu kota Indonesia?");
var jawaban = (jwb.toUpperCase() === "IYA") ? "Benar" : "Salah";
document.write(`Jawaban Anda: <b>${jawaban}</b>`);
```

 

Pentingnya metode `toUpperCase()` terlihat di sini, di mana kita memastikan bahwa perbandingan string tidak bersifat case-sensitive. Metode ini memastikan bahwa, apakah pengguna memasukkan "iya" atau "IYA", jawaban akan dievaluasi dengan benar.

 

Percabangan dengan operator ternary cocok untuk situasi di mana kita memiliki pilihan sederhana dan ingin menyusun kode dengan cara yang lebih singkat dan ekspresif. Dengan memahami cara menggunakan operator ternary, kita dapat meningkatkan efisiensi penulisan kode dalam beberapa kasus tertentu.

 

Percabangan Nested

 

Percabangan bersarang atau nested if dalam Javascript memungkinkan kita untuk membuat blok percabangan di dalam blok percabangan lainnya. Ini sangat berguna ketika kita perlu mengevaluasi kondisi yang lebih rinci atau kompleks.

 

Dalam contoh yang diberikan, kita menggunakan nested if untuk memeriksa kombinasi username dan password. Jika username adalah "divisidev", maka program akan memeriksa password. Jika passwordnya adalah "koding", pesan selamat datang akan ditampilkan; jika tidak, pesan "Password salah, coba lagi!" akan muncul. Jika username bukan "divisidev", pesan "Anda tidak terdaftar!" akan ditampilkan.

 

```javascript
var username = prompt("Username:");
var password = prompt("Password:");



if (username == "petanikode") {
    if (password == "kopi") {
        document.write("<h2>Selamat datang pak bos!</h2>");
    } else {
        document.write("<p>Password salah, coba lagi!</p>");
    }
} else {
    document.write("<p>Anda tidak terdaftar!</p>");
}
```

 

Percabangan bersarang sangat bermanfaat dalam menghadapi skenario yang memerlukan pengecekan kondisi yang lebih rumit. Namun, perlu diingat bahwa terlalu banyak nested if dapat membuat kode menjadi sulit dipahami. Oleh karena itu, perlu pertimbangan hati-hati dalam penggunaannya agar tetap menjaga kejelasan dan kebersihan kode.

 

Published on February 12, 2024
Last updated on June 03, 2026