JavaScript Nullish Coalescing: Menguasai Penetapan Nilai Default

Dalam pengembangan JavaScript modern, menangani nilai null dan undefined dengan baik sangat penting untuk menulis kode yang kuat dan dapat diprediksi. Operator nullish coalescing (??), yang diperkenalkan di ES2020, menyediakan cara yang ringkas dan kuat untuk menetapkan nilai default secara spesifik ketika sebuah variabel bernilai null atau undefined. Postingan blog ini mengeksplorasi nuansa operator nullish coalescing, membandingkannya dengan operator OR (||), dan mengilustrasikan manfaatnya dengan contoh praktis yang dapat diterapkan dalam berbagai skenario pengkodean.

Memahami Nilai Nullish: null dan undefined

Sebelum mendalami operator nullish coalescing, penting untuk memahami perbedaan antara null dan undefined di JavaScript. Keduanya mewakili ketiadaan nilai, tetapi muncul dalam keadaan yang berbeda.

• null: Mewakili ketiadaan nilai yang disengaja. Ini biasanya ditetapkan oleh programmer untuk menunjukkan bahwa sebuah variabel saat ini tidak memiliki nilai atau bahwa sebuah properti hilang.
• undefined: Menunjukkan bahwa sebuah variabel telah dideklarasikan tetapi belum diberi nilai. Ini juga bisa terjadi saat mengakses properti objek yang tidak ada atau ketika sebuah fungsi tidak secara eksplisit mengembalikan nilai.

Memahami perbedaan ini sangat penting karena operator nullish coalescing secara spesifik menargetkan kedua nilai ini.

Memperkenalkan Operator Nullish Coalescing (??)

Operator nullish coalescing (??) adalah operator logika yang mengembalikan operan sisi kanannya ketika operan sisi kirinya adalah null atau undefined. Jika tidak, ia akan mengembalikan operan sisi kirinya. Sintaksisnya sederhana:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

Dalam ekspresi ini, jika value adalah null atau undefined, result akan diberi nilai defaultValue. Jika tidak, result akan diberi nilai value.

Contoh Praktis Nullish Coalescing

Mari kita ilustrasikan penggunaan operator nullish coalescing dengan beberapa contoh praktis:

1. Mengatur Preferensi Pengguna Default

Bayangkan Anda sedang membangun aplikasi web di mana pengguna dapat menyesuaikan preferensi mereka. Anda mungkin menyimpan preferensi ini dalam objek profil pengguna. Jika pengguna belum secara eksplisit mengatur preferensi, Anda dapat menggunakan operator nullish coalescing untuk memberikan nilai default.

            const userProfile = {
  username: "johnDoe",
  theme: null // Pengguna belum memilih tema
};

const theme = userProfile.theme ?? "light"; // Default ke tema terang

console.log(theme); // Output: "light"
            

              
                Copy
              
            
          

Dalam contoh ini, karena userProfile.theme adalah null, variabel theme diberi nilai default "light". Jika pengguna telah mengatur tema, misalnya, userProfile.theme = "dark";, maka variabel theme akan diberi nilai "dark".

2. Menangani Data API yang Hilang

Saat mengambil data dari API, sering kali kita menemukan data yang hilang atau tidak lengkap. Operator nullish coalescing dapat digunakan untuk memberikan nilai default untuk properti yang hilang.

            const apiResponse = {
  data: {
    productName: "Example Product",
    description: undefined // Tidak ada deskripsi yang disediakan
  }
};

const description = apiResponse.data.description ?? "No description available.";

console.log(description); // Output: "No description available."
            

              
                Copy
              
            
          

Di sini, apiResponse.data.description adalah undefined, sehingga variabel description diberi pesan default "No description available."

3. Mengonfigurasi Pengaturan Aplikasi

