author Ahmad Muhardian

Belajar Javascript #7: Memahami 6 Bentuk Percabangan pada Javascript


Javascript Percabangan

Mungkin kalian akan bertanya:

Apa itu percabangan dan kenapa dinamakan percabangan?

Buat yang belum pernah kuliah atau belajar tentang algoritme dan flowchart, mungkin ini istilah yang baru pertama kamu dengar.

Isitilah ini sebenarnya untuk menggambarkan alur program yang bercabang.

Pada flow chart, logika “jika…maka” digambarkan dalam bentuk cabang.

Logika program jika/maka

Karena itu, ini disebut percabangan.

Selain percabangan, struktur ini juga disebut: control flow, decision, struktur kondisi, Struktur if, dsb.

Percabangan akan mampu membuat program berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan.

Pada pemrograman Javascript, terdapat 6 bentuk percabangan yang harus kita kitahui.

Apa saja itu?

Mari kita bahas…

1. Percabangan if

Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar.

Coba perhatikan flowchart berikut ini:

Flowchart percabangan if

Flowchart tersebut dapat kita baca seperti ini:

“Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan Selamat, Anda dapat hadiah

Kalau dibawah Rp 100.000 bagaimana?

Ya pesannya tidak ditampilkan.

Mari kita coba dalam program Javascript:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if</title>
</head>
<body>
    <script>
        var totalBelanja = prompt("Total belanja?", 0);

        if(totalBelanja > 100000){
            document.write("<h2>Selamat Anda dapat hadiah</h2>");
        }

        document.write("<p>Terimakasih sudah berbelanja di toko kami</p>");
    </script>
</body>
</html>

Hasilnya:

Contoh program percabangan if di javascript

Perhatikan bagian ini:

if(totalBelanja > 100000){
    document.write("<h2>Selamat Anda dapat hadiah</h2>");
}

Ini yang disebut blok.

Blok program pada Javascript, diawali dengan tanda buka kurung kurawal { dan diakhiri dengan tutup kurung kurawal }.

Apabila di dalam blok hanya terdapat satu baris ekspresi atau statement, maka boleh tidak ditulis tanda kurungnya.

if(totalBelanja > 100000)
    document.write("<h2>Selamat Anda dapat hadiah</h2>");

2. Percabangan if/else

Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan.

Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).

Coba perhatikan flowchart ini:

Flowchart percabangan if/else

Ini adalah flowchart untuk mengecek password.

Apabila password benar, pesan yang ada pada blok hijau akan ditampilkan: “Selamat datang bos!”

Tapi kalau salah, maka pesan yang ada di blok merah yang akan ditampilkan: “Password salah, coba lagi!”

Kemudian, pesan yang berada di blok abu-abu akan tetap ditampilkan, karena dia bukan bagian dari blok percabangan if/else.

Perhatikan arah panahnya, setiap blok if/else mengarah ke sana…

Flowchart percabangan if/else

Untuk lebih jelasnya, mari kita coba dalam program:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else</title>
</head>
<body>
    <script>
        var password = prompt("Password:");

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

        document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");

    </script>
</body>
</html>

Hasilnya:

Contoh program percabangan if/else di javascript

3. Percabangan if/else/if

Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok pilihan.

Coba perhatikan flowchart berikut:

Flowchart percabangan if/else/if

Perhatikan blok yang saya beri warna…

Ini adalah blok untuk percabangan if/else/if. Kita bisa menambahkan berapapun blok yang kita inginkan.

Contoh Program:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else/if</title>
</head>
<body>
    <script>
        var nilai = prompt("Inputkan nilai akhir:");
        var grade = "";

        if(nilai >= 90) grade = "A"
        else if(nilai >= 80) grade = "B+"
        else if(nilai >= 70) grade = "B"
        else if(nilai >= 60) grade = "C+"
        else if(nilai >= 50) grade = "C"
        else if(nilai >= 40) grade = "D"
        else if(nilai >= 30) grade = "E"
        else grade = "F";

        document.write(`<p>Grade anda: ${grade}</p>`);
    </script>
</body>
</html>

Hasilnya:

Contoh program percabangan if/else/if di javascript

Pada program di atas, kita tidak menggunaka kurung kurawal untuk membuat blok kode untuk if/else/if.

karena hanya terdapat satu baris perintah saja. Yaitu: grade = ....

Bila kita menggunakan kurung kurawal, maka program di atas akan menjadi seperti ini:

<script>
    var nilai = prompt("Inputkan nilai akhir:");
    var grade = "";

    if (nilai >= 90){
        grade = "A"
    } else if(nilai >= 80) {
        grade = "B+"
    } else if(nilai >= 70) {
        grade = "B"
    } else if(nilai >= 60) {
        grade = "C+"
    } else if(nilai >= 50) {
        grade = "C"
    } else if(nilai >= 40) {
        grade = "D"
    } else if(nilai >= 30) {
         grade = "E"
    } else { 
        grade = "F";
    }
    document.write(`<p>Grade anda: ${grade}</p>`);
</script>

4. Percabangan switch/case

Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.

Strukturnya seperti ini:

switch(variabel){
    case <value>:
        // blok kode
        break;
    case <value>:
        // blok kode
        break;
    default:
        // blok kode
}

Kita dapat mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.

Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan dengan varabel.

Setiap case harus diakhiri dengan break. Khusus untuk default, tidak perlu diakhiri dengan break karena dia terletak di bagian akhir.

Pemberian break bertujuan agar program berhenti mengecek case berikutnya saat sebuah case terpenuhi.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan switch/case</title>
</head>
<body>
    <script>

        var jawab = prompt("Kamu beruntung! Silahkan pilih hadiahmu dengan memasukan angka 1 sampai 5");
        var hadiah = "";
        
        switch(jawab){
            case "1":
                hadiah = "Tisu";
                break;
            case "2":
                hadiah = "1 Kotak Kopi";
                break;
            case "3":
                hadiah = "Sticker";
                break;
            case "4":
                hadiah = "Minyak Goreng";
                break;
            case "5":
                hadiah = "Uang Rp 50.000";
                break;
            default:
                document.write("<p>Opps! anda salah pilih</p>");
        }

        if(hadiah === ""){
            document.write("<p>Kamu gagal mendapat hadiah</p>");
        } else {
            document.write("<h2>Selamat kamu mendapatkan " + hadiah + "</h2>");
        }
    </script>
</body>
</html>

Hasilnya:

Contoh program percabangan switch/case di javascript

Percabangan switch/case juga dapat dibuat seperti ini:

var nilai = prompt("input nilai");
var grade = "";

switch(true){
    case nilai < 90:
        grade = "A";
        break;
    case nilai < 80:
        grade = "B+";
        break;
    case nilai < 70:
        grade = "B";
        break;
    case nilai < 60:
        grade = "C+";
        break;
    case nilai < 50:
        grade = "C";
        break;
    case nilai < 40:
        grade = "D";
        break;
    case nilai < 30:
        grade = "E";
        break;
    default:
        grade = "F";
}

Pertam-tama, kita berikan nilai true pada switch, ini agar kita bisa masuk ke dalam blok switch.

Lalu di dalam blok switch, kita buat kondisi dengan menggunakan case.

Hasilnya akan sama seperti pada contoh percabangan if/else/if.

5. Percabangan dengan Operator Ternary

Percabangan menggunakan opreator ternary merupakan bentuk lain dari percabangan if/else.

Bisa dibilang:

Bentuk singkatnya dari if/else.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan Ternary</title>
</head>
<body>
    <script>
        var jwb = prompt("Apakah Jakarta ibu kota indonesia?");

        var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";

        document.write(`Jawaban anda: <b>${jawaban}</b>`);
    </script>
</body>
</html>

Fungsi dari method toUpperCase() untuk mengubah teks yang diinputkan menjadi huruf kapital semua.

Hasilnya:

Contoh program percabangan dengan operator ternary di javascript

Opertor ternary berperan sebagai percabangan if/else:

var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";

Apabila kondisi yang ada di dalam kurung—(jwb.toUpperCase() == "IYA")—bernilai true, maka nanti isi dari variabel jawaban akan sama dengan "Benar".

Tapi kalau bernilai false, maka variabel jawaban akan berisi "Salah".

6. Percabangan Bersarang (Nested)

Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut percabangan bersarng atau nested if.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan Ternary</title>
</head>
<body>
    <script>
        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>");
        }
    </script>
</body>
</html>

Hasilnya:

Contoh program percabangan bersarang di javascript

Bonus: Menggunakan Operator Logika pada Percabangan

Percabangan bersarang, sebanarnya bisa kita buat lebih sederhana lagi dengan menggunakan operator logika.

Contohnya:

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>");
}

Ini dapat kita buat lebih sederhana lagi dengan operator logika AND (&&).

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

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

Namun, ini bukanlah solusi terbaik.

Karena kita tidak bisa mengecek, apakah user teradaftar atau tidak.

Apa Selanjutnya?

Blok percabangan merupakan blok kode yang harus kita pahami.

Karena kita akan banyak menggunakannya dalam membuat program.

Keenam bentuk percabangan di atas, merupakan bentuk-bentuk dasar.

Silahkan latihan leih banyak lagi, dengan kasus yang lain.

Selanjutnya, pelajari tentang:

Selamat belajar….