Pernyataan if yang lebih sederhana selalu berarti kode JavaScript yang lebih bersih.
Pernyataan bersyarat adalah bagian penting dari JavaScript. Mereka membiarkan Anda mengeksekusi kode berdasarkan apakah kondisi yang diberikan benar atau salah, dan Anda dapat menyarangkan banyak lain jika pernyataan (dan kalau tidak) untuk mengevaluasi lebih dari satu kondisi.
Tapi inilah masalahnya—ketika menulis kompleks jika... lain rantai, hal-hal dapat dengan cepat menjadi berantakan, dan Anda dapat dengan mudah berakhir dengan kode yang sulit dibaca dan dipahami.
Mari pelajari cara refactor yang panjang dan kompleks jika... lain jika... lain rantai bersyarat menjadi versi yang lebih ringkas, lebih bersih, dan lebih mudah dipahami.
Kompleks if...else Chains
Saat menulis pernyataan if...else yang rumit dalam JavaScript, penting bagi Anda untuk menulis kode yang bersih, ringkas, dan mudah dipahami. Misalnya, lihat di jika... lain rantai kondisional di dalam fungsi di bawah ini:
fungsibisaMinum(orang) {
jika(orang?.umur!= batal) {
jika(orang.usia < 18) {
menghibur.catatan("Masih terlalu muda")
} kalau tidakjika(orang.umur < 21) {
menghibur.catatan("Tidak di AS")
} kalau tidak {
menghibur.catatan("Diizinkan minum")
}
} kalau tidak {
menghibur.catatan("Kamu bukan orang")
}
}const orang = {
umur: 22
}
bisaMinum (orang)
Logikanya di sini sederhana. Pertama jika pernyataan memastikan bahwa orang objek memiliki usia properti (kalau tidak, dia bukan orang). Di dalam itu jika blokir, Anda telah menambahkan jika...selain itu...jika rantai yang pada dasarnya mengatakan:
Jika orang tersebut lebih muda dari 18 tahun, mereka terlalu muda untuk minum. Jika lebih muda dari 21 tahun, mereka masih di bawah usia minum legal di Amerika Serikat. Kalau tidak, mereka bisa mendapatkan minuman secara legal.
Meskipun kode di atas valid, penyatuan mempersulit Anda untuk memahami kode tersebut. Untungnya, Anda dapat memfaktorkan ulang kode agar ringkas dan lebih mudah dibaca dengan menggunakan a klausa penjaga.
Klausul Penjaga
Setiap kali Anda memiliki jika pernyataan yang membungkus semua kode Anda, Anda dapat menggunakan a klausa penjaga untuk menghapus semua sarang:
fungsicanDrinkBetter() {
jika(orang?.umur == batal) kembalimenghibur.catatan("Kamu bukan orang")
jika(orang.usia < 18) {
menghibur.catatan("Masih terlalu muda")
} kalau tidakjika(orang.umur < 21) {
menghibur.catatan("Tidak di AS")
} kalau tidak {
menghibur.catatan("Diizinkan minum")
}
}
Di awal fungsi, Anda menentukan klausa penjaga yang menyatakan bahwa jika kondisi tertentu tidak terpenuhi, Anda ingin keluar dari canDrinkBetter() segera berfungsi (dan catat "Kamu bukan orang" di konsol).
Tetapi jika kondisi terpenuhi, Anda mengevaluasi jika... lain rantai untuk melihat blok mana yang berlaku. Menjalankan kode memberi Anda hasil yang sama seperti contoh pertama, tetapi kode ini lebih mudah dibaca.
Jangan Gunakan Pengembalian Tunggal
Anda mungkin berpendapat bahwa teknik di atas bukan a prinsip pemrograman yang baik karena kami menggunakan banyak pengembalian dalam fungsi yang sama, dan Anda yakin lebih baik memiliki satu pernyataan pengembalian saja (alias, kebijakan pengembalian tunggal).
Tapi ini adalah cara yang buruk untuk menulis kode karena memaksa Anda ke dalam situasi bersarang gila yang sama seperti yang kita lihat di contoh kode pertama.
Dengan itu, Anda dapat menggunakan banyak kembali pernyataan untuk lebih menyederhanakan kode Anda (dan menghilangkan sarang):
fungsicanDrinkBetter() {
jika(orang?.umur == batal) kembalimenghibur.catatan("Kamu bukan orang")jika(orang.usia < 18) {
menghibur.catatan("Masih terlalu muda")
kembali
}jika(orang.usia < 21) {
menghibur.catatan("Tidak di AS")
kembali
}
menghibur.catatan("Diizinkan minum")
}
Kode ini berfungsi sama dengan dua contoh sebelumnya, dan juga sedikit lebih bersih.
Ekstrak Fungsi untuk Kode Pembersih
Blok kode terakhir kami lebih bersih daripada dua yang pertama, tetapi masih belum sebaik yang seharusnya.
Alih-alih berlama-lama jika... lain rantai di dalam satu fungsi, Anda dapat membuat fungsi terpisah canDrinkResult() yang melakukan pemeriksaan untuk Anda dan mengembalikan hasilnya:
fungsicanDrinkResult(usia) {
jika(usia < 18) kembali"Masih terlalu muda"
jika(usia < 21) kembali"Tidak di AS"
kembali"Diizinkan minum"
}
Kemudian di dalam fungsi utama, yang perlu Anda lakukan adalah menerapkan klausa penjaga terlebih dahulu sebelum memanggil canDrinkResult() function (dengan umur sebagai parameternya) untuk mendapatkan hasil:
fungsicanDrinkBetter() {
jika(orang?.umur == batal) kembalimenghibur.catatan("Kamu bukan orang")
membiarkan hasil = canDrinkResult (orang.umur)
menghibur.log (hasil)
}
Jadi dalam hal ini, Anda mendelegasikan tugas memeriksa usia minum ke fungsi terpisah dan hanya memanggilnya saat diperlukan. Ini membuat kode Anda ringkas dan lebih mudah digunakan daripada semua contoh sebelumnya.
Jauhkan yang lain dari Pernyataan Bersyarat
Anda telah mempelajari cara memfaktorkan ulang rantai bersyarat yang kompleks dan bersarang menjadi rantai bersyarat yang lebih pendek dan lebih mudah dibaca menggunakan klausa pelindung dan teknik ekstraksi fungsi.
Cobalah untuk menjaga kalau tidak pernyataan jauh dari persyaratan Anda sebanyak mungkin dengan menggunakan klausa penjaga dan teknik ekstraksi fungsi.
Jika Anda masih baru menggunakan JavaScript jika... lain pernyataan, mulailah dengan dasar-dasarnya.