Dalam file konfigurasi, pengaturan tertentu mungkin bersifat opsional. Anda dapat menggunakan operator nullish coalescing untuk memastikan aplikasi Anda menggunakan nilai default yang wajar jika pengaturan ini tidak didefinisikan secara eksplisit.

            const config = {
  apiUrl: "https://example.com/api",
  timeout: null // Tidak ada timeout yang ditentukan
};

const timeout = config.timeout ?? 5000; // Timeout default 5000ms

console.log(timeout); // Output: 5000
            

              
                Copy
              
            
          

Dalam kasus ini, karena config.timeout adalah null, variabel timeout diatur ke nilai default 5000 milidetik.

Nullish Coalescing vs. Operator OR (||): Perbedaan Penting

Penting untuk memahami perbedaan antara operator nullish coalescing (??) dan operator OR (||). Meskipun keduanya dapat digunakan untuk penetapan nilai default, mereka berperilaku berbeda saat menghadapi nilai falsy.

Operator OR (||) mengembalikan operan sisi kanannya ketika operan sisi kirinya adalah nilai falsy apa pun. Nilai falsy di JavaScript meliputi:

• null
• undefined
• 0 (nol)
• NaN (Bukan Angka)
• '' (string kosong)
• false

Operator nullish coalescing (??) *hanya* mengembalikan operan sisi kanannya ketika operan sisi kirinya adalah null atau undefined. Operator ini tidak mempertimbangkan nilai falsy lainnya.

Mengilustrasikan Perbedaan dengan Contoh

Mari kita pertimbangkan skenario di mana kita ingin menetapkan nilai default ke variabel yang mungkin bernilai nol.

            const quantity = 0;

// Menggunakan operator OR
const quantityOR = quantity || 1; // Default ke 1 jika kuantitas adalah falsy

console.log(quantityOR); // Output: 1 (salah, karena 0 adalah falsy)

// Menggunakan operator nullish coalescing
const quantityNullish = quantity ?? 1; // Default ke 1 hanya jika kuantitas null atau undefined

console.log(quantityNullish); // Output: 0 (benar, karena 0 bukan null atau undefined)
            

              
                Copy
              
            
          

Dalam contoh ini, operator OR secara keliru menetapkan nilai default 1 karena 0 adalah nilai falsy. Namun, operator nullish coalescing dengan benar mempertahankan nilai 0 karena hanya memeriksa null atau undefined.

Skenario umum lainnya adalah menangani string kosong. Misalkan Anda ingin menampilkan nama pengguna, tetapi jika nama tidak diberikan, Anda ingin menampilkan pesan default.

            const userName = ""; // Pengguna belum memberikan nama

// Menggunakan operator OR
const displayNameOR = userName || "Guest";

console.log(displayNameOR); // Output: "Guest" (salah, karena "" adalah falsy)

// Menggunakan operator nullish coalescing
const displayNameNullish = userName ?? "Guest";

console.log(displayNameNullish); // Output: "" (salah, tetapi lebih mendekati perilaku yang diinginkan)
            

              
                Copy
              
            
          

Meskipun operator nullish coalescing tidak sepenuhnya menyelesaikan kasus string kosong (karena masih mengembalikan string kosong), ini menyoroti pentingnya memahami perbedaan antara ?? dan ||. Jika Anda *secara spesifik* ingin memperlakukan string kosong setara dengan null/undefined, Anda mungkin memerlukan pemeriksaan eksplisit: const displayName = userName === null || userName === undefined || userName === '' ? 'Guest' : userName;. Namun, operator ?? mencegah perilaku tak terduga dengan nilai-nilai seperti `0` atau `false`.

Praktik Terbaik dan Pertimbangan

Saat menggunakan operator nullish coalescing, pertimbangkan praktik terbaik berikut:

• Gunakan saat Anda secara spesifik ingin memberikan nilai default untuk null atau undefined. Hindari menggunakannya sebagai operator penetapan nilai default untuk tujuan umum.
• Waspadai nilai-nilai falsy. Pahami perbedaan antara ?? dan ||, dan pilih operator yang paling sesuai dengan kebutuhan spesifik Anda.
• Kombinasikan dengan optional chaining (?.) untuk akses properti yang aman. Ini memungkinkan Anda mengakses properti bersarang tanpa menyebabkan kesalahan jika properti perantara adalah null atau undefined.

Menggabungkan Nullish Coalescing dengan Optional Chaining

Optional chaining (?.) memungkinkan Anda mengakses properti objek dengan aman, bahkan jika beberapa properti perantara adalah null atau undefined. Ketika dikombinasikan dengan operator nullish coalescing, Anda dapat memberikan nilai default untuk properti yang mungkin tidak ada.

            const user = {
  profile: {
    address: {
      city: null
    }
  }
};

const city = user.profile?.address?.city ?? "Unknown City";

console.log(city); // Output: "Unknown City"
            

              
                Copy
              
            
          

Dalam contoh ini, jika user.profile atau user.profile.address adalah null atau undefined, optional chaining akan mencegah kesalahan, dan operator nullish coalescing akan menetapkan nilai default "Unknown City".

Aplikasi Global: Beragam Skenario Lintas Budaya

Operator nullish coalescing dapat diterapkan secara universal. Namun, pertimbangkan bagaimana data dikumpulkan dan direpresentasikan di berbagai budaya saat menentukan nilai default. Contohnya:

• Format Angka: Meskipun format angka default mungkin `0.00` di beberapa wilayah, wilayah lain menggunakan `,` sebagai pemisah desimal. Pastikan nilai default Anda selaras dengan lokal pengguna yang diharapkan.
• Format Tanggal: Bidang tanggal yang dibiarkan null mungkin default ke tanggal saat ini. Waspadai format tanggal umum yang digunakan oleh pengguna internasional Anda (misalnya, MM/DD/YYYY vs. DD/MM/YYYY).
• Bidang Alamat: Struktur alamat sangat bervariasi secara global. Jika bidang alamat adalah null, memberikan default seperti "N/A" mungkin sesuai. Hindari mengisi otomatis dengan informasi regional yang berpotensi salah.
• Preferensi Bahasa: Jika preferensi bahasa pengguna tidak ada, default ke bahasa yang dipahami secara luas seperti bahasa Inggris atau gunakan deteksi lokal browser (dengan izin pengguna).

Pertimbangan Aksesibilitas

Saat menggunakan nilai default, pastikan aplikasi Anda tetap dapat diakses oleh pengguna dengan disabilitas:

• Komunikasi yang Jelas: Jika nilai default digunakan, tunjukkan ini dengan jelas kepada pengguna, terutama di bidang formulir. Gunakan label dan atribut ARIA untuk memberikan konteks.
• Navigasi Keyboard: Pastikan pengguna dapat dengan mudah menavigasi dan mengubah nilai default menggunakan keyboard.
• Kompatibilitas Pembaca Layar: Uji aplikasi Anda dengan pembaca layar untuk memastikan nilai default diumumkan dengan benar dan dapat diganti.

Kesimpulan

Operator nullish coalescing (??) adalah tambahan berharga untuk bahasa JavaScript, menyediakan cara yang ringkas dan andal untuk menetapkan nilai default secara spesifik ketika sebuah variabel adalah null atau undefined. Dengan memahami nuansanya dan membandingkannya dengan operator OR (||), Anda dapat menulis kode yang lebih kuat, dapat diprediksi, dan mudah dipelihara. Ingatlah untuk mempertimbangkan praktik terbaik, menggabungkannya dengan optional chaining untuk akses properti yang aman, dan menyesuaikan nilai default Anda dengan beragam kebutuhan audiens global. Menguasai operator ini tidak diragukan lagi akan meningkatkan keterampilan pengembangan JavaScript Anda dan berkontribusi untuk menciptakan pengalaman perangkat lunak yang lebih baik bagi pengguna di seluruh dunia.