if...else JavaScript: Belajar 3 Bentuk Percabangan dengan Studi Kasus

Untuk membuat percabangan di JavaScript kita bisa menggunakan kata kunci if dan else yang akan kita bahas kali ini, atau switch case.

Percabangan memungkinkan kita menentukan aksi atau kode mana yang akan dieksekusi berdasarkan kondisi tertentu.

Jangan bingung antara istilah percabangan, pengkondisian, struktur logika, dan conditional statement (pernyataan bersyarat), semuanya merujuk pada satu hal yang sama.

Mengapa kita perlu belajar percabangan?

Coba perhatikan ketika kita login ke Facebook.

Ketika salah memasukkan kata sandi, Facebook akan menampilkan pesan kesalahan, sedangkan jika benar akan langsung dialihkan ke halaman beranda.

Perilaku seperti ini bisa kita buat menggunakan percabangan.

Jadi, dengan percabangan Anda akan bisa menentukan kode mana yang akan dieksekusi berdasarkan kondisi tertentu.

Berikut topik yang akan kita pelajari terkait percabangan if dan else JavaScript.

Percabangan if, else, dan else if
3 Hal yang Perlu Diketahui

Percabangan `if`, `else`, dan `else if`

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

1. Percabangan `if`

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

Sintaks

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 dieksekusi.
Statement: kode atau aksi yang akan dieksekusi jika kondisi bernilai true.

Contoh Kondisi true

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

Perhatikan kode di atas, karena kondisi bernilai true maka statement di eksekusi.

Contoh Kondisi false

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

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

Studi Kasus

Katakanlah kita memiliki sebuah aplikasi yang mengharuskan pengguna login menggunkaan kata sandi.

Jadi, ketika pengguna login menggunakan kata sandi yang benar, kita akan menampilkan pesan kesalahan Selamat Anda berhasil login., kalau tidak jangan.

Anggap saja kata sandi yang benar adalah rahasia123 dan nilai variabel inputKataSandi dikirim dari formulir login.

Mari kita gunakan kasus jika kata sandi benar.

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

Perhatikan kondisi perbandingan inputKataSandi === 'rahasia123', ini menghasilkan nilai true karena nilai variabel inputKataSandi sama dengan rahasia123.

Oleh karena itu, statement dieksekusi.

Mari kita lihat kasus jika kata sandi salah.

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

Sekarang, kondisi perbandingan inputKataSandi === 'rahasia123' menghasilkan nilai false karena nilai inputKataSandi tidak sama dengan rahasia123.

Oleh karena itu statement tidak dieksekusi.

Bagaimana jika kita ingin menampilkan pesan kesalahan ketika kata sandi salah? Disinilah kita bisa menggunakan else.

2. Percabangan `else`

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

Statement yang dieksekusi ketika kondisi bernilai true dan false.

Sintaks

if (kondisi) {
  statement1
} else {
  statement2
}

Perilakunya mirip seperti sebelumnya, hanya saja "statement2" dalam blok else akan dieksekusi ketika kondisi bernilai false.

Contoh kondisi true

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

Karena kondisi bernilai true, maka "statement1" (console.log('hello world');) dieksekusi.

Contoh kondisi false

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

Karena kondisi bernilai false, maka "statement2" (console.log('halo dunia');) dieksekusi.

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

Mari kita gunakan contoh kode sebelumnya untuk menampilkan kesalahan Ops! Kata sandi salah. ketika kata sandi salah.

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

3. Percabangan `else if`

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

Sintaks

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.

Kita dapat menambahkan lebih dari satu else if () { ... }.

Contoh

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.

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...

...JavaScript akan mengeksekusi statement dalam kondisi tersebut dan keluar dari percabangan.

Bagaimana dengan else?

Statement dalam blok else hanya dieksekusi ketika semua kondisi bernilai false.

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

Contoh

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

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

Studi Kasus

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.

const nilai = 50;

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

Kode di atas akan menampilkan Grade: C ke console karena nilai berada dalam rentang 60 - 40.

Anda dapat mengubah nilai dari variabel nilai untuk menguji masing-masing kondisi, termasuk memasukkan angka diluar rentang 0 - 100.

Kode di atas memang terlihat kompleks, tapi ini lebih ketat.

Kode di atas juga bisa mengasah pemahaman Anda mengenai operator perbandingan dan logika.

3 Hal yang Perlu Diketahui

1. Konversi Kondisi ke Boolean

Kondisi pada percabangan harus menghasilkan atau bernilai boolean (true atau false).

Bagaimana jika kondisi memiliki nilai selain boolean? JavaScript akan mengkonversi nilai tersebut ke boolean.

Contoh

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

Mengapa console.log('hello world'); tidak dieksekusi? karena jika '' (string kosong) di konversi ke boolean maka akan menghasilkan nilai false (falsy).

Untuk mengetahui nilai apa saja yang jika dikonversi ke boolean menjadi true dan false, pelajari materi truthy dan falsy.

2. Percabangan Bersarang

Kita juga bisa membuat percabangan di dalam percabangan (percabangan bersarang).

Perilakunya sama saja seperti percabangan normal.

Contoh

const email = 'reza@rahasia.com';
const password = 'anu';

if (email === 'reza@rahasia.com') {
  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

const nilai = 50;

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');

Percabangan if, else, dan else if

1. Percabangan if

2. Percabangan else

3. Percabangan else if

3 Hal yang Perlu Diketahui

1. Konversi Kondisi ke Boolean

2. Percabangan Bersarang

3. Kurung Kurawal Dapat Dihilangkan

Percabangan `if`, `else`, dan `else if`

1. Percabangan `if`

2. Percabangan `else`

3. Percabangan `else if`