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