Tutorial Belajar JavaScript Part 23: Cara Penulisan Struktur Logika IF ELSE dalam JavaScript

Jika dalam tutorial JavaScript sebelumnya kita telah mempelajari tentang tipe data dasar di dalam JavaScript, yakni Number, String dan Boolean, pada tutorial ini kita akan masuk kedalam pembahasan tentang Cara Penulisan Struktur Logika IF dan IF ELSE dalam JavaScript.


Pengertian Struktur IF

Jika anda pernah mempelajari bahasa pemograman lain, pastinya tidak asing dengan struktur IF. Struktur IF adalah stuktur kode pemograman ‘conditional’ yang akan membuat percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2 percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’ tidak terpenuhi.

Berikut adalah penulisan dasar alur logika IF:

if (kondisi) {
   //kode program jika kondisi true
}
else {
   //kode program jika kondisi false
}

Kondisi di dalam struktur IF disini bisa berisi variabel dengan tipe data boolean, atau dengan kode program yang akan menghasilkan boolean, misalkan IF (a==b), atau IF (a>=b). Jika kondisi diisi dengan selain boolean (selain true atau false), maka hasilnya akan dikonversi menjadi boolean (tentang aturan konversi ini telah kita bahas pada tutorial tentang tipe data boolean).


Cara Penulisan Struktur Logika IF dalam JavaScript

Penulisan stuktur IF di dalam JavaScript, mirip dengan bahasa pemograman C++ atau PHP. Berikut adalah contoh penulisan struktur IF di dalam JavaScript:

<script>
var nama="ilkom";     //buat variabel String nama dan isi dengan ”ilkom”
if (nama=="ilkom")   // cek apakah variabel nama berisi ”ilkom”
console.log("Berhasil!");
</script>

Kode program diatas tidak akan menjalankan perintah console.log(“Berhasil!”) jika variabel nama tidak berisi stringilkom”.

Jika baris yang akan dijalankan terdiri dari 2 baris atau lebih, maka kita harus menggunakan tanda kurung kurawal (tanda { dan })pada awal dan akhir blok kondisi IF, seperti contoh berikut:

<script>
var nama="ilkom";
if (nama=="ilkom")
{
   console.log("Berhasil!");
   console.log("Belajar");
   console.log("JavaScript");
}
</script>

Cara Penulisan Struktur Logika IF ELSE dalam JavaScript

Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi, yakni dengan menambahkan perintah ELSE. Berikut contoh penulisannya:

<script>
//buat variabel Number angka dan isi dengan nilai 17
var angka=17;

// jika sisa hasil bagi (mod) variabel angka dengan 2 adalah 0, 
// maka jalankan perintah console.log()
if (angka%2==0)
   console.log("Angka adalah bilangan genap");
else
   console.log("Angka adalah bilangan ganjil");
</script>

Kondisi angka%2==0 hanya akan bernilai TRUE jika nilai dari variabel angka bisa habis dibagi 2, yang menandakan angka adalah bilangan genap, selain itu dapat dipastikan bahwa angka adalah bilangan ganjil.

Sama seperti struktur IF, jika bagian ELSE memiliki baris lebih dari 1, maka kita harus menambahkan tanda kurung kurawal untuk menandai blok tersebut. seperti contoh berikut:

<script>
var angka=12;

if (angka%2==0) 
{
   console.log("Angka = "+angka);
   console.log("Angka adalah bilangan genap");
}
else 
{
   console.log("Angka = "+angka);
   console.log("Angka adalah bilangan ganjil");
}
</script>

Cara Penulisan Nested IF dalam JavaScript

Struktur Nested IF atau IF bersarang adalah cara penggunaan struktur IF secara berulang, yakni stuktur IF yang berada didalam IF. Alur program seperti ini biasa di gunakan untuk logika yang lebih detail. Berikut adalah contoh penggunaannya:

<script>
var angka=-12;

if (angka%2==0) 
{
   console.log("Angka = "+angka);
   console.log("Angka adalah bilangan genap");
   if (angka > 0)
   {
      console.log("Angka besar dari 0");
   }
   else 
   {
      console.log("Angka kecil dari 0");
   }
}           
else 
{
   console.log("Angka = "+angka);
   console.log("Angka adalah bilangan ganjil");
   if (angka > 0)
   {
      console.log("Angka besar dari 0");
   }
   else 
   {
      console.log("Angka kecil dari 0");
   }
}
</script>

Dalam contoh diatas, saya membuat program yang akan menyeleksi apakah variabel angka berisi 4 kemungkinan, yakni apakah angka merupakan bilangan genap dan positif, bilangan genap dan negatif, bilangan ganjil dan positif, atau bilangan ganjil dan negatif. Karena ada 4 kondisi akhir yang mungkin terjadi, maka saya menggunakan nested IF.

Dalam pembuatan kode program yang menggunakan konsep nested IF ini, kita harus selalu memperhatikan tanda kurung kurawal yang menandakan awal dan akhir blok program. Lupa dalam menutup suatu blok IF akan menyebabkan program tersebut tidak akan berjalan (akan menghasilkan error), atau yang lebih sukar di deteksi adalah program akan menghasilkan kesalahan logika. Editor pemograman yang khusus seperti Notepad++ akan memudahkan kita untuk memastikan bahwa suatu blok program telah ditutup secara benar.


Cara Penulisan Struktur Logika ELSE IF dalam JavaScript

Struktur ELSE IF adalah bentuk lain dari penulisan struktur IF ELSE. Struktur ELSE IF terbentuk ketika kita menggunakan struktur IF ELSE secara berulang. Berikut contoh sederhananya:

<script>
var angka=2;
 
if (angka==1)
{
   console.log("Angka Satu");
}
else if (angka==2)
{
   console.log("Angka Dua");
}
else if (angka==3)
{
   console.log("Angka Tiga");
}
else if (angka==4)
{
   console.log("Angka Empat");
}
</script>

Di dalam contoh diatas, saya menyeleksi secara satu persatu nilai dari variabel angka dan menampilkan hasilnya dalam bentuk huruf.

Dalam tutorial kali ini kita telah mempelajari tentang cara penulisan dan penggunaan struktur IF ELSE di dalam JavaScript. Namun JavaScript masih memiliki struktur logika lainnya yakni struktur SWITCH. Kita akan membahasnya pada tutorial selanjutnya: Cara Penulisan Struktur Logika SWITCH dalam JavaScript.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

12 Comments

  1. Taufiq Suryanto
    06 Dec 14
  2. Romli
    14 Mar 16
    • Andre
      14 Mar 16
  3. iqbal hanafi
    16 May 16
    • Andre
      17 May 16
  4. SeniKoding
    19 Apr 17
    • Andre
      20 Apr 17
  5. maji
    08 May 17
    • Andre
      08 May 17
  6. dxdiag
    20 Jul 17
    • Andre
      21 Jul 17

Add Comment