Nullish Coalescing Operator i JavaScript

Den här artikeln förklarar Nullish Coalescing Operator i JavaScript.

YouTube Video

Nullish Coalescing Operator i JavaScript

I JavaScript utvärderar Nullish Coalescing Operator (??) om ett värde är null eller undefined och returnerar ett annat standardvärde om så är fallet. Den liknar den vanligt använda logiska ELLER-operatorn (||), men skiljer sig genom att den är specialiserad på null och undefined.

Den logiska OR-operatören returnerar det högra värdet om det vänstra värdet är falsy, medan den null-koalescerande operatören returnerar det högra värdet endast om det vänstra värdet är null eller undefined. Denna funktion möjliggör korrekt hantering av värden som 0 och tomma strängar ("").

Grundläggande syntax

1let result = value ?? defaultValue;

• value är värdet som kontrolleras.
• defaultValue är det värde som returneras när value är null eller undefined.

Exempel på användning av Nullish Coalescing Operator

Följande exempel implementerar en process för att returnera ett standardvärde i fallet 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 denna kod, eftersom name är null, returneras värdet av defaultName, "Anonymous". Om name är ett annat värde än null eller undefined returneras det värdet.

Skillnader jämfört med logiska ELLER-operatorn

Den null-koalescerande operatören liknar den logiska OR-operatören men har en viktig skillnad. Den logiska OR-operatören kontrollerar 'falsy'-värden (false, 0, NaN, "", null, undefined, etc.), medan den null-koalescerande operatören kontrollerar endast null och undefined.

Exempel på logiska ELLER-operatorn:

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

Exempel 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å detta sätt behåller den null-koalescerande operatören giltiga värden som 0 och tomma strängar ("") och returnerar ett standardvärde endast när det är nödvändigt. Eftersom den logiska OR-operatören behandlar dessa värden som falsy och returnerar standardvärdet, är det viktigt att välja rätt operatör beroende på användningsfallet.

Exempel vid kombinerad användning:

Den null-koalescerande operatören kan också kombineras med andra logiska operatorer, men försiktighet krävs vid sådana kombinationer.

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

• Till exempel, när du använder den tillsammans med den logiska OR-operatören (||) eller den logiska AND-operatören (&&), bör parenteser användas för att tydliggöra operatorernas ordning.

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

• I detta exempel utvärderas a ?? b först, och eftersom a är null, returneras b. Sedan utvärderas b || c, och eftersom b är falsy, returneras slutligen c.

Fall där den null-koalescerande operatören är användbar

Följande är fall där den null-koalescerande operatören är användbar.

• Standardvärden för formulär Detta kan användas i scenarier där ett standardvärde sätts för formulärfält när användaren inte fyller i något.

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

• Hantering av API-svar Fallback-bearbetning kan utföras när värdet är null eller undefined i API-svar.

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"

Sammanfattning

Den null-koalescerande operatören (??) är mycket användbar för att initiera data och hantera API-svar, eftersom den returnerar ett standardvärde när den stöter på null eller undefined. Särskilt är det ett bättre val än den traditionella logiska OR-operatören (||) när du vill hantera falsy-värden som 0 eller tomma strängar på ett korrekt sätt.

Om Nullish Coalescing-tilldelningsoperatorn (??=)

Översikt

I JavaScript har Nullish Coalescing-tilldelningsoperatorn ??= införts för att effektivt tilldela ett nytt värde till variabler som har null eller undefined. Den här operatorn är en praktisk genväg för att endast tilldela ett värde till en variabel om ett specifikt värde är null eller undefined.

Grundläggande användning

Den null-koalescerande tilldelningsoperatorn fungerar enligt följande:.

• Om en variabel är null eller undefined tilldelar den värdet på högersidan.
• Om variabeln varken är null eller undefined görs inget, och det nuvarande värdet behålls.

Syntax

Den grundläggande syntaxen för den null-koalescerande tilldelningsoperatorn är följande:.

1x ??= y;

• y tilldelas till x om x är null eller undefined.
• Om x redan har ett värde (inte null eller undefined), kommer x värde inte att ändras.

Exempel

Låt oss titta på ett grundläggande exempel på den nulliska sammanslagningsoperatorn.

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

• I denna kod tilldelas värdet av defaultName eftersom userName är null.

Härnäst är ett exempel där värdet varken är 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 detta fall görs ingen tilldelning eftersom "Alice" redan har satts för userName.

Jämförelse med andra tilldelningsoperatorer

JavaScript har också flera andra tilldelningsoperatorer. Särskilt skillnaden med den logiska ELLER-tilldelningsoperatorn (||=) är viktig.

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

Den logiska OR-tilldelningsoperatorn tilldelar ett värde även när den stöter på falsy-värden som false, 0 eller en tom sträng (""), medan den null-koalescerande tilldelningsoperatorn endast fungerar när värdet är null eller undefined.

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

Eftersom den null-koalescerande tilldelningsoperatorn endast fungerar på null eller undefined, är den mycket användbar när du vill behålla värden som 0 eller false.

Verkliga användningsfall

Ett verkligt användningsfall för operatorn för null-sammanslagning kan vara följande:.

1. Ställa in standardvärden

   Det är användbart för att ställa in standardvärden när användarinmatning eller API-svar kan vara 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. Hantera valfria parametrar

   Det kan också användas för att utföra standardåtgärder när funktionsargument inte anges.

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

Sammanfattning

Den null-koalescerande tilldelningsoperatorn (??=) tilldelar ett värde endast när det vänstra värdet är null eller undefined, vilket gör koden mer kortfattad och hjälper till att förhindra oavsiktliga tilldelningar. Särskilt när man hanterar "falska" värden som 0 eller false, kan det vara mer lämpligt än den traditionella logiska OR-operatorn (||=).

Genom att använda denna operator kan du skapa mer robust och lättläst kod.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video