5 Tips Cara Menulis Conditional (If-Else atau Switch-Case) Dengan Javascript Yang Baik

5 Tips Cara Menulis Conditional (If-Else atau Switch-Case) Dengan Javascript Yang Baik - Ketika kita bekerja dengan Javascript, kita banyak sekali berurusan dengan conditional, berikut adalah 5 tips bagi kalian untuk menulis conditional yang lebih baik.

1. Gunakan Array.includes

Mari kita lihat contoh dibawah ini:

// kondisi
function test(buah) {
  if (buah == 'apel' || buah == 'stroberi') {
    console.log('merah');
  }
}/code>

Sekilas, contoh di atas terlihat bagus. Namun, bagaimana jika kita mendapat lebih banyak buah berwarna merah, seperti ceri dan arbei?

Apakah kalian akan memperpanjang code dengan lebih banyak ||?

Kita bisa menulis ulang code di atas dengan menggunakan Array.includes (Array.includes).

function test(buah) {
  // buat kondisi kedalam array
  const buahMerah = ['apel', 'stroberi', 'ceri', 'arbei'];

  if (buahMerah.includes(buah)) {
    console.log('merah');
  }
}

Kita buat kondisi kedalam sebuah array. Dengan begitu code kita akan terlihat lebih rapi.

2. Kurangi if bersarang

Mari kita perluas contoh sebelumnya dengan menambah 2 kondisi.

• Jika tidak ada buah, tampilkan pesan eror
• Terima dan tampilkan jumlah buah jika melebihi 10

function test(buah, jumlah) {
  const buahMerah = ['apel', 'stroberi', 'ceri', 'arbei'];

  // kondisi 1: buah harus memiliki nilai
  if (buah) {
    // kondisi 2: harus merah
    if (buahMerah.includes(buah)) {
      console.log('merah');

      // kondisi 3: harus lebih dari 10
      if (jumlah > 10) {
        console.log('jumlahnya banyak');
      }
    }
  } else {
    throw new Error('Tidak ada buah!');
  }
}

// hasil test 
test(null); // error: Tidak ada buah!
test('apel'); // print: merah
test('apel', 20); // print: merah, jumlahnya banyak

Lihat code di atas, kita punya:

• 1 if/else statement yang memfilter kondisi yang tidak valid
• 3 level if bersarang (kondisi 1, 2 & 3)

Aturan umum yang saya ikuti secara pribadi adalah me-return di awal jika kondisi yang tidak valid ditemukan.

function test(buah, jumlah) {
  const buahMerah = ['apel', 'stroberi', 'ceri', 'arbei'];

  // kondisi 1: lempar pesan error di awal
  if (!buah) throw new Error('Tidak Ada Buah!');

  // kondisi 2: harus merah
  if (buahMerah.includes(buah)) {
    console.log('merah');

    // kondisi 3: harus jumlahnya banyak
    if (jumlaj > 10) {
      console.log('jumlahnya banyak');
    }
  }
}

Dengan code ini, kita memiliki 1 level kondisi bersarang yang lebih sedikit. Gaya koding (coding) seperti ini baik terutama ketika kalian memiliki statement yang lebih panjang (bayangkan kalian harus scroll terus kebawah untuk mengetahui keberadaan else statement, not cool bro :V)

Kita selanjutnya bisa mengurangi 1 level kondisi bersarang, langsung saja kita lihat kondisi 2 di bawah ini.

function test(buah, jumlah) {
  const buahMerah = ['apel', 'stroberi', 'ceri', 'arbei'];

  // kondisi 1: lempar pesan error di awal
  if (!buah) throw new Error('Tidak Ada Buah!');

  // kondisi 2: berhenti ketika buah tidak merah
  if (!buahMerah.includes(buah)) return; 

  console.log('merah');

  // kondisi 3: harus banyak jumlahnya
  if (jumlah > 10) {
    console.log('jumlahnya banyak');
  }
}

Dengan mengubah kondisi dari kondisi 2, sekarang code kita bebas dari kondisi bersarang. Teknik ini berguna ketika kita mempunyai logic yang sangat panjang dan kita ingin menghentikan proses lebih lanjut ketika suatu kondisi tidak terpenuhi.

3. Gunakan default function parameter dan destructuring

Menurut saya code dibawah ini sudah tidak asing lagi bagi kalian, kita selalu mengecek nilai null atau undefined dan memberi nilai default ketika bekerja dengan javascript.

function test(buah, jumlah) {
  if (!buah) return;
  const j = jumlah|| 1; // jika jumlah tidak tersedia, maka nilai default 1

  console.log(`Kita punya ${j} ${buah}!`);
}

//hasil test
test('pisang'); // kita punya 1 pisang!
test('apel', 2); // kita punya 2 apel!

Faktanya kita dapat menghapus variabel j dengan memberi nilai default pada parameter

function test(buah, jumlah= 1) { // jika jumlah tidak tersedia, maka nilai default 1
  if (!buah) return;
  console.log(`Kita punya ${jumlah} ${buah}!`);
}

//hasil test
test('pisang'); // kita punya 1 pisang!
test('apel', 2); // kita punya 2 apel!

Lebih mudah bukan? setiap parameter bisa mempunyai deafult function parameter. Contohnya, kita bisa memberi nilai default untuk buah: function test(buah = 'unknown', jumlah = 1).

