JavaScript Nullish Coalescing: Bemästra tilldelning av standardvärden

I modern JavaScript-utveckling är det avgörande att hantera null- och undefined-värden på ett smidigt sätt för att skriva robust och förutsägbar kod. Nullish coalescing-operatorn (??), som introducerades i ES2020, erbjuder ett koncist och kraftfullt sätt att tilldela standardvärden specifikt när en variabel är null eller undefined. Detta blogginlägg utforskar nyanserna hos nullish coalescing-operatorn, jämför den med OR-operatorn (||) och illustrerar dess fördelar med praktiska exempel som är tillämpliga i olika kodningsscenarier.

Förstå nullish-värden: null och undefined

Innan vi går in på nullish coalescing-operatorn är det viktigt att förstå skillnaden mellan null och undefined i JavaScript. Båda representerar frånvaron av ett värde, men de uppstår under olika omständigheter.

• null: Representerar en avsiktlig frånvaro av ett värde. Det tilldelas vanligtvis av programmeraren för att indikera att en variabel för närvarande inte har något värde eller att en egenskap saknas.
• undefined: Indikerar att en variabel har deklarerats men ännu inte tilldelats ett värde. Det kan också uppstå vid åtkomst av en icke-existerande egenskap hos ett objekt eller när en funktion inte explicit returnerar ett värde.

Att förstå denna skillnad är avgörande eftersom nullish coalescing-operatorn specifikt riktar in sig på dessa två värden.

Introduktion till Nullish Coalescing-operatorn (??)

Nullish coalescing-operatorn (??) är en logisk operator som returnerar sin högra operand när dess vänstra operand är null eller undefined. Annars returnerar den sin vänstra operand. Syntaxen är enkel:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

I detta uttryck, om value är null eller undefined, kommer result att tilldelas värdet av defaultValue. Annars kommer result att tilldelas värdet av value.

Praktiska exempel på Nullish Coalescing

Låt oss illustrera användningen av nullish coalescing-operatorn med några praktiska exempel:

1. Ange standardinställningar för användare

Föreställ dig att du bygger en webbapplikation där användare kan anpassa sina inställningar. Du kan lagra dessa inställningar i ett användarprofilobjekt. Om en användare inte uttryckligen har angett en inställning kan du använda nullish coalescing-operatorn för att tillhandahålla ett standardvärde.

            const userProfile = {
  username: "johnDoe",
  theme: null // Användaren har inte valt ett tema än
};

const theme = userProfile.theme ?? "light"; // Standard är ljust tema

console.log(theme); // Output: "light"
            

              
                Copy
              
            
          

I det här exemplet, eftersom userProfile.theme är null, tilldelas variabeln theme standardvärdet "light". Om användaren hade angett ett tema, till exempel userProfile.theme = "dark";, skulle variabeln theme ha tilldelats värdet "dark".

2. Hantera saknad API-data

När man hämtar data från ett API är det vanligt att stöta på saknad eller ofullständig data. Nullish coalescing-operatorn kan användas för att tillhandahålla standardvärden för saknade egenskaper.

            const apiResponse = {
  data: {
    productName: "Example Product",
    description: undefined // Ingen beskrivning angiven
  }
};

const description = apiResponse.data.description ?? "Ingen beskrivning tillgänglig.";

console.log(description); // Output: "Ingen beskrivning tillgänglig."
            

              
                Copy
              
            
          

Här är apiResponse.data.description undefined, så variabeln description tilldelas standardmeddelandet "Ingen beskrivning tillgänglig."

3. Konfigurera applikationsinställningar

I konfigurationsfiler kan vissa inställningar vara valfria. Du kan använda nullish coalescing-operatorn för att säkerställa att din applikation använder rimliga standardvärden om dessa inställningar inte är explicit definierade.

            const config = {
  apiUrl: "https://example.com/api",
  timeout: null // Ingen tidsgräns specificerad
};

const timeout = config.timeout ?? 5000; // Standardtidsgräns på 5000 ms

console.log(timeout); // Output: 5000
            

              
                Copy
              
            
          

I det här fallet, eftersom config.timeout är null, sätts variabeln timeout till standardvärdet 5000 millisekunder.

Nullish Coalescing kontra OR-operatorn (||): En avgörande skillnad

Det är viktigt att förstå skillnaden mellan nullish coalescing-operatorn (??) och OR-operatorn (||). Även om båda kan användas för att tilldela standardvärden, beter de sig olika när de stöter på falsy-värden.

OR-operatorn (||) returnerar sin högra operand när dess vänstra operand är vilket falsy-värde som helst. Falsy-värden i JavaScript inkluderar:

• null
• undefined
• 0 (noll)
• NaN (Not a Number)
• '' (tom sträng)
• false

Nullish coalescing-operatorn (??) returnerar *endast* sin högra operand när dess vänstra operand är null eller undefined. Den tar inte hänsyn till andra falsy-värden.

Illustrera skillnaden med exempel

Låt oss betrakta ett scenario där vi vill tilldela ett standardvärde till en variabel som kan vara noll.

            const quantity = 0;

// Använder OR-operatorn
const quantityOR = quantity || 1; // Standard blir 1 om kvantiteten är falsy

console.log(quantityOR); // Output: 1 (felaktigt, eftersom 0 är falsy)

// Använder nullish coalescing-operatorn
const quantityNullish = quantity ?? 1; // Standard blir 1 endast om kvantiteten är null eller undefined

