Nullish Coalescing-operator i JavaScript

Denne artikel forklarer Nullish Coalescing-operatoren i JavaScript.

YouTube Video

Nullish Coalescing-operator i JavaScript

I JavaScript evaluerer Nullish Coalescing-operatoren (??), om en værdi er null eller undefined, og returnerer en anden standardværdi i så fald. Den minder om den ofte anvendte logiske OR-operator (||), men adskiller sig, da den er specialiseret til null og undefined.

Den logiske OR-operator returnerer højre værdi, hvis venstre værdi er falsy, mens nullish coalescing-operatoren kun returnerer højre værdi, når venstre værdi er null eller undefined. Denne funktion gør det muligt at håndtere værdier som 0 og tomme strenge ("") korrekt.

Grundlæggende syntaks

1let result = value ?? defaultValue;

• value er værdien, der kontrolleres.
• defaultValue er den værdi, der returneres, når value er null eller undefined.

Eksempler på brug af Nullish Coalescing-operatoren

Det følgende eksempel implementerer en proces til at returnere en standardværdi i tilfælde af null eller 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"

I denne kode, da name er null, returneres værdien defaultName, "Anonymous". Hvis name er en værdi, der ikke er null eller undefined, returneres den værdi.

Forskelle mellem Nullish Coalescing og den logiske OR-operator

Nullish coalescing-operatoren ligner den logiske OR-operator, men har en vigtig forskel. Den logiske OR-operator tjekker for 'falsy'-værdier (false, 0, NaN, "", null, undefined, osv.), mens nullish coalescing-operatoren kun tjekker for null og undefined.

Eksempel på logisk 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

Eksempel på 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

På denne måde bevarer nullish coalescing-operatoren gyldige værdier såsom 0 og tomme strenge ("") og returnerer kun en standardværdi, når det er nødvendigt. Da den logiske OR-operator behandler disse værdier som falsy og returnerer standardværdien, er det vigtigt at vælge den passende operator afhængigt af brugstilfældet.

Eksempel, når den bruges i kombination:

Nullish coalescing-operatoren kan også kombineres med andre logiske operatorer, men forsigtighed er nødvendig i sådanne tilfælde.

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

• For eksempel, når den bruges sammen med den logiske OR-operator (||) eller den logiske AND-operator (&&), bør parenteser anvendes for at tydeliggøre rækkefølgen af operationer.

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

• I dette eksempel evalueres a ?? b først, og da a er null, returneres b. Derefter evalueres b || c, og da b er falsk, returneres c til sidst.

Tilfælde, hvor nullish coalescing-operatoren er nyttig

Følgende er tilfælde, hvor nullish coalescing-operatoren er nyttig.

• Standardværdier for formularer Dette kan bruges i scenarier, hvor en standardværdi er indstillet for formularens inputfelter, når brugeren ikke indtaster noget.

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

• Håndtering af API-svar Fallback-behandling kan udføres, når værdien er null eller undefined i svar fra API'en.

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"

Sammendrag

Nullish coalescing-operatoren (??) er meget nyttig til initialisering af data og håndtering af API-responser, da den returnerer en standardværdi, når den støder på null eller undefined. Især er det et bedre valg end den traditionelle logiske OR-operator (||), når du vil håndtere falsy-værdier som 0 eller tomme strenge korrekt.

Om Nullish Coalescing Assignment Operator (??=)

Oversigt

I JavaScript er Nullish Coalescing Assignment Operator ??= introduceret for effektivt at tildele en ny værdi til variabler, der har værdien null eller undefined. Denne operator er en praktisk genvej til kun at tildele en værdi til en variabel, hvis en specifik værdi er null eller undefined.

Grundlæggende Brug

Nullish coalescing-tilknytningsoperatoren fungerer som følger:.

• Hvis en variabel er null eller undefined, tildeles værdien på højresiden.
• Hvis variablen hverken er null eller undefined, gør den ingenting og bevarer den aktuelle værdi.

Syntaks

Den grundlæggende syntaks for nullish coalescing-tilknytningsoperatoren er som følger:.

1x ??= y;

• y tildeles til x, hvis x er null eller undefined.
• Hvis x allerede har en værdi (ikke null eller undefined), forbliver x's værdi uændret.

Eksempel

Lad os se på et grundlæggende eksempel med den nullish-coalescing tildelingsoperator.

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

• I denne kode, da userName er null, tildeles værdien af defaultName.

Her er et eksempel, hvor værdien hverken er null eller undefined.

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

• I dette tilfælde, da "Alice" allerede er angivet for userName, foretages ingen tildeling.

Sammenligning med andre tildelingsoperatorer

JavaScript har også flere andre tildelingsoperatorer. Især er forskellen med den logiske OR-tildelingsoperator (||=) vigtig.

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

Den logiske OR-tilknytningsoperator tildeler en værdi, selv når den støder på falsy-værdier som false, 0 eller en tom streng (""), mens nullish coalescing-tilknytningsoperatoren kun fungerer, når værdien er null eller undefined.

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

Da nullish coalescing-tilknytningsoperatoren kun fungerer på null eller undefined, er den meget nyttig, når du vil bevare værdier som 0 eller false.

Anvendelser i den virkelige verden

Et praktisk eksempel på brug af null coalescing-tilordningsoperatoren kan være som følger:.

1. Indstilling af standardværdier

   Det er nyttigt til at indstille standardværdier, når brugerinput eller API-svar kan være null eller 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. Håndtering af valgfri parametre

   Det kan også bruges til at udføre standardhandlinger, når funktionsargumenter ikke er angivet.

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

Sammendrag

Nullish coalescing-tilknytningsoperatoren (??=) tildeler kun en værdi, når venstreværdien er null eller undefined, hvilket gør koden mere kortfattet og hjælper med at forhindre utilsigtede tildelinger. Især når man arbejder med "falsy" værdier som 0 eller false, kan det være mere hensigtsmæssigt end den traditionelle logiske OR-operator (||=).

Ved at bruge denne operator kan du skabe mere robust og læsbar kode.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video