skip to Main Content

tutorial javascript #08 – If Else Pada JavaScript

Memahami Percabangan Else If pada JavaScript dan Contoh Sederhananya

Untuk membuat percabangan di JavaScript kita bisa menggunakan kata kunci if/else atau menggunakan switch case. Tapi mengapa kita perlu belajar percabangan?

Pernahkan kalian login ke sebuah web? Coba perhatikan ketika kita login dan kita harus memasukan sebuah data seperti kata sandi. Jika kita salah memasukan kata sandi maka web akan menampilkan pesan kesalahan, sedangkan jika benar akan langsung dialihkan ke halaman beranda.

Nah, hal seperti ini termasuk percabangan, dan bisa kita buat menggunakan percabangan else if. Jadi, dengan percabangan kalian akan bisa menentukan kode mana yang akan dieksekusi berdasarkan kondisi tertentu. Lebih lengkapnya tentang percabangan mari kita bahas berikut ini.

Percabangan if, else, dan else if

Percabangan yang menggunakan kata kunci if dan else memiliki tiga bentuk yaitu if, else dan else if.

1. Percabangan if

Gambar flowchart percabangan if

Percabangan if biasanya digunakan ketika kita hanya memiliki satu kondisi dan satu aksi (pilihan) atau statement.

Contoh sintak:

if (kondisi) {
  statement
}
  • Kondisi: biasanya berupa ekspresi yang mengembalikan nilai boolean seperti perbandingan dan logika. Jika kondisi tidak mengembalikan nilai boolean, dikonversi otomatis ke boolean (truthy atau falsy). Kondisi harus bernilai true agar statement dapat dieksekusi.
  • Statement: kode atau aksi yang akan dieksekusi jika kondisi bernilai true.

Contoh kondisi sintak true:

if (true) {
  console.log('hello winners');
}
console.log('ini statement di luar if');

Output :

Perhatikan kode di atas, karena kondisi bernilai true maka statement di dalam if akan dieksekusi. 

Contoh kondisi sintak true:

if (false) {
  console.log('hello winners');
}
console.log('ini statement di luar if');

Output :

Kode di atas tidak jauh beda dengan yang sebelumnya, hanya saja kita mengubah kondisi menjadi false, yang terjadi statement di dalam if tidak dieksekusi.

2. Percabangan else

Percabangan else biasanya digunakan ketika kita memiliki dua pilihan atau statement (aksi).

Statement yang dieksekusi ketika kondisi bernilai true dan false.

Contoh sintak:

if (kondisi) {
  statement1
} else {
  statement2
}
  • Perilakunya mirip seperti sebelumnya, hanya saja “statement2” dalam blok else akan dieksekusi ketika kondisinya bernilai false.

Contoh kondisi sintak true:

if (true) {
  console.log('hello winners');
} else {
  console.log('halo dunia');
}

Output :

Karena kondisi bernilai true, maka “statement1” (console.log(‘hello winners’);) dieksekusi.

Contoh kondisi sintak false:

if (false) {
  console.log('hello winners');
} else {
  console.log('halo dunia');
}

Output :

Karena kondisi bernilai false, maka “statement2” (console.log(‘halo dunia’);) dieksekusi.

Jadi, “statement1” dieksekusi ketika kondisi bernilai true, sedangkan “statement2” ketika false.

3. Percabangan else if

Percabangan  else if digunakan ketika kita memiliki lebih dari satu kondisi dan lebih dari dua pilihan atau statement.

Contoh sintak:

if (kondisi1) {
  statement1
} else if (kondisi2) {
  statement2
} else {
  statement3
}

Perilakunya mirip seperti sebelumnya, JavaScript akan memindai setiap kondisi dari atas ke bawah. Jika ditemukan kondisi yang bernilai true maka statement yang ada di dalam kondisi tersebut akan dieksekusi lalu keluar dari percabangan. Artinya kondisi dan statement berikutnya tidak dieksekusi. Tapi, kita dapat menambahkan lebih dari satu else if() { … }.

Contoh kondisi sintak true:

if (true) {
  console.log('statement1');
} else if (true) {
  console.log('statement2');
} else if (true) {
  console.log('statement3');
} else {
  console.log('statement4');
}

