Dalam kehidupan sehari-hari terkadang kita sering dihadapkan pada kondisi dimana kita harus memilih suatu tindakan atau bahkan pilihan yang rumit (bercabang). Begitu juga dalam membuat program, kita akan sedikit banyak berurusan dengan pilihan dalam pemograman.
Pernyataan Percabangan/Decision biasa juga disebut dengan Pilihan atau Penyeleksian, berfungsi untuk memecahkan persoalan dan mengambil satu keputusan sesuai kondisi yang sedang dialami program. Pernyataan tunggal atau pernyataan majemuk akan dieksekusi jika kondisi kebutuhan tersebut terpenuhi.
Alur pembacaan program akan mengalir dari atas ke bawah, akan dieksekusi oleh CPU satu demi satu. Ketika CPU menemukan pernyataan penyeleksian, sebelum CPU memilih dan mengekseskusi pilihan yang ada, program akan memeriksa kondisi dari program saat itu juga. Jika salah satu kondisi dari pilihan pernyataan penyeleksian sesuai dengan kondisi program maka pilihan tersebutlah yang akan diekseskusi.
Untuk ekspresi dari kondisi (hasil) merupakan bilangan Boolean atau berupa sebuah ekspresi yang menghasilkan bilangan Boolean, 1 (true) atau 0 (false), jika kondisi penyeleksian bernilai true maka akan menjalankan pilihan yang ada dan jika semua pilihan bernilai 0 (false) maka akan diabaikan atau memilih pilihan cadangan (else). Selain percabangan, struktur ini juga disebut: control flow, decision, struktur kondisi, Struktur if dan sebagainya.
Pada pemrograman Javascript, terdapat 6 bentuk percabangan yang harus kita kitahui.
1. Percabangan if
Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar. Coba perhatikan flowchart berikut ini :
Flowchart tersebut dapat kita baca seperti ini :
Jika total belanja lebih besar dari Rp 100.000, maka akan menampilkan pesan “Selamat, Anda dapat hadiah!”. Tetapi jika Rp 100.000 atau dibawahnya tidak akan ada pesan apapun yang ditampilkan.
Sekarang 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 :
Perhatikan bagian ini :
if(totalBelanja > 100000)
{
document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
Sintak tersebut merupakan blok percabangan. 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>");
Tetapi, sebaiknya walaupun hanya 1 statement biasakan memakai tanda kurung kurawal tersebut.
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 tersebut dapat kita baca seperti ini :
Jika password benar, maka akan menampilkan pesan “Selamat datang!”. Tetapi jika salah, maka akan menampilkan pesan “Password salah, coba lagi!”.
Untuk lebih jelasnya, mari kita coba dalam program :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var katakunci = prompt("Password:");
if(katakunci == "admin")
{
document.write("<h2>Selamat datang !</h2>");
}
else
{
document.write("<p>Password salah, silahkan coba lagi!</p>");
}
</script>
</body>
</html>
Hasilnya :
3. Percabangan if-else/if
Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok pilihan.
Coba perhatikan flowchart berikut :
Perhatikan blok yang diberi warna biru 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 = "C";
else if(nilai >= 60) grade = "D";
else if(nilai >= 50) grade = "E";
else grade = "F";
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
</body>
</html>
Hasilnya :
Pada program di atas, kita tidak menggunakan kurung kurawal untuk membuat blok kode untuk if/else/if, karena hanya terdapat satu baris pernyataan/statement saja, yaitu grade = ….
Bila kita menggunakan kurung kurawal, maka program di atas akan menjadi seperti ini :
<!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 = "C";
}
else if(nilai >= 60)
{
grade = "D";
}
else if(nilai >= 50)
{
grade = "E";
}
else
{
grade = "F";
}
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
</body>
</html>
4. Percabangan switch/case
Pernyataan swich adalah pernyataan yang di gunakan untuk menjalankan salah satu pernyataan dari beberapa kemungkinan pernyataan, berdasarkan nilai dari sebuah ungkapan dan nilai penyeleksian. Pernyataan if…else if dapat dibangun dengan pernyataan switch.
Pada umumnya penyataan switch tidak jauh berbeda seperti pernyataan penyeleksian IF, yang berbeda adalah switch dikhususkan untuk penyeleksian berdasarkan nilai dari ekspresi. Jika if mengevaluasi kebenaran dari sebuah ekspresi seperti operasi logika, relasi dan perbandingan yang menghasilkan bilangan boolean 1 (benar) atau 0 (salah).
Dalam pernyataan switch, penyeleksian dilakukan dengan memeriksa kondisi (lebih tepatnya nilai) dari suatu variabel bertipe integer, char atau enum dan menemukan kesamaan data yang dicari oleh salah satu label case yang ada.
Strukturnya seperti ini :
switch(variabel)
{
case <value>:
// blok kode
break;
case <value>:
// blok kode
break;
default:
// blok kode
}
Kita dapat membuat 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("Silahkan pilih hadiah dengan memasukan angka 1 sampai 5");
var hadiah = "";
switch(jawab)
{
case "1":
hadiah = "Sepeda Motor";
break;
case "2":
hadiah = "Mobil";
break;
case "3":
hadiah = "TV LED 42 inch";
break;
case "4":
hadiah = "HP Samsul";
break;
case "5":
hadiah = "Uang Tunai Rp.500.000";
break;
default:
document.write("<p>Maaf anda salah pilih kode</p>");
}
if(hadiah === "")
{
document.write("<p>Anda gagal mendapat hadiah</p>");
}
else
{
document.write("<h2>Selamat anda mendapatkan " + hadiah + "</h2>");
}
</script>
</body>
</html>
Hasilnya :
Percabangan switch case juga dapat dibuat seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan switch case</title>
</head>
<body>
<script>
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 = "C";
break;
case nilai >= 60:
grade = "D";
break;
case nilai >= 50:
grade = "E";
break;
default:
grade = "F";
}
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
</body>
</html>
Pertama-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 dikatakan bentuk singkatnya dari if-else.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var jwb = prompt("Apakah kode plat nomor kendaraan Yogyakarta?");
var jawaban = (jwb.toUpperCase() == "AB") ? "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 :
Sintak opertor ternary yang berperan sebagai percabangan if-else berada pada baris :
var jawaban = (jwb.toUpperCase() == "AB") ? "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 Bersarang</title>
</head>
<body>
<script>
var pengguna = prompt("Username:");
var katakunci = prompt("Password:");
if(pengguna == "admin@gmail.com")
{
if(katakunci == "12345678")
{
document.write("<h2>Selamat datang </h2>");
}
else
{
document.write("<p>Password salah, coba lagi!</p>");
}
}
else
{
document.write("<p>Anda tidak terdaftar!</p>");
}
</script>
</body>
</html>
Hasilnya :
Percabangan bersarang sebenarnya bisa kita buat lebih sederhana lagi dengan menggunakan operator logika, misal dengan menggunakan operator AND (&&).
Contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Bersarang</title>
</head>
<body>
<script>
var pengguna = prompt("Username:");
var katakunci = prompt("Password:");
if(pengguna == "admin@gmail.com" && katakunci == "12345678")
{
document.write("<h2>Selamat datang</h2>");
}
else
{
document.write("<p>Password salah, coba lagi!</p>");
}
</script>
</body>
</html>
Namun ini bukanlah solusi terbaik, karena kita tidak bisa mengecek apakah user teradaftar atau tidak.
Blok percabangan merupakan blok kode yang harus kita pahami, karena kita akan banyak menggunakannya dalam membuat program.
Demikian tutorial tentang percabangan (decision) pada JavaScript, semoga bermanfaat. Selanjutnya kita akan mempelajari perulangan (looping pada JavaScript.