Tutorial Javascript 6 - Struktur Logika

Dalam materi kali ini saya akan membahas tentang struktur logika bahasa pemrograman javascript. Pada kali ini akan membahas tentang if, if else dan switch. Konsep tentang tipe data dan operator yang telah dibahas sebelumnya sangat berguna untuk memahami struktur kontrol ini.

Struktur Logika IF

Struktur logika if digunakan untuk membuat percabangan kode program yang bergantung apakah sebuah kondisi bisa dipenuhi atau tidak. Jika kondisi dipenuhi (bernilai true), jalankan kode program.

Berikut format dasar penulisan struktur logika IF:

if (condition) {
    statement1
}

Condition adalah kondisi penentu. Condition ini biasanya berupa operasi perbandingan yang akan menghasilkan nilai true atau false. Misalnya apakah 6 > 7 ? atau apakah variabel user berisi string "admin"?

Pada dasarnya, semua kode program yang bisa menghasilkan true atau false, bisa diletakan di dalam condition. Jika condition ini dipenuhi (menghasilkan nilai true), jalankan kode program yang ada diantara kurung kurawal. Tanda kurung kurawal ini menandakan block kode program dari struktur if.

Mari kita lihat contoh prakteknya:

var hari = "senin";

if (hari === "senin"){
    console.log("saatnya kerja...");
}

Dibaris pertama, saya membuat variabel hari yang diisi string "senin". Kode program if (hari === "senin") merupakan condition yang akan di periksa, yakni apakah variabel hari berisi string "senin"? Benar (hasilnya: true), karena itu kode program console.log("saatnya kerja...") akan dieksekusi.

Mari kira coba sekali lagi:

var hari = "minggu";

if (hari === "senin"){
    console.log("saatnya kerja...");
}

Disini saya mengganti isi variabel hari dengan string "minggu". Apakah variabel hari === "senin"? Tidak, karena itu baris perintah console.log("saatnya kerja...") tidak akan dijalankan.

Tanda kurung kurawal yang menandakan awal dan akhir block if sebenarnya boleh tidak ditulis, dengan syarat kode program yang dijalankan hanya 1 baris saja. Contoh saya sebelum ini hanya terdiri 1 baris, sehingga bisa ditulis sebagai berikut:

var hari = "senin";

if (hari === "senin")
    console.log("saatnya kerja...");

Namun penulisan seperti ini sangat tidak disarankan, karena jika kita lupa aturan ini dan menambahkan baris kedua, kode tersebut tidak akan menjadi bagian dari if, tapi berada di luar if:

var hari = "selasa";

if (hari === "senin")
    console.log("saatnya kerja...");
    console.log("besok hari selasa");  // ini berada di luar teks

Ketika kode diatas dijalankan, akan tampil teks "besok hari selasa". Padahal yang saya inginkan, string tersebut hanya tampil jika kondisi if (hari === "senin") dipenuhi.

Jika block if sudah lebih dari 1 baris, harus ditambahkan tanda kurung kurawal untuk menandakan awal dan akhir blok if:

var hari = "selasa";

if (hari === "senin"){
    console.log("saatnya kerja...");
    console.log("besok hari selasa");
}

Pada prakteknya, kondisi if sering digunakan untuk pengecekan validasi, seperti contoh berikut:

var hari = "admin";

if (hari === "admin"){
    console.log("selamat datang admin...");
}

Disini saya mengecek isi variabel user. Jika berisi stirng 'admin' perintah console.log("selamat datang admin...") akan dijalankan. Isi dari variabel user bisa saja berasal dari form HTML atau dari database (diambil menggunakan bahasa pemrograman PHP).

Dalam pemrosesan form, kita perlu juga mengecek apakan nilai yang diinput user sudah sesuai atau tidak, seperti pada contoh berikut:

var username = "salogy";

if (typeof username === "string"){
    console.log("username valid...");
}

Perhatikan bagian condition, saya ingin memeriksa apakah typeof username === "string"? kondisi ini hanya akan bernilai true jika variabel username bertipe string. Karena bisa saja yang menginput nilai selain string:

var username = 22.3;

if (username === "string"){
    console.log("susername valid...");
}

Kode console.log("username valid...") tidak akan dijalanjan karena variabel username bertipe number, bukan string.

