Nullish Coalescing JavaScript: Penetapan Nilai Default vs. Penanganan Nilai Falsy

Developer JavaScript sering kali perlu menetapkan nilai default ke variabel ketika nilai asli hilang atau tidak valid. Secara tradisional, operator OR logis (||) digunakan untuk tujuan ini. Namun, operator nullish coalescing (??), yang diperkenalkan dalam ECMAScript 2020, menyediakan solusi yang lebih tepat dan andal, terutama saat berhadapan dengan nilai-nilai falsy. Panduan komprehensif ini membahas nuansa nullish coalescing, membandingkannya dengan operator OR logis, dan menunjukkan penerapannya dalam berbagai skenario.

Memahami Nullish Coalescing (??)

Operator nullish coalescing (??) mengembalikan operan sisi kanannya ketika operan sisi kirinya adalah null atau undefined. Jika tidak, ia akan mengembalikan operan sisi kirinya. Dalam istilah yang lebih sederhana, ia hanya memberikan nilai default ketika variabel secara eksplisit null atau undefined.

Sintaks:

leftOperand ?? rightOperand

Contoh:

            const name = null ?? "Guest";
console.log(name); // Output: "Guest"

const age = undefined ?? 25;
console.log(age); // Output: 25

const score = 0 ?? 100;
console.log(score); // Output: 0

            

              
                Copy
              
            
          

Membedakan Nullish Coalescing (??) dari Logical OR (||)

Operator OR logis (||) juga menyediakan cara untuk menetapkan nilai default. Namun, ia memperlakukan nilai falsy apa pun (false, 0, '', NaN, null, undefined) sebagai setara dengan null atau undefined, yang berpotensi menyebabkan perilaku yang tidak terduga.

Contoh Logical OR:

            const quantity = 0 || 10;
console.log(quantity); // Output: 10 (tidak terduga, karena 0 adalah falsy)

const message = '' || "No message";
console.log(message); // Output: "No message" (tidak terduga, karena '' adalah falsy)

            

              
                Copy
              
            
          

Contoh Nullish Coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (benar, karena 0 bukan null atau undefined)

const message = '' ?? "No message";
console.log(message); // Output: "" (benar, karena '' bukan null atau undefined)

            

              
                Copy
              
            
          

Seperti yang Anda lihat, operator nullish coalescing hanya terpicu ketika sisi kiri secara eksplisit null atau undefined, dengan tetap mempertahankan nilai falsy seperti 0 dan ''.

Kasus Penggunaan untuk Nullish Coalescing

Nullish coalescing sangat berguna dalam skenario di mana Anda perlu membedakan antara nilai yang hilang (null atau undefined) dan nilai falsy yang valid.

1. Menangani Opsi Konfigurasi

Saat berurusan dengan opsi konfigurasi, Anda mungkin ingin memberikan nilai default untuk pengaturan yang belum didefinisikan secara eksplisit. Menggunakan ?? memastikan bahwa nilai falsy yang valid (misalnya, 0 untuk nilai timeout) tidak secara tidak sengaja diganti dengan nilai default.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Gunakan 0 jika timeout diatur secara eksplisit, jika tidak, default ke 5000
const maxRetries = config.maxRetries ?? 3; // Gunakan 3 jika maxRetries adalah null atau undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; //Gunakan endpoint default jika apiEndpoint adalah null atau undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Output: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Bekerja dengan Respons API

Respons API sering kali berisi field yang mungkin hilang atau memiliki nilai falsy yang ditetapkan secara eksplisit. Nullish coalescing memungkinkan Anda menangani skenario ini dengan baik, memastikan bahwa Anda hanya memberikan nilai default ketika sebuah field benar-benar hilang.

Contoh: Respons API sederhana yang merepresentasikan pengguna:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; //Default ke US jika null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; //Default ke true jika null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; //Gambar default jika null/undefined

console.log(`Name: ${displayName}`); // Output: Name: Alice
console.log(`Age: ${userAge}`); // Output: Age: 30
console.log(`Country: ${country}`); // Output: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Output: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Output: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

Dalam contoh ini, kita menggunakan default "US" hanya jika `countryCode` secara eksplisit null atau undefined. Jika API mengembalikan `countryCode: ""`, maka string kosong akan dipertahankan, mencerminkan kode negara pengguna yang sebenarnya (meskipun mungkin hilang).

3. Menyediakan Nilai Fallback dalam Fungsi

Saat menulis fungsi yang menerima parameter opsional, nullish coalescing dapat digunakan untuk memberikan nilai default untuk argumen yang hilang.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Output: Good morning, Bob!
console.log(greet(null, undefined)); // Output: Hello, Guest!
console.log(greet("", "")); // Output: , !
console.log(greet("", null)); // Output: Hello, !

            

              
                Copy
              
            
          

