Menguasai Rantai Operator Nullish Coalescing JavaScript: Penugasan Nilai Default yang Efektif

Operator nullish coalescing (??) JavaScript adalah alat yang ampuh untuk menyediakan nilai default secara ringkas dan mudah dibaca. Panduan ini membahas secara mendalam nuansa operator, khususnya berfokus pada perantaian dan cara memanfaatkannya untuk penugasan nilai default yang efektif dalam berbagai skenario. Kita akan menjelajahi manfaat, contoh praktis, dan teknik lanjutan untuk membantu Anda menulis kode JavaScript yang lebih bersih dan lebih kuat.

Memahami Operator Nullish Coalescing (??)

Operator nullish coalescing (??) mengevaluasi sebuah nilai dan, jika nilai tersebut adalah `null` atau `undefined`, ia mengembalikan nilai default. Ini adalah alternatif yang lebih spesifik dan seringkali lebih disukai daripada operator OR (||), yang dievaluasi sebagai `false` untuk serangkaian nilai falsy yang lebih luas (misalnya, `0`, `''`, `false`).

Sintaks dasarnya sangat sederhana:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

Di sini, `value` adalah ekspresi yang akan dievaluasi. Jika `value` adalah `null` atau `undefined`, `defaultValue` dikembalikan; jika tidak, `value` itu sendiri yang dikembalikan.

Mengapa Menggunakan ?? Dibandingkan ||?

Keunggulan utama `??` dibandingkan `||` terletak pada ketepatannya. Pertimbangkan contoh-contoh berikut:

• const count = 0; const result = count || 10; // result akan menjadi 10 (karena 0 adalah falsy)
• const count = 0; const result = count ?? 10; // result akan menjadi 0 (karena 0 bukan null maupun undefined)

Dalam kasus pertama, menggunakan `||`, kita secara keliru menetapkan `10` ke `result` bahkan ketika `count` secara sah adalah `0`. Operator `??` mencegah hal ini, hanya mengganti jika nilai aslinya adalah `null` atau `undefined`.

Merantai Operator Nullish Coalescing

Merantai operator nullish coalescing memungkinkan Anda memeriksa beberapa nilai secara berurutan dan memberikan nilai default hanya jika semua nilai sebelumnya adalah `null` atau `undefined`. Ini sangat berguna untuk mengakses properti bersarang atau nilai default dalam struktur data yang kompleks.

Contoh Perantaian Dasar

Bayangkan Anda memiliki objek yang mewakili profil pengguna, dan Anda ingin menampilkan bahasa pilihan mereka. Bahasa tersebut mungkin diatur di beberapa tempat berbeda, dengan default jika tidak ada yang ditentukan.

            const userProfile = {
  preferences: {
    language: null, // Atau undefined
  },
};

const preferredLanguage = userProfile.preferences.language ?? 'en';
console.log(preferredLanguage); // Output: 'en'

            

              
                Copy
              
            
          

Sekarang, mari tambahkan perantaian untuk memeriksa `preferences` yang mungkin hilang:

            const userProfile = {}; // preferences mungkin hilang

const preferredLanguage = userProfile.preferences?.language ?? 'en'; // Menggunakan optional chaining untuk keamanan
console.log(preferredLanguage); // Output: 'en'

            

              
                Copy
              
            
          

Dalam contoh yang ditingkatkan ini, jika `userProfile.preferences` adalah `undefined`, kode akan dengan anggun beralih ke nilai default 'en'. `?.` (operator optional chaining) mencegah kesalahan saat mengakses properti objek yang berpotensi tidak terdefinisi.

Perantaian Lanjutan untuk Beberapa Penugasan Default

Merantai `??` memungkinkan beberapa penugasan default dalam satu ekspresi. Evaluasi berlangsung dari kiri ke kanan, dan nilai non-null/undefined pertama yang ditemui digunakan.

            const settings = {
  theme: null,
  font: undefined,
  size: 16,
};