Bagaimana jika buah adalah sebuah object? Bisakah kita memberi nilai parameter default?

function test(buah) { 
  // tampilkan nama buah jika tersedia
  if (buah && buah.nama)  {
    console.log (buah.nama);
  } else {
    console.log('unknown');
  }
}

//hasil test
test(undefined); // unknown
test({ }); // unknown
test({ nama: 'apel', warna: 'merah' }); // apel

Lihat contoh diatas, kita ingin menampilkan nama buah jika tersedia atau menampilkan unknown jika tidak tersedia. Kita bisa hindari menggunakan conditional buah && buah.nama dengan default function parameter & destructing.

// destructing - ambil properti nama saja
// memberi default object {} kosong
function test({nama} = {}) {
  console.log (nama || 'unknown');
}

//hasil test
test(undefined); // unknown
test({ }); // unknown
test({ nama: 'apel', warna: 'merah' }); // apel

Karena kita hanya butuh properti nama dari buah, kita dapat destructure parameter menggunakan {nama}. Lalu kita bisa gunakan nama sebagai variabel dalam koding kita daripada pakai buah.nama.

Kita juga memberi object {} kosong sebagai nilai default, jika tidak di kasih objek kosong maka koding kalian akan muncul eror seperti ini test(undefined) - Cannot destructure property name of 'undefined' or 'null'.

4. Gunakan Map/ Object literal

Lihat koding dibawah ini, kita ingin menampilkan buah sesuai warna.

function test(warna) {
  // Menggunakan switch untuk menampilkan buah sesuai warna
  switch (warna) {
    case 'merah':
      return ['apel', 'stroberi'];
    case 'kuning':
      return ['pisang', 'nanas'];
    case 'ungu':
      return ['anggur', 'plum'];
    default:
      return [];
  }
}

//hasil test
test(null); // []
test('kuning'); // ['pisang', 'nanas']

Tidak ada yang salah dari koding diatas, tapi menurut saya koding nya kebanyakan. Kita bisa mendapatkan hasil yang sama menggunakan object literal dengan lebih sedikit koding.

// Menggunakan object literal untuk menampilkan buah sesuai warna
  const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum']
  };

function test(color) {
  return fruitColor[color] || [];
}

Alternatifnya kalian bisa gunakan Map untuk mendapatkan hasil yang sama.

// Menggunakan Map untuk menampilkan buah sesuai warna
  const warnaBuah = new Map()
    .set('merah', ['apel', 'stroberi'])
    .set('kuning', ['pisang', 'nanas'])
    .set('ungu', ['anggur', 'plum']);

function test(warna) {
  return warnaBuah.get(warna) || [];
}

Atau kalian bisa gunakan Array.filter

const buah = [
    { nama: 'apel', warna: 'merah' }, 
    { nama: 'stroberi', warna: 'merah' }, 
    { nama: 'pisang', warna: 'kuning' }, 
    { nama: 'nanas', warna: 'kuning' }, 
    { nama: 'anggur', warna: 'ungu' }, 
    { nama: 'plum', warna: 'ungu' }
];

function test(warna) {
  // Menggunakan array.filter untuk menampilkan buah sesuai warna

  return buah.filter(f => f.warna == warna);
}

Banyak jalan menuju roma, sama seperti coding banyak cara untuk mendapatkan hasil yang sama. Koding is fun ma bro :V

5. Gunakan Array.every & Array.some 

Tips terakhir untuk kalian yaitu menggunakan fungsi javascript Array.every dan Array.some untuk semua atau beberapa kriteria. Contoh lihat koding dibawah untuk mengetahui apakah semua buah berwarna merah.

const buah = [
    { nama: 'apel', warna: 'merah' },
    { nama: 'pisang', warna: 'kuning' },
    { nama: 'anggur', warna: 'ungu' }
  ];

function test() {
  let semuaMerah = true;

  // kondisi: semua buah berwarna merah
  for (let b of buah) {
    if (!semuaMerah) break;
    semuaMerah = (b.warna == 'merah');
  }

  console.log(semuaMerah); // false
}

Dari koding diatas kita bisa mengurangi beberapa baris kode dengan Array.every.

const buah = [
    { nama: 'apel', warna: 'merah' },
    { nama: 'pisang', warna: 'kuning' },
    { nama: 'anggur', warna: 'ungu' }
  ];

function test() {
  // kondisi: semua buah berwarna merah
  const semuaMerah = buah.every(b => b.warna == 'merah');

  console.log(semuaMerah); // false
}

Gimana? :V . Dengan cara yang sama kita ingin mengetahui jika terdapat buah berwarna merah, kita gunakan Array.some

const buah = [
    { nama: 'apel', warna: 'merah' },
    { nama: 'pisang', warna: 'kuning' },
    { nama: 'anggur', warna: 'ungu' }
  ];

function test() {
  // kondisi: jika terdapat buah berwarna merah
  const adaBuahMerah = buah.some(b => b.warna == 'merah');

  console.log(adaBuahMerah); // true
}

Terakhir

Mari kita bersama-sama membuat kode lebih mudah dibaca. Supaya yang lagi belajar koding bisa cepat memahami koding tersebut. Nah begitulah 5 tips cara menulis conditional dengan javascript yang baik (menurut saya :V). Semoga artikel ini bermanfaat, Terimakasih.

Selamat koding guys.