Perhatikan kode di atas, statement berapa yang akan ditampilkan ke console? Jawabannya adalah statement1.

Output :

Mengapa statement2, statement3, dan statement4 tidak dieksekusi padahal kondisinya bernilai true? Karena statement1 adalah kondisi pertama yang dicek JavaScript. 

Sekali lagi ingat, ketika ditemukan kondisi bernilai true, maka JavaScript akan mengeksekusi statement dalam kondisi tersebut dan keluar dari percabangan. Terus, bagaimana dengan else? Statement dalam blok else hanya dieksekusi ketika semua kondisi bernilai false.

Jadi, selama ada kondisi yang bernilai true, statement dalam blok else tidak akan dieksekusi.

Contoh kondisi sintak true:

if (false) {
  console.log('statement1');
} else if (false) {
  console.log('statement2');
} else if (false) {
  console.log('statement3');
} else {
  console.log('statement4');
}

Output :

Perhatikan contoh di atas, statement dalam blok else(console.log(‘statment4’);  dieksekusi karena semua kondisi di atasnya bernilai false.

3 Hal yang Perlu Diketahui dalam If Else pada Javascript

Setelah mengetahui jenis percabangan, berikut ini adalah 3 hal yang perlu kita ketahui dan ingat tentang if else, yaitu: 

1. Melakukan Konversi Kondisi ke Boolean

Kondisi pada percabangan harus menghasilkan atau bernilai boolean (true atau false). Bagaimana jika kondisi memiliki nilai selain boolean? Maka JavaScript akan mengkonversi nilai tersebut ke boolean.

Contoh sintak:

if ('') {
  console.log('hello world')
}

Output :

Mengapa console.log(‘hello world’); tidak dieksekusi? karena jika ‘ ‘ (string kosong) dikonversi ke boolean maka akan menghasilkan nilai false (falsy). Untuk mengetahui nilai apa saja yang jika dikonversi ke boolean menjadi true dan false, silakan pelajari materi truthy dan falsy.

2. Membuat Percabangan Bersarang

Kita bisa membuat percabangan bersarang atau percabangan di dalam percabangan. Dimana perilaku tersebut dianggap sama saja seperti percabangan normal.

contoh sintaks :

const email = 'diaz@xsis.academy';
const password = 'winners';
 
if (email === 'diaz@xsis.academy') {
  if (password === 'rahasia') {
    console.log('Selamat Anda berhasil login');
  } else {
    console.log('Password salah');
  }
} else {
  console.log('Email belum terdaftar');
}

3. Kurung Kurawal Dapat Dihilangkan

Kita juga bisa menghilangkan kurung kurawal ketika statement hanya satu baris.

Contoh sintak: 

if (false) console.log('statement1');
else if (false)console.log('statement2');
else if (false)console.log('statement3');
else console.log('statement4');

Contoh Kasus Menggunakan else if

Katakanlah kita ingin membuat aplikasi untuk mengkonversi nilai angka dari 0 sampai 100 menjadi nilai huruf (grade) yang diklasifikasikan sebagai berikut:

  • Nilai 100 – 80: Grade A
  • Nilai 79 – 60: Grade B
  • Nilai 59 – 40: Grade C
  • Nilai 39 – 20: Grade D
  • Nilai 19 – 0: Grade E
  • Jika nilai berada di luar rentang 0 – 100, tampilkan pesan Nilai tidak valid.

Maka kodenya dapat dibuat sebagai berikut: 

let nilai = 50; //contoh input nilai
 
if (nilai <= 100 && nilai >= 80) {
  console.log('Grade: A');
} else if (nilai < 80 && nilai >= 60) {
  console.log('Grade: B');
} else if (nilai < 60 && nilai >= 40) {
  console.log('Grade: C');
} else if (nilai < 40 && nilai >= 20) {
  console.log('Grade: D');
} else if (nilai < 20 && nilai >= 0) {
  console.log('Grade: E');
} else {
  console.log('Nilai tidak valid');
}

Output :

Kode di atas akan menampilkan Grade: C ke console karena nilai yang diinput 50 atau berada dalam rentang 60 sampai 40. Jika penasaran seperti apa output lainnya, kalian dapat mengubah nilai untuk menguji masing-masing kondisi, termasuk memasukkan angka diluar rentang 0 – 100.

———-

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top