const theme = settings.theme ?? settings.defaultTheme ?? 'light'; // Memeriksa settings.theme, lalu settings.defaultTheme, lalu default ke 'light'
const font = settings.font ?? 'Arial'; // Jika font adalah null atau undefined, default ke Arial
const fontSize = settings.fontSize ?? 12; //if fontSize is undefined, default is 12

console.log(theme); // Output: 'light'
console.log(font); // Output: 'Arial'
console.log(fontSize); // Output: 12, karena settings.fontSize tidak terdefinisi dan tidak ada default di pengaturan

            

              
                Copy
              
            
          

Dalam contoh `theme`, jika `settings.theme` adalah null atau undefined, kode memeriksa `settings.defaultTheme`. Jika *itu* juga null atau undefined, nilai default 'light' digunakan. Pendekatan ini sangat menyederhanakan penugasan nilai default ketika berbagai tingkat fallback diperlukan.

Akses Properti Bersarang dengan Perantaian

Operator nullish coalescing bersinar saat bekerja dengan struktur objek yang bersarang dalam, di mana mengakses properti dapat menyebabkan nilai `undefined` di berbagai tingkatan.

            const user = {
  details: {
    address: {
      city: null,
    },
  },
};

const city = user.details?.address?.city ?? 'Unknown';
console.log(city); // Output: 'Unknown'

            

              
                Copy
              
            
          

Dalam contoh ini, operator optional chaining (`?.`) menavigasi properti bersarang dengan aman. Jika `user.details` atau `user.details.address` adalah `undefined`, atau `user.details.address.city` adalah `null` atau `undefined`, kode akan menetapkan 'Unknown' ke `city`. Struktur ini membantu menghindari pengecualian `TypeError` umum saat berhadapan dengan data yang berpotensi tidak lengkap.

Praktik Terbaik dan Pertimbangan

Keterbacaan dan Kejelasan Kode

Meskipun merantai operator nullish coalescing dapat sangat meningkatkan keringkasan kode, penting untuk menjaga keterbacaan. Rantai yang terlalu panjang dapat menjadi sulit dipahami. Pertimbangkan poin-poin berikut:

• Jaga agar rantai tetap relatif pendek. Jika Anda memiliki rantai dengan lebih dari tiga atau empat operator `??`, pertimbangkan untuk memecahnya menjadi beberapa baris untuk keterbacaan yang lebih baik, atau bahkan menggunakan variabel terpisah.
• Gunakan nama variabel yang bermakna. Nama variabel deskriptif memudahkan untuk memahami logika.
• Tambahkan komentar jika diperlukan. Jelaskan tujuan dari rantai yang kompleks.

Urutan Operasi

Operator `??` memiliki prioritas yang relatif rendah. Ini berarti bahwa ia dievaluasi setelah sebagian besar operator lain. Oleh karena itu, saat menggabungkan `??` dengan operator lain (misalnya, operator aritmatika atau operator logika), perhatikan urutan operasi. Gunakan tanda kurung untuk secara eksplisit mendefinisikan urutan evaluasi jika diperlukan, terutama untuk ekspresi yang kompleks.

            const value = (a + b) ?? c; // Mengevaluasi a + b terlebih dahulu, lalu menggunakan ??

            

              
                Copy
              
            
          

Perbandingan dengan Operator OR (||)

Seperti yang disebutkan sebelumnya, operator nullish coalescing berbeda dari operator OR logis (||). Sementara `||` dievaluasi sebagai `false` untuk banyak nilai (termasuk `0`, `''`, `false`, `NaN`, `null`, dan `undefined`), `??` dievaluasi sebagai `false` *hanya* untuk `null` dan `undefined`. Pilih operator yang paling sesuai dengan kebutuhan Anda. Misalnya, saat memastikan suatu nilai bukan string kosong, dan Anda setuju dengan 0 sebagai nilai yang valid, gunakan `??`.

Kapan Harus Menghindari Penggunaan Berlebihan