console.log(quantityNullish); // Output: 0 (korrekt, eftersom 0 inte är null eller undefined)
            

              
                Copy
              
            
          

I det här exemplet tilldelar OR-operatorn felaktigt standardvärdet 1 eftersom 0 är ett falsy-värde. Nullish coalescing-operatorn bevarar dock korrekt värdet 0 eftersom den endast kontrollerar för null eller undefined.

Ett annat vanligt scenario är att hantera tomma strängar. Anta att du vill visa en användares namn, men om namnet inte anges vill du visa ett standardmeddelande.

            const userName = ""; // Användaren har inte angett något namn

// Använder OR-operatorn
const displayNameOR = userName || "Guest";

console.log(displayNameOR); // Output: "Guest" (felaktigt, eftersom \"\" är falsy)

// Använder nullish coalescing-operatorn
const displayNameNullish = userName ?? "Guest";

console.log(displayNameNullish); // Output: "" (felaktigt, men närmare det önskade beteendet)
            

              
                Copy
              
            
          

Även om nullish coalescing-operatorn inte löser fallet med den tomma strängen perfekt (eftersom den fortfarande returnerar en tom sträng), belyser den vikten av att förstå skillnaden mellan ?? och ||. Om du *specifikt* vill behandla tomma strängar som likvärdiga med null/undefined, skulle du troligen behöva en explicit kontroll: const displayName = userName === null || userName === undefined || userName === '' ? 'Guest' : userName;. ??-operatorn förhindrar dock oväntat beteende med värden som `0` eller `false`.

Bästa praxis och att tänka på

När du använder nullish coalescing-operatorn, överväg följande bästa praxis:

• Använd den när du specifikt vill tillhandahålla ett standardvärde för null eller undefined. Undvik att använda den som en allmän operator för tilldelning av standardvärden.
• Var medveten om falsy-värden. Förstå skillnaden mellan ?? och ||, och välj den operator som bäst passar dina specifika behov.
• Kombinera den med optional chaining (?.) för säker åtkomst till egenskaper. Detta gör att du kan komma åt nästlade egenskaper utan att orsaka fel om en mellanliggande egenskap är null eller undefined.

Kombinera Nullish Coalescing med Optional Chaining

Optional chaining (?.) låter dig säkert komma åt egenskaper hos ett objekt, även om vissa mellanliggande egenskaper är null eller undefined. När den kombineras med nullish coalescing-operatorn kan du tillhandahålla standardvärden för egenskaper som kanske inte existerar.

            const user = {
  profile: {
    address: {
      city: null
    }
  }
};

const city = user.profile?.address?.city ?? "Okänd stad";

console.log(city); // Output: "Okänd stad"
            

              
                Copy
              
            
          

I det här exemplet, om antingen user.profile eller user.profile.address är null eller undefined, kommer optional chaining att förhindra ett fel, och nullish coalescing-operatorn kommer att tilldela standardvärdet "Okänd stad".

Global tillämpning: Olika scenarier över kulturer

Nullish coalescing-operatorn är universellt tillämplig. Men tänk på hur data samlas in och representeras i olika kulturer när du bestämmer standardvärden. Till exempel:

• Talformatering: Medan ett standardtalformat kan vara 0.00 i vissa regioner, använder andra , som decimalavskiljare. Se till att dina standardvärden överensstämmer med förväntade användarlokaler.
• Datumformat: Ett datumfält som lämnas null kan som standard sättas till dagens datum. Var medveten om vanliga datumformat som används av dina internationella användare (t.ex. MM/DD/YYYY vs. DD/MM/YYYY).
• Adressfält: Adressstrukturer varierar avsevärt globalt. Om ett adressfält är null kan det vara lämpligt att ange ett standardvärde som "Ej angivet". Undvik att förifylla med potentiellt felaktig regional information.
• Språkpreferenser: Om en användares språkpreferens saknas, använd ett allmänt förstått språk som engelska som standard eller använd webbläsarens lokaliseringsdetektering (med användarens tillstånd).

Tillgänglighetsaspekter

När du använder standardvärden, se till att din applikation förblir tillgänglig för användare med funktionsnedsättningar:

• Tydlig kommunikation: Om ett standardvärde används, indikera detta tydligt för användaren, särskilt i formulärfält. Använd etiketter och ARIA-attribut för att ge sammanhang.
• Tangentbordsnavigering: Se till att användare enkelt kan navigera och ändra standardvärden med tangentbordet.
• Skärmläsarkompatibilitet: Testa din applikation med skärmläsare för att säkerställa att standardvärden meddelas korrekt och kan åsidosättas.

Slutsats

Nullish coalescing-operatorn (??) är ett värdefullt tillskott till JavaScript-språket, som ger ett koncist och tillförlitligt sätt att tilldela standardvärden specifikt när en variabel är null eller undefined. Genom att förstå dess nyanser och jämföra den med OR-operatorn (||) kan du skriva mer robust, förutsägbar och underhållbar kod. Kom ihåg att överväga bästa praxis, kombinera den med optional chaining för säker åtkomst till egenskaper och anpassa dina standardvärden till de olika behoven hos en global publik. Att bemästra denna operator kommer utan tvekan att förbättra dina JavaScript-utvecklingsfärdigheter och bidra till att skapa bättre programvaruupplevelser för användare över hela världen.