Nullish Coalescing Operator sa JavaScript

Ang artikulong ito ay nagpapaliwanag ng Nullish Coalescing Operator sa JavaScript.

YouTube Video

Nullish Coalescing Operator sa JavaScript

Sa JavaScript, ang Nullish Coalescing Operator (??) ay sinusuri kung ang isang halaga ay null o undefined at magbabalik ng ibang default na halaga kung gayon. Ito ay katulad ng karaniwang ginagamit na logical OR operator (||), ngunit naiiba dahil ito ay tumutok sa null at undefined.

Ang logical OR operator ay nagbabalik ng value sa kanan kung ang value sa kaliwa ay falsy, habang ang nullish coalescing operator ay nagbabalik ng value sa kanan kung ang value lamang sa kaliwa ay null o undefined. Ang tampok na ito ay nagbibigay-daan sa tamang paghawak ng mga halaga tulad ng 0 at walang laman na mga string ("").

Pangunahing Syntax

1let result = value ?? defaultValue;

• Ang value ay ang value na sinusuri.
• Ang defaultValue ay ang value na ibinabalik kapag ang value ay null o undefined.

Mga Halimbawa ng Paggamit ng Nullish Coalescing Operator

Ang sumusunod na halimbawa ay nagpapatupad ng isang proseso upang magbalik ng default na halaga kung ang kaso ay null o 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"

Sa code na ito, dahil ang name ay null, ang halaga ng defaultName, "Anonymous", ay ibinalik. Kung ang name ay isang halaga bukod sa null o undefined, ang halagang iyon ay ibabalik.

Pagkakaiba sa Logical OR Operator

Ang nullish coalescing operator ay katulad ng logical OR operator ngunit may mahalagang pagkakaiba. Ang logical OR operator ay sinusuri ang mga 'falsy' na value (false, 0, NaN, "", null, undefined, atbp.), habang ang nullish coalescing operator ay sinusuri lamang ang null at undefined.

Halimbawa ng Logical OR Operator:

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

Halimbawa ng Nullish Coalescing Operator:

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

Sa ganitong paraan, pinapanatili ng nullish coalescing operator ang mga wastong value tulad ng 0 at mga walang laman na string ("") at nagbabalik lamang ng default na value kung kinakailangan. Dahil ang logical OR operator ay ginagamitan ang mga value na ito bilang falsy at ibinabalik ang default na value, mahalaga na piliin ang tamang operator depende sa uri ng paggamit.

Halimbawa Kapag Ginamit nang Magkasama:

Maaaring pagsamahin ang nullish coalescing operator sa iba pang mga logical operator, ngunit kinakailangan ng pag-iingat kapag ginagawa ito.

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

• Halimbawa, kapag ginagamit ito kasama ng logical OR operator (||) o ng logical AND operator (&&), dapat gumamit ng parentheses upang maliwanagan ang pagkakasunod-sunod ng mga operasyon.

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

• Sa halimbawang ito, ang a ?? b ay sinusuri muna, at dahil ang a ay null, ang b ay ibinalik. Pagkatapos, ang b || c ay isinasaalang-alang, at dahil ang b ay falsy, sa huli ay ang c ang ibinabalik.

Mga sitwasyon kung saan kapaki-pakinabang ang nullish coalescing operator

Ang mga sumusunod ay mga sitwasyon kung saan kapaki-pakinabang ang nullish coalescing operator.

• Mga Default na Halaga para sa mga Form Maaaring gamitin ito sa mga sitwasyon kung saan ang default na halaga ay itinakda para sa mga field ng input ng form kapag walang inilagay ang gumagamit.

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

• Pagproseso ng API Response Maaaring isagawa ang fallback processing kapag ang halaga ay null o undefined sa mga sagot mula sa 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"

Buod

Ang nullish coalescing operator (??) ay napakakapaki-pakinabang para sa pag-initialize ng data at paghawak ng mga tugon ng API, dahil ibinabalik nito ang isang default na value kapag nasumpungan ang null o undefined. Partikular, ito ay mas mainam kaysa sa tradisyunal na logical OR operator (||) kapag nais mong wastong hawakan ang mga falsy na value tulad ng 0 o mga walang laman na string.

Tungkol sa Nullish Coalescing Assignment Operator (??=)

Pangkalahatang-ideya

Sa JavaScript, ipinakilala ang Nullish Coalescing Assignment Operator ??= upang mas madaling italaga ang bagong halaga sa mga variable na may hawak na null o undefined. Ang operator na ito ay isang madaling shortcut para sa pag-assign sa isang variable kung ang isang partikular na halaga ay null o undefined.

Pangunahing Paggamit

Ang nullish coalescing assignment operator ay gumagana tulad ng sumusunod:.

• Kung ang isang variable ay null o undefined, tinatalaga nito ang halaga sa kanang bahagi.
• Kung ang variable ay hindi null o undefined, wala itong ginagawa at nananatili ang kasalukuyang halaga.

Sintaks

Ang pangunahing syntax ng nullish coalescing assignment operator ay tulad ng sumusunod:.

1x ??= y;

• Ang y ay itatalaga sa x kung ang x ay null o undefined.
• Kung ang x ay mayroon nang halaga (hindi null o undefined), ang halaga ng x ay mananatili at hindi mababago.

Halimbawa

Tingnan natin ang isang pangunahing halimbawa ng nullish coalescing assignment operator.

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

• Sa code na ito, dahil ang userName ay null, ang halaga ng defaultName ang itatalaga.

Susunod, narito ang isang halimbawa kung saan ang halaga ay hindi null o undefined.

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

• Sa kasong ito, dahil ang "Alice" ay itinalaga na sa userName, walang ginawang pag-assign.

Paghahambing sa ibang mga assignment operator

Ang JavaScript ay mayroon ding iba pang mga assignment operator. Partikular, mahalaga ang pagkakaiba sa logical OR assignment operator (||=).

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

Ang logical OR assignment operator ay naglalaan ng isang value kahit na masumpungan ang mga falsy na value tulad ng false, 0, o isang walang laman na string (""), habang ang nullish coalescing assignment operator ay gumagana lamang kapag ang value ay null o undefined.

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

Dahil ang nullish coalescing assignment operator ay gumagana lamang sa null o undefined, ito ay napakakapaki-pakinabang kapag nais mong panatilihin ang mga value tulad ng 0 o false.

Mga halimbawa ng paggamit sa totoong mundo

Ang isang tunay na halimbawa ng paggamit para sa null coalescing assignment operator ay maaaring ganito:.

1. Pag-set ng default na mga halaga

   Ito ay kapaki-pakinabang para sa pag-set ng default na mga halaga kapag ang input ng user o sagot ng API ay maaaring null o 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. Pangangasiwa ng mga opsyonal na parameter

   Maaari rin itong magamit upang magsagawa ng default na mga aksyon kapag ang mga argumento ng function ay hindi tinukoy.

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

Buod

Ang nullish coalescing assignment operator (??=) ay naglalaan lamang ng isang value kapag ang value sa kaliwa ay null o undefined, na nagiging mas malinaw ang code at nakakatulong upang maiwasan ang di-sinasadyang mga paglalaan. Lalo na kapag humaharap sa mga "falsy" na halaga tulad ng 0 o false, mas angkop itong gamitin kaysa sa tradisyunal na logical OR operator (||=).

Sa pamamagitan ng paggamit sa operator na ito, maaari kang lumikha ng mas matibay at madaling basahin na code.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video