Ketika mengembangkan sebuah program tentu terdapat alur atau flow proses ketika kode dijalankan. Kita dapat mengontrol alur program ketika suatu kondisi terjadi, misalkan jika nilai x > 5 maka program harus melakukan statement a. Jika tidak, program akan menjalankan statement b. Untuk melakukan hal tersebut, kita dapat menggunakan if/else statement.

If/else statement dapat digambarkan seolah-olah kita memberikan pertanyaan benar atau salah pada JavaScript, lalu memberikan perintah sesuai jawaban dari pertanyaan tersebut.

Contohnya, terdapat variabel x dengan nilai 50, kemudian kita bertanya “Hai JavaScript! Apakah x lebih dari 70?” jika kondisi tersebut benar, maka kita dapat memerintahkan JavaScript untuk menampilkan nilainya. Jika salah, kita perintahkan JavaScript untuk menampilkan teks “Nilai kurang dari 70”.

Skenario tersebut dapat dituliskan pada dalam bentuk kode pada JavaScript seperti berikut:

let x = 50;
 
if(x > 70) {
    console.log(x);
} else {
    console.log("Nilai kurang dari 70");
}
 
/* output Nilai kurang dari 70 */

Pada kode di atas, kita menggunakan kata kunci if untuk memberikan pertanyaan pada JavaScript. Pertanyaan tersebut berupa logical statement yang sudah kita pelajari pada materi sebelumnya. Logical statement pada if ditulis di dalam tanda kurung (parentheses). Jika logical statement tersebut menghasilkan true, maka JavaScript akan mengeksekusi kode yang berada di dalam block if. Jika logical statement menghasilkan nilai false, maka kode yang pada block else lah yang akan dieksekusi.

Block else bersifat opsional untuk dituliskan, hal tersebut berarti kita tidak perlu menuliskannya jika tidak kita manfaatkan. Contohnya:

let language = "English";
let greeting = "Selamat Pagi!"
 
if(language === "English") {
    greeting = "Good Morning!";
}
 
console.log(greeting);
 
/* output Good Morning! */

Pada kode di atas, nilai greeting memiliki nilai standar “Selamat Pagi!” tetapi akan ditampilkan berbeda jika language memiliki nilai “English”, pada kasus ini kita tidak perlu menuliskan block else.

Kita juga dapat memberikan lebih dari satu pertanyaan pada if statement dengan kata lain, kita dapat memberikan lebih dari satu kondisi dengan menggabungkan keyword else dan if seperti berikut:

let language = "French";
let greeting = "Selamat Pagi"
 
if(language === "English") {
    greeting = "Good Morning!";
} else if(language === "French") {
    greeting = "Bonjour!"
} else if(language === "Japanese") {
    greeting = "Ohayogozaimasu!"
}
 
console.log(greeting);
 
/* output Bonjour! */

Dengan mengubah nilai dari variabel language ke nilai yang lain seperti “English” atau “Japanese” maka pesan yang ditampilkan pada console akan ikut berubah.

Struktur Logika SWITCH

Struktur logika switch kurang lebih mirip seperti if else, tapi lebih efisien jika kondisi yang diperiksa ada banyak.

Berikut format penulisan switch dalam javascript:

switch (variabel) {
    case (condition1) :
        statement1;
        break;
    case (condition2) :
        statement2;
        break;
    case (condition3) :
        statement3;
        break;
    case (condition4) :
        statement4;
        break;
    case (condition5) :
        statement5;
        break;
}

Dibaris pertama struktur switch, kita menentukan variabek yang akan diperiksa. Pengecekan kondisi dari variabel ini dilakukan dalam setiap case.

Berikut contoh prakteknya:

var situs = "google";

switch (situs) {
        case "google" :
        	console.log('halo google');
       		break;
       case "facebook" :
        	console.log('halo facebook');
       		break;
        case "twitter" :
        	console.log('halo twitter');
       		break;
  	default:
           	console.log('situs tidak tersedia');
}

Tujuan dari kode program diatas sama persis seperti latihan kita sebelumnya, dalam struktur swirch, kondisi dari variabel situs ditulis di dalam case. Jika seluruh case telah diperiksa dan tidak ada yang cocok, bagian default akan dijalankan. Ini mirip seperti else dalam struktur if else. Perintah break digunakan untuk keluar dari switch begitu kondisi yang cocok yang sudah ditemukan.