JavaScript Nullish Coalescing: Menguasai Penetapan Nilai Default

Developer JavaScript sering kali perlu menetapkan nilai default ketika sebuah variabel bernilai null atau undefined. Sebelum ES2020, operator OR logis (||) adalah metode utama untuk mencapai ini. Namun, pengenalan operator nullish coalescing (??) memberikan solusi yang lebih presisi dan andal. Panduan komprehensif ini menjelajahi nuansa nullish coalescing, manfaatnya, dan contoh-contoh praktis untuk membantu Anda menguasai fitur yang kuat ini.

Memahami Nullish Coalescing (??)

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

Sintaksis:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Perbedaan Kunci dari OR Logis (||):

Operator OR logis (||) mengembalikan operan sisi kanan jika operan sisi kiri adalah nilai falsy apa pun (null, undefined, 0, '', NaN, false). Hal ini dapat menyebabkan perilaku yang tidak terduga ketika Anda hanya bermaksud menangani nilai null atau undefined.

Mengapa Menggunakan Nullish Coalescing?

Nullish coalescing menawarkan beberapa keuntungan dibandingkan operator OR logis tradisional:

• Presisi: Operator ini secara spesifik menargetkan null dan undefined, menghindari penetapan default yang tidak diinginkan untuk nilai-nilai falsy lainnya.
• Keterbacaan: Ini dengan jelas mengomunikasikan niat untuk hanya menangani kasus null atau undefined, meningkatkan keterpeliharaan kode.
• Keamanan: Ini mencegah perilaku tak terduga yang disebabkan oleh nilai-nilai falsy yang secara tidak sengaja memicu penetapan default.

Contoh-contoh Praktis

1. Penetapan Nilai Default Dasar

Menetapkan nilai default ke variabel jika nilainya null atau undefined:

            const userName = user.name ?? 'Guest';
console.log(userName); // Output: 'Guest' jika user.name null atau undefined, jika tidak maka nama pengguna yang sebenarnya
            

              
                Copy
              
            
          

2. Menangani Respons API

Mengambil data dari API dan memberikan nilai default jika respons tidak memiliki properti tertentu:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unknown City';
console.log(cityName); // Output: 'Unknown City'
            

              
                Copy
              
            
          

3. Konfigurasi Default

Mengatur opsi konfigurasi default untuk sebuah komponen atau modul:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Output: 'normal' jika userSettings.animationSpeed null atau undefined
            

              
                Copy
              
            
          

4. Menangani Preferensi Pengguna

Mengizinkan pengguna untuk menyesuaikan pengaturan dan memberikan nilai default jika mereka belum menentukan preferensi:

            let userVolume = localStorage.getItem('volume'); //mungkin mengembalikan null
let volume = userVolume ?? 0.5; // atur volume default 0.5

console.log(`Volume pengguna adalah ${volume}`);
            

              
                Copy
              
            
          

5. Merangkai Nullish Coalescing

Anda dapat merangkai operator nullish coalescing untuk menyediakan serangkaian nilai default:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Output: Nilai non-null/undefined pertama dari rangkaian
            

              
                Copy
              
            
          

6. Bekerja dengan Fungsi

Menetapkan fungsi default jika fungsi yang diberikan adalah null atau undefined:

            const logMessage = logger.log ?? (() => console.log('Tidak ada logger yang tersedia.'));
logMessage('This is a test message.');
            

              
                Copy
              
            
          

Nullish Coalescing dengan Optional Chaining

Operator nullish coalescing berpasangan sempurna dengan optional chaining (?.), memungkinkan Anda untuk mengakses properti bersarang dengan aman tanpa menyebabkan kesalahan jika properti perantara adalah null atau undefined.

Contoh:

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

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

              
                Copy
              
            
          

Dalam contoh ini, jika salah satu properti (user, profile, address, atau city) adalah null atau undefined, optional chaining akan melakukan short-circuit, dan operator nullish coalescing akan mengembalikan nilai default 'Unknown City'.

Kasus Penggunaan Umum dalam Aplikasi Global

Pertimbangkan skenario internasional berikut di mana nullish coalescing bisa sangat berguna:

• Lokalisasi: Menyediakan terjemahan default berdasarkan lokal pengguna. Jika terjemahan tidak tersedia untuk bahasa tertentu, fallback ke bahasa default (misalnya, Bahasa Inggris) dapat diimplementasikan.
• Pemformatan Mata Uang: Menampilkan nilai mata uang dengan format yang sesuai berdasarkan wilayah pengguna. Jika pengaturan regional tidak tersedia, format mata uang default dapat diterapkan.
• Pemformatan Tanggal dan Waktu: Memformat tanggal dan waktu sesuai dengan lokal pengguna. Jika informasi lokal tidak ada, format tanggal dan waktu default dapat digunakan.
• Pemformatan Alamat: Menampilkan informasi alamat dalam format yang benar untuk berbagai negara. Jika negara tidak ditentukan, format alamat default dapat digunakan.

Contoh: Fallback Lokalisasi

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hello!";
console.log(translatedText);
            

              
                Copy
              
            
          

Praktik Terbaik

• Gunakan ?? untuk pemeriksaan null/undefined: Utamakan ?? daripada || ketika Anda secara spesifik ingin menangani nilai null atau undefined.
• Kombinasikan dengan optional chaining: Gunakan ?? bersamaan dengan optional chaining (?.) untuk mengakses properti bersarang dengan aman.
• Hindari kompleksitas yang tidak perlu: Jaga agar kode Anda bersih dan mudah dibaca dengan menggunakan ?? hanya ketika memberikan manfaat yang jelas.
• Pertimbangkan kompatibilitas browser: Pastikan browser target Anda mendukung operator nullish coalescing (ES2020). Jika Anda perlu mendukung browser lama, gunakan transpiler seperti Babel.
• Tinjauan Kode (Code Review): Dorong tinjauan kode untuk memastikan penggunaan operator nullish coalescing yang benar, terutama dalam proyek internasional besar di mana salah tafsir nilai falsy dapat memiliki implikasi signifikan.

Kompatibilitas Browser

Operator nullish coalescing adalah fitur yang relatif baru di JavaScript (ES2020). Pastikan browser target Anda mendukungnya, atau gunakan transpiler seperti Babel untuk memberikan kompatibilitas bagi browser lama. Pertimbangkan demografi penggunaan aplikasi Anda. Sebagai contoh, proyek yang ditargetkan untuk pengguna di negara-negara dengan adopsi teknologi yang lebih lambat mungkin memerlukan transpilation lebih dari proyek yang ditujukan untuk pengguna di wilayah yang maju secara teknologi.

Jebakan yang Harus Dihindari

• Mencampur ?? dan || dengan &&: Ketika menggabungkan operator nullish coalescing (??) atau operator OR logis (||) dengan operator AND logis (&&) tanpa tanda kurung eksplisit, JavaScript akan memberikan kesalahan sintaksis. Selalu gunakan tanda kurung untuk memperjelas urutan operasi.
• Membingungkan ?? dengan ||: Ingat perbedaan krusialnya: ?? hanya memeriksa null dan undefined, sedangkan || memeriksa nilai falsy apa pun.

Contoh Jebakan 1 (Kesalahan Sintaksis):

            // Ini akan memberikan SyntaxError:
// const value = a ?? b && c;

// Cara yang benar (menggunakan tanda kurung):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternatif untuk Nullish Coalescing (untuk browser lama)

Jika Anda perlu mendukung browser lama yang tidak mendukung operator nullish coalescing, Anda dapat menggunakan alternatif berikut:

• Operator OR logis (||): Seperti yang disebutkan sebelumnya, ini adalah pendekatan tradisional. Namun, waspadai masalah nilai falsy.
• Operator ternary: Cara yang lebih panjang namun eksplisit untuk memeriksa null atau undefined.

Contoh: Operator Ternary

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Kesimpulan

Operator nullish coalescing (??) adalah tambahan berharga untuk bahasa JavaScript, menyediakan cara yang lebih presisi dan mudah dibaca untuk menangani penetapan nilai default saat berhadapan dengan nilai null atau undefined. Dengan memahami manfaat dan nuansanya, Anda dapat menulis kode yang lebih bersih, lebih aman, dan lebih mudah dipelihara. Menggabungkannya dengan optional chaining semakin meningkatkan kemampuan Anda untuk menangani struktur data yang kompleks dengan baik. Saat Anda membangun aplikasi untuk audiens global, pertimbangkan implikasi nilai null dan undefined dalam konteks budaya dan regional yang berbeda, dan manfaatkan nullish coalescing untuk memberikan pengalaman yang konsisten dan ramah pengguna untuk semua orang.