Meskipun operator nullish coalescing adalah alat yang ampuh, jangan menggunakannya secara berlebihan. Penggunaan berlebihan dapat menyebabkan kode yang kurang mudah dibaca. Berikut adalah beberapa skenario di mana pendekatan alternatif mungkin lebih baik:

• Penugasan default sederhana: Untuk penugasan yang sangat sederhana, pernyataan `if/else` sederhana mungkin lebih jelas.
• Kondisi logis yang kompleks: Jika logika di balik penugasan nilai default kompleks, pertimbangkan untuk menggunakan pernyataan `if/else` atau fungsi khusus untuk merangkum logika.

Contoh Praktis dan Kasus Penggunaan Global

Mari kita periksa beberapa contoh praktis, dengan mempertimbangkan audiens global dan konteks internasional:

Contoh 1: Internasionalisasi (i18n) dan Lokalisasi (l10n)

Dalam aplikasi yang diinternasionalkan, mengambil teks yang dilokalkan mungkin melibatkan pemeriksaan beberapa sumber. Operator `??` menyederhanakan proses ini.

            // Asumsikan pustaka i18n dan konfigurasi lokal
const userLocale = getUserLocale(); // misalnya, 'fr-CA', 'en-US'

const localizedMessage = translations[userLocale]?.welcomeMessage ?? translations[userLocale.split('-')[0]]?.welcomeMessage ?? translations['en']?.welcomeMessage ?? 'Welcome';

console.log(localizedMessage); // Menampilkan pesan selamat datang menggunakan bahasa pilihan pengguna, fallback ke kode bahasa lalu 'en'

            

              
                Copy
              
            
          

Kode ini pertama-tama mencoba mengambil pesan berdasarkan lokal lengkap pengguna (`fr-CA`). Jika itu gagal (terjemahan tidak tersedia), ia kembali ke kode bahasa (`fr`), dan jika *itu* gagal, ia default ke 'en'.

Contoh 2: Data Produk E-niaga

Bayangkan platform e-niaga dengan detail produk yang diambil dari database. Deskripsi produk, harga, dan detail lainnya mungkin hilang tergantung pada wilayah atau ketersediaan.

            const product = fetchProductData(productId);

const productDescription = product.description ?? product.longDescription ?? 'No description available';
const productPrice = product.salePrice ?? product.regularPrice ?? 0; // Pertimbangkan untuk menggunakan pemformatan mata uang

console.log(productDescription); // misalnya, 'Dompet Kulit Premium' atau 'Tidak ada deskripsi yang tersedia'
console.log(productPrice); // misalnya, 75 atau 0

            

              
                Copy
              
            
          

Kode ini secara efisien menangani kemungkinan informasi produk yang hilang. Operator `??` menyediakan nilai fallback ketika atribut produk tertentu tidak tersedia.

Contoh 3: Pengaturan Profil Pengguna dan Izin

Dalam aplikasi web, pengaturan profil pengguna atau tingkat izin dapat disimpan dan diakses dengan berbagai cara, mungkin melalui API. Operator `??` memungkinkan penanganan data yang hilang atau tidak lengkap dengan mudah.

            const userData = await fetchUserData(userId);

const userDisplayName = userData.profile?.displayName ?? userData.username ?? 'Guest';
const userTheme = userData.preferences?.theme ?? 'default';

console.log(userDisplayName); // 'JohnDoe' atau 'Guest'
console.log(userTheme); // 'dark' atau 'default'

            

              
                Copy
              
            
          

Di sini, nama tampilan pengguna default ke nama pengguna jika nama tampilan tidak disediakan, dan jika keduanya tidak ada, kode default ke “Guest.” Tema pengguna juga default ke default jika tidak ada.

Contoh 4: Pemrosesan Data Formulir

Saat menangani data formulir, Anda mungkin menerima informasi dari berbagai sumber. Operator `??` dapat digunakan untuk menetapkan nilai default saat bidang formulir tertentu tidak diisi.

            const formData = { /* data yang berpotensi hilang atau tidak lengkap */ };

