Praktik Terbaik untuk Pernyataan Kondisional di JavaScript
Artikel ini menjelaskan praktik terbaik untuk pernyataan kondisional di JavaScript.
YouTube Video
Praktik Terbaik untuk Pernyataan Kondisional di JavaScript
Pernyataan if adalah struktur kontrol dasar dalam program JavaScript. Namun, seiring meningkatnya kompleksitas kode, jumlah pernyataan if dapat bertambah, membuat kode menjadi lebih sulit dibaca. Kali ini, kita akan membahas lebih dalam mengenai praktik terbaik untuk merancang pernyataan if dengan benar di JavaScript demi meningkatkan keterbacaan dan kemudahan pemeliharaan.
Sederhanakan kode menggunakan flag.
Sederhanakan kondisi yang melibatkan kriteria ganda dengan menggunakan nilai boolean.
Contoh yang Harus Dihindari
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Contoh yang Ditingkatkan
Gunakan flag untuk memperjelas kondisi.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Jaga Pernyataan Kondisional Tetap Sederhana
Ketika ekspresi bersyarat menjadi kompleks, keterbacaan kode berkurang, sehingga perlu menjaga kondisi tetap sederhana.
Contoh yang Harus Dihindari
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Contoh yang Ditingkatkan
Dengan memecah kondisi ke dalam variabel dengan makna tertentu, Anda dapat memperjelas maksudnya.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Perjelas prioritas operator logika
Dalam pernyataan if JavaScript, salah paham tentang prioritas operator logika dapat menyebabkan perilaku yang tidak diinginkan.
Contoh yang Harus Dihindari
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}Contoh yang Ditingkatkan
Ketika prioritas operator tidak jelas, Anda dapat menggunakan tanda kurung secara tepat untuk memperjelas.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Menggunakan evaluasi pendek
JavaScript mendukung evaluasi pendek untuk operator && (DAN) dan || (ATAU). Evaluasi pendek berarti ketika hasil dari suatu kondisi sudah ditentukan selama evaluasi, bagian yang tersisa tidak dievaluasi lagi.
DAN(&&): Jika sisi kiri dievaluasi sebagai false, sisi kanan tidak dievaluasi dan nilainya dikembalikan.ATAU(||): Jika sisi kiri dievaluasi sebagai true, sisi kanan tidak dievaluasi dan nilainya dikembalikan.
Contoh yang Harus Dihindari
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Contoh yang Ditingkatkan
Dalam kode ini, fungsi user?.someComplexFunction() dipanggil meskipun user?.isLoggedIn adalah false.
Memahami evaluasi pendek dapat membantu Anda menghindari perhitungan yang tidak perlu dan menulis kode yang efisien.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Meminimalkan Penggunaan Pernyataan else
Pernyataan else dapat meningkatkan beban kognitif saat melacak kode. Sebagai gantinya, pertimbangkan untuk menggunakan pengembalian awal.
Contoh yang Harus Dihindari
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Contoh yang Ditingkatkan
Perjelas kondisi dengan pengembalian awal.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Penggunaan yang Tepat dari Operator Ternary
Untuk kondisi sederhana, menggunakan operator ternary dapat memperpendek kode Anda. Namun, hindari penggunaan bersarang atau logika yang kompleks.
Contoh yang Harus Dihindari
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Contoh yang Ditingkatkan
Utamakan keterbacaan dengan membagi kondisi.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}Menggunakan nilai default dan evaluasi pendek
Gunakan nilai default dan evaluasi short-circuit untuk mengurangi percabangan dan menyederhanakan kode.
Contoh yang Harus Dihindari
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Contoh yang Ditingkatkan
Dalam kasus ini, menggunakan operator logika membuatnya lebih ringkas.
1// Good Example
2displayName = user?.name || 'Guest';Bedakan dengan benar kapan harus menggunakan pernyataan switch.
Ketika beberapa kondisi diperlukan, pernyataan switch dapat membuat maksud lebih jelas.
Contoh yang Harus Dihindari
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}Contoh yang Ditingkatkan
Penggunaan pernyataan switch dapat membantu mengatur kode.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}Menggunakan klausa penjaga dengan kondisi keluar awal
Guard clause adalah teknik yang menggunakan pernyataan if untuk keluar dari fungsi lebih awal.
Contoh yang Harus Dihindari
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}Contoh yang Ditingkatkan
Gunakan guard clause untuk mengurangi lapisan bersarang.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Tuliskan komentar untuk memperjelas maksud.
Untuk kondisi kompleks atau cabang yang kritis, tambahkan komentar singkat dan jelas untuk menyampaikan maksud kode.
Contoh yang Harus Dihindari
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Contoh yang Ditingkatkan
Tambahkan komentar untuk memperjelas maksud.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}Kesimpulan
Penggunaan pernyataan if JavaScript secara efektif dapat sangat meningkatkan keterbacaan dan pemeliharaan kode.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.