Operator Penggabungan Nullish di JavaScript

Artikel ini menjelaskan Operator Penggabungan Nullish di JavaScript.

YouTube Video

Operator Penggabungan Nullish di JavaScript

Di JavaScript, Operator Penggabungan Nullish (??) mengevaluasi apakah sebuah nilai adalah null atau undefined dan mengembalikan nilai default yang berbeda jika demikian. Operator ini mirip dengan operator logika OR (||) yang umum digunakan, tetapi berbeda karena fokusnya pada null dan undefined.

Operator logika OR mengembalikan nilai sebelah kanan jika nilai sebelah kiri adalah falsy, sedangkan operator nullish coalescing hanya mengembalikan nilai sebelah kanan ketika nilai sebelah kiri adalah null atau undefined. Fitur ini memungkinkan penanganan yang tepat untuk nilai-nilai seperti 0 dan string kosong ("").

Sintaks Dasar

1let result = value ?? defaultValue;

• value adalah nilai yang sedang diperiksa.
• defaultValue adalah nilai yang dikembalikan ketika value adalah null atau undefined.

Contoh Penggunaan Operator Penggabungan Nullish

Contoh berikut menerapkan proses untuk mengembalikan nilai default jika null atau undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

Dalam kode ini, karena name adalah null, nilai dari defaultName, "Anonymous", dikembalikan. Jika name adalah nilai selain null atau undefined, nilai tersebut akan dikembalikan.

Perbedaan dengan Operator Logika OR

Operator nullish coalescing mirip dengan operator logika OR tetapi memiliki perbedaan penting. Operator logika OR memeriksa nilai 'falsy' (false, 0, NaN, "", null, undefined, dll.), sedangkan operator nullish coalescing hanya memeriksa null dan undefined.

Contoh Operator Logika OR:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Contoh Operator Penggabungan Nullish:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

Dengan cara ini, operator nullish coalescing mempertahankan nilai yang valid seperti 0 dan string kosong ("") dan hanya mengembalikan nilai default saat diperlukan. Karena operator logika OR menganggap nilai-nilai ini sebagai falsy dan mengembalikan nilai default, penting untuk memilih operator yang tepat tergantung pada kasus penggunaannya.

Contoh Ketika Digunakan dalam Kombinasi:

Operator nullish coalescing juga dapat digabungkan dengan operator logika lainnya, tetapi kehati-hatian diperlukan saat melakukannya.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Misalnya, saat menggunakannya bersama dengan operator logika OR (||) atau operator logika AND (&&), kurung harus digunakan untuk memperjelas urutan operasi.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• Dalam contoh ini, a ?? b dievaluasi terlebih dahulu, dan karena a adalah null, maka b akan dikembalikan. Kemudian, b || c dievaluasi, dan karena b bernilai salah, maka c akhirnya dikembalikan.

Kasus di mana operator nullish coalescing berguna

Berikut ini adalah kasus-kasus di mana operator nullish coalescing berguna.

• Nilai Default untuk Formulir Ini dapat digunakan dalam skenario di mana nilai default ditetapkan untuk bidang input formulir ketika pengguna tidak memasukkan apa pun.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Penanganan Respons API Pemrosesan fallback dapat dilakukan ketika nilai dalam respons dari API adalah null atau undefined.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Ringkasan

Operator nullish coalescing (??) sangat berguna untuk menginisialisasi data dan menangani respons API, karena mengembalikan nilai default ketika menemukan null atau undefined. Secara khusus, ini adalah pilihan yang lebih baik daripada operator logika OR tradisional (||) ketika Anda ingin menangani nilai falsy seperti 0 atau string kosong dengan benar.

Tentang Operator Penugasan Nullish Coalescing (??=)

Ikhtisar

Dalam JavaScript, Operator Penugasan Nullish Coalescing ??= telah diperkenalkan untuk secara efisien menetapkan nilai baru pada variabel yang bernilai null atau undefined. Operator ini adalah cara pintas yang nyaman untuk menetapkan nilai pada variabel hanya jika nilainya null atau undefined.

Penggunaan Dasar

Operator penugasan nullish coalescing bekerja sebagai berikut:.

• Jika sebuah variabel adalah null atau undefined, maka nilai di sisi kanan akan diberikan.
• Jika variabel tersebut bukan null atau undefined, maka tidak ada tindakan yang dilakukan dan nilai saat ini tetap dipertahankan.

Sintaksis

Sintaks dasar operator penugasan nullish coalescing adalah sebagai berikut:.

1x ??= y;

• y akan diberikan kepada x jika x bernilai null atau undefined.
• Jika x sudah memiliki nilai (bukan null atau undefined), maka nilai x tidak akan berubah.

Contoh

Mari kita lihat contoh dasar dari operator penugasan nullish coalescing.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• Dalam kode ini, karena userName bernilai null, nilai dari defaultName akan diberikan.

Berikutnya, ini adalah contoh di mana nilainya bukan null maupun undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• Dalam kasus ini, karena "Alice" sudah diatur untuk userName, maka tidak ada penugasan yang dilakukan.

Perbandingan dengan operator penugasan lainnya

JavaScript juga memiliki beberapa operator penugasan lainnya. Secara khusus, perbedaan dengan operator penugasan logika OR (||=) sangat penting.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

Operator penugasan logika OR menetapkan nilai bahkan ketika menemui nilai falsy seperti false, 0, atau string kosong (""), sedangkan operator penugasan nullish coalescing hanya bekerja ketika nilainya adalah null atau undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Karena operator penugasan nullish coalescing hanya bekerja pada null atau undefined, ini sangat berguna ketika Anda ingin mempertahankan nilai seperti 0 atau false.

Kasus penggunaan di dunia nyata

Sebuah kasus penggunaan nyata untuk operator penugasan null coalescing dapat berupa sebagai berikut:.

1. Mengatur nilai default

   Ini berguna untuk mengatur nilai default ketika masukan pengguna atau respons API bisa berupa null atau undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Menangani parameter opsional

   Ini juga dapat digunakan untuk melakukan tindakan default ketika argumen fungsi tidak ditentukan.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Ringkasan

Operator penugasan nullish coalescing (??=) hanya menetapkan nilai ketika nilai sebelah kiri adalah null atau undefined, membuat kode lebih ringkas dan membantu mencegah penugasan yang tidak diinginkan. Terutama saat menangani nilai "falsy" seperti 0 atau false, ini bisa lebih sesuai dibandingkan operator logika OR tradisional (||=).

Dengan menggunakan operator ini, Anda dapat membuat kode yang lebih kuat dan mudah dibaca.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video