Operator Penggabungan Nullish dalam JavaScript

Artikel ini menerangkan tentang Operator Penggabungan Nullish dalam JavaScript.

YouTube Video

Operator Penggabungan Nullish dalam JavaScript

Dalam JavaScript, Operator Penggabungan Nullish (??) menilai sama ada satu nilai adalah null atau undefined dan mengembalikan nilai lalai yang berbeza jika ya. Ia serupa dengan operator LOGICAL OR (||) yang sering digunakan, tetapi ia berbeza kerana ia khusus untuk null dan undefined.

Operator logik OR mengembalikan nilai kanan jika nilai kiri adalah falsy, manakala operator nullish coalescing hanya mengembalikan nilai kanan apabila nilai kiri adalah null atau undefined. Ciri ini membolehkan pengendalian nilai seperti 0 dan rentetan kosong ("") dengan betul.

Sintaks Asas

1let result = value ?? defaultValue;

• value adalah nilai yang sedang diperiksa.
• defaultValue adalah nilai yang dipulangkan apabila value adalah null atau undefined.

Contoh Penggunaan Operator Penggabungan Nullish

Contoh berikut melaksanakan proses untuk mengembalikan nilai lalai sekiranya 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 kod ini, kerana name adalah null, nilai defaultName, "Anonymous", dikembalikan. Jika name adalah nilai selain daripada null atau undefined, nilai itu dikembalikan.

Perbezaan dengan Operator LOGICAL OR

Operator nullish coalescing adalah serupa dengan operator logik OR tetapi mempunyai perbezaan penting. Operator logik OR memeriksa nilai 'falsy' (false, 0, NaN, "", null, undefined, dll.), manakala operator nullish coalescing hanya memeriksa untuk null dan undefined sahaja.

Contoh Operator LOGICAL 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 mengekalkan nilai-nilai yang sah seperti 0 dan rentetan kosong ("") dan hanya memulangkan nilai lalai apabila perlu. Memandangkan operator logik OR menganggap nilai-nilai ini sebagai falsy dan memulangkan nilai lalai, adalah penting untuk memilih operator yang sesuai bergantung pada kes penggunaan.

Contoh Apabila Digunakan Secara Gabungan:

Operator nullish coalescing juga boleh digabungkan dengan operator logik lain, tetapi perlu berhati-hati apabila melakukannya.

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

• Sebagai contoh, apabila menggunakannya bersama dengan operator logik OR (||) atau operator logik AND (&&), kurungan harus digunakan untuk menjelaskan susunan 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 dinilai terlebih dahulu, dan kerana a adalah null, b dikembalikan. Kemudian, b || c dinilai, dan kerana b adalah nilai falsy, c akhirnya dikembalikan.

Kes di mana operator nullish coalescing berguna

Berikut adalah kes-kes di mana operator nullish coalescing berguna.

• Nilai Lalai untuk Borang Ini boleh digunakan dalam senario di mana nilai lalai ditetapkan untuk medan input borang apabila pengguna tidak memasukkan apa-apa.

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

• Pengendalian Respons API Pemprosesan sandaran boleh dilakukan apabila nilai adalah null atau undefined dalam respons daripada API.

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 memulakan data dan menangani respons API, kerana ia memulangkan nilai lalai apabila menemui null atau undefined. Secara khusus, ini adalah pilihan yang lebih baik daripada operator logik OR tradisional (||) apabila anda mahu menangani nilai falsy seperti 0 atau rentetan kosong dengan betul.

Mengenai Operator Nullish Coalescing Assignment (??=)

Gambaran keseluruhan

Dalam JavaScript, Operator Nullish Coalescing Assignment ??= telah diperkenalkan untuk menetapkan nilai baru kepada pembolehubah yang memegang null atau undefined dengan cekap. Operator ini adalah pintasan yang mudah untuk menetapkan nilai kepada pembolehubah hanya jika ia memegang null atau undefined.

Penggunaan Asas

Operator penugasan nullish coalescing berfungsi seperti berikut:.

• Jika pembolehubah adalah null atau undefined, ia akan menetapkan nilai di bahagian kanan.
• Jika pembolehubah bukan null atau undefined, ia tidak melakukan apa-apa dan mengekalkan nilai semasa.

Sintaks

Sintaks asas operator penugasan nullish coalescing adalah seperti berikut:.

1x ??= y;

• y ditetapkan kepada x jika x adalah null atau undefined.
• Jika x sudah mempunyai nilai (bukan null atau undefined), nilai x tidak akan berubah.

Contoh

Mari kita lihat contoh asas bagi operator 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 kod ini, kerana userName adalah null, nilai defaultName sedang ditetapkan.

Seterusnya, berikut adalah contoh di mana nilai bukan null mahupun undefined.

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

• Dalam kes ini, kerana "Alice" sudah ditetapkan untuk userName, tidak ada penetapan yang dibuat.

Perbandingan dengan operator penetapan lain

JavaScript juga mempunyai beberapa operator penetapan lain. Secara khusus, perbezaan dengan operator penetapan OR logik (||=) adalah penting.

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

Operator penugasan logik OR menugaskan nilai walaupun apabila menemui nilai falsy seperti false, 0, atau rentetan kosong (""), manakala operator penugasan nullish coalescing hanya beroperasi apabila nilai 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

Kerana operator penugasan nullish coalescing hanya beroperasi pada null atau undefined, ia sangat berguna apabila anda ingin mengekalkan nilai seperti 0 atau false.

Kes penggunaan dunia nyata

Contoh penggunaan dunia sebenar untuk pengendali 'null coalescing assignment' adalah seperti berikut:.

1. Menetapkan nilai lalai

   Ia berguna untuk menetapkan nilai lalai apabila input pengguna atau respons API mungkin 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. Mengendalikan parameter pilihan

   Ia juga boleh digunakan untuk melaksanakan tindakan lalai apabila hujah fungsi tidak ditetapkan.

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 menugaskan nilai apabila nilai di sebelah kiri adalah null atau undefined, menjadikan kod lebih ringkas dan membantu mencegah penugasan yang tidak disengajakan. Terutamanya apabila berhadapan dengan nilai "falsy" seperti 0 atau false, ia boleh menjadi lebih sesuai berbanding operator logik OR tradisional (||=).

Dengan menggunakan operator ini, anda boleh mencipta kod yang lebih kukuh dan mudah dibaca.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video