Pendekatan ini memastikan bahwa fungsi selalu memiliki nilai untuk diolah, bahkan jika pemanggil tidak menyediakan semua argumen.

4. Internasionalisasi dan Lokalisasi (i18n/l10n)

Saat bekerja dengan aplikasi yang diinternasionalkan, Anda sering kali memiliki terjemahan yang berbeda untuk berbagai string. Nullish coalescing dapat digunakan untuk memberikan terjemahan default jika terjemahan tertentu hilang untuk bahasa tertentu.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Terjemahan hilang untuk kunci: ${key}`;
}

console.log(translate("greeting", "fr")); // Output: Bonjour
console.log(translate("farewell", "fr")); // Output: Terjemahan hilang untuk kunci: farewell
console.log(translate("greeting", "de")); // Output: Hello (menggunakan fallback ke Bahasa Inggris)

            

              
                Copy
              
            
          

Dalam contoh ini, kita pertama-tama mencoba mencari terjemahan untuk bahasa dan kunci yang ditentukan. Jika itu hilang, kita beralih ke terjemahan Bahasa Inggris. Jika bahkan terjemahan Bahasa Inggris hilang, kita mengembalikan pesan yang menunjukkan bahwa terjemahan tersebut hilang.

5. Menangani Input Pengguna dalam Formulir

Saat memproses input pengguna dari formulir, Anda mungkin menemukan kasus di mana field tertentu dibiarkan kosong atau berisi string kosong. Menggunakan operator nullish coalescing bersama dengan operator optional chaining (?.) bisa sangat efektif saat berhadapan dengan input pengguna yang bersarang dalam (deeply nested).

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (karena string kosong adalah falsy)
console.log(safeUserName); // "" (karena safeUserName secara eksplisit memeriksa null atau undefined)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Precedensi Operator dan Menggabungkan dengan Operator Lain

Operator nullish coalescing memiliki presedensi operator yang relatif rendah. Ini berarti Anda sering kali perlu menggunakan tanda kurung untuk memastikan bahwa ia dievaluasi dengan benar, terutama ketika digabungkan dengan operator lain seperti AND logis (&&) atau OR logis (||).

Catatan Penting: Anda tidak dapat secara langsung menggabungkan ?? dengan && atau || tanpa menggunakan tanda kurung. Hal ini untuk menghindari ambiguitas dalam urutan operasi.

Penggunaan yang Benar:

            const value = (someValue ?? 10) && true;
console.log(value); //Output: true jika someValue bukan null atau undefined, jika tidak maka false

const result = (null ?? 5) + 10; // Output: 15

            

              
                Copy
              
            
          

Penggunaan yang Salah (Akan menghasilkan SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Kompatibilitas Browser

Operator nullish coalescing (??) adalah tambahan yang relatif baru untuk JavaScript. Pastikan browser target Anda mendukungnya. Sebagian besar browser modern mendukungnya, tetapi browser yang lebih lama mungkin memerlukan transpilasi menggunakan alat seperti Babel.

Untuk memeriksa kompatibilitas browser, Anda dapat merujuk ke sumber daya seperti MDN Web Docs.

Praktik Terbaik untuk Menggunakan Nullish Coalescing

• Gunakan saat Anda perlu membedakan antara nilai yang hilang (null atau undefined) dan nilai falsy yang valid.
• Selalu gunakan tanda kurung saat menggabungkan ?? dengan && atau || untuk menghindari kesalahan sintaks dan memastikan evaluasi yang benar.
• Perhatikan kompatibilitas browser dan pertimbangkan transpilasi jika perlu.
• Dokumentasikan penggunaan ?? Anda dengan jelas untuk meningkatkan keterbacaan kode.
• Uji kode Anda secara menyeluruh untuk memastikan bahwa nilai default ditetapkan dengan benar dalam semua skenario.

Kesimpulan

Operator nullish coalescing (??) adalah tambahan yang kuat dan berharga untuk bahasa JavaScript. Ini menyediakan cara yang lebih tepat dan andal untuk menetapkan nilai default dibandingkan dengan operator OR logis (||) tradisional, terutama saat berhadapan dengan nilai falsy. Dengan memahami nuansa dan praktik terbaiknya, Anda dapat menulis kode JavaScript yang lebih bersih, lebih kuat, dan lebih mudah dipelihara. Pertimbangkan untuk mengadopsi ?? dalam proyek Anda untuk meningkatkan kejelasan dan akurasi penetapan nilai default Anda. Ingatlah untuk menguji kode Anda secara menyeluruh di berbagai browser dan pertimbangkan transpilasi untuk lingkungan yang lebih lama.

Panduan ini memberikan gambaran yang komprehensif. Bereksperimenlah dengan ?? dalam konteks yang berbeda untuk memahami sepenuhnya kemampuan dan keterbatasannya, dan terus sempurnakan pemahaman Anda melalui aplikasi praktis.