const userEmail = formData.email ?? ''; // String kosong jika email tidak disediakan
const userCountry = formData.country ?? 'US'; // Default ke US

console.log(userEmail); // user@example.com, atau ''
console.log(userCountry); // US, atau default lainnya

            

              
                Copy
              
            
          

Ini menyederhanakan validasi dan pemrosesan data formulir dengan menyediakan nilai default yang masuk akal.

Teknik dan Pertimbangan Lanjutan

Menggabungkan ?? dengan Operator Lain

Anda dapat menggabungkan `??` dengan operator lain, tetapi ingatlah untuk mempertimbangkan prioritas dan menggunakan tanda kurung untuk kejelasan. Misalnya, Anda mungkin ingin memvalidasi hasil akses properti sebelum memberikan nilai default:

            const age = (user.age >= 0 ? user.age : null) ?? 18; // Pastikan usia tidak negatif, dan default ke 18

            

              
                Copy
              
            
          

Fungsi Nilai Default Kustom

Untuk logika nilai default yang lebih kompleks, Anda dapat menggunakan fungsi sebagai nilai default. Ini memungkinkan perhitungan dinamis dari nilai default berdasarkan variabel atau konteks lain.

            function getDefaultTheme(userRole) {
  if (userRole === 'admin') {
    return 'dark-admin';
  } else {
    return 'light';
  }
}

const userSettings = { /* ... */ };
const userTheme = userSettings.theme ?? getDefaultTheme(userSettings.role); // Tema default tergantung pada peran pengguna

            

              
                Copy
              
            
          

Ini meningkatkan kode yang lebih bersih dengan merangkum logika nilai default.

Menggunakan ?? dengan Optional Chaining (?.)

Optional chaining sering digunakan bersama dengan `??` untuk mengakses properti objek yang berpotensi null atau tidak terdefinisi dengan aman. Ini menghindari kesalahan dan membuat kode jauh lebih kuat:

            const profile = { /* ... */ };
const city = profile?.address?.city ?? 'Unknown'; // Mengakses properti bersarang dengan aman

            

              
                Copy
              
            
          

Jika `profile` atau `profile.address` tidak terdefinisi, ekspresi dengan anggun mengembalikan 'Unknown' alih-alih memunculkan kesalahan.

Manfaat Menggunakan Rantai Operator Nullish Coalescing

• Peningkatan Keterbacaan Kode: Menyederhanakan penugasan nilai default, membuat kode lebih mudah dipahami dan dipelihara.
• Keringkasan: Mengurangi jumlah kode yang dibutuhkan untuk menangani nilai default.
• Pencegahan Kesalahan: Mengurangi risiko kesalahan saat bekerja dengan nilai yang berpotensi tidak terdefinisi atau null, terutama jika dikombinasikan dengan optional chaining.
• Fleksibilitas: Memungkinkan implementasi mudah logika nilai default yang kompleks melalui perantaian.
• Pengurangan Boilerplate: Menghindari kebutuhan akan pernyataan `if/else` yang panjang dalam banyak kasus.

Kesimpulan

Operator nullish coalescing JavaScript (??) adalah alat yang berharga untuk pengembangan JavaScript modern, menawarkan cara yang lebih bersih dan ringkas untuk menangani nilai default. Dengan menguasai teknik perantaian dan memahami praktik terbaik, Anda dapat menulis kode JavaScript yang lebih kuat, mudah dibaca, dan mudah dipelihara untuk aplikasi di seluruh dunia. Ingatlah untuk mempertimbangkan konteks aplikasi Anda dan pilih pendekatan yang paling menyeimbangkan keringkasan dan kejelasan.

Gunakan informasi ini untuk meningkatkan keterampilan pengembangan JavaScript Anda dan menulis kode yang lebih bersih dan lebih mudah dipelihara untuk aplikasi web Anda. Berlatih, bereksperimen, dan tetaplah ingin tahu! Selamat membuat kode!