JavaScript Nullish Coalescing: Tilldelning av standardvärde kontra hantering av 'falsy'-värden

JavaScript-utvecklare behöver ofta tilldela standardvärden till variabler när det ursprungliga värdet saknas eller är ogiltigt. Traditionellt användes den logiska ELLER-operatorn (||) för detta ändamål. Men nullish coalescing-operatorn (??), som introducerades i ECMAScript 2020, erbjuder en mer exakt och tillförlitlig lösning, särskilt vid hantering av 'falsy'-värden. Denna omfattande guide utforskar nyanserna i nullish coalescing, jämför den med den logiska ELLER-operatorn och visar dess tillämpningar i olika scenarier.

Förståelse för Nullish Coalescing (??)

Nullish coalescing-operatorn (??) returnerar sin högra operand när dess vänstra operand är null eller undefined. Annars returnerar den sin vänstra operand. Enklare uttryckt ger den ett standardvärde endast när variabeln är explicit null eller undefined.

Syntax:

leftOperand ?? rightOperand

Exempel:

            const name = null ?? "Gäst";
console.log(name); // Output: "Gäst"

const age = undefined ?? 25;
console.log(age); // Output: 25

const score = 0 ?? 100;
console.log(score); // Output: 0

            

              
                Copy
              
            
          

Skillnaden mellan Nullish Coalescing (??) och logisk ELLER (||)

Den logiska ELLER-operatorn (||) ger också ett sätt att tilldela standardvärden. Den behandlar dock alla 'falsy'-värden (false, 0, '', NaN, null, undefined) som likvärdiga med null eller undefined, vilket kan leda till oväntat beteende.

Exempel med logisk ELLER:

            const quantity = 0 || 10;
console.log(quantity); // Output: 10 (oväntat, eftersom 0 är 'falsy')

const message = '' || "Inget meddelande";
console.log(message); // Output: "Inget meddelande" (oväntat, eftersom '' är 'falsy')

            

              
                Copy
              
            
          

Exempel med Nullish Coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (korrekt, eftersom 0 inte är null eller undefined)

const message = '' ?? "Inget meddelande";
console.log(message); // Output: "" (korrekt, eftersom '' inte är null eller undefined)

            

              
                Copy
              
            
          

Som du kan se, aktiveras nullish coalescing-operatorn endast när den vänstra operanden är explicit null eller undefined, vilket bevarar 'falsy'-värden som 0 och ''.

Användningsfall för Nullish Coalescing

Nullish coalescing är särskilt användbart i scenarier där du behöver skilja mellan ett saknat värde (null eller undefined) och ett giltigt 'falsy'-värde.

1. Hantering av konfigurationsalternativ

När du hanterar konfigurationsalternativ kanske du vill ange standardvärden för inställningar som inte har definierats explicit. Användning av ?? säkerställer att giltiga 'falsy'-värden (t.ex. 0 för ett timeout-värde) inte oavsiktligt ersätts med standardvärdet.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Använd 0 om timeout är explicit satt, annars standardvärde 5000
const maxRetries = config.maxRetries ?? 3; // Använd 3 om maxRetries är null eller undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Använd standard-endpoint om apiEndpoint är null eller undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Output: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Arbeta med API-svar

API-svar innehåller ofta fält som kan saknas eller ha explicit satta 'falsy'-värden. Nullish coalescing låter dig hantera dessa scenarier smidigt och säkerställer att du endast tilldelar standardvärden när ett fält verkligen saknas.

Exempel: Ett förenklat API-svar som representerar en användare:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Okänd användare";
const userAge = user.age ?? "Ålder ej tillgänglig";
const country = user.countryCode ?? "US"; // Standardvärde 'US' om null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; // Standardvärde 'true' om null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; // Standardbild om null/undefined

console.log(`Namn: ${displayName}`); // Output: Namn: Alice
console.log(`Ålder: ${userAge}`); // Output: Ålder: 30
console.log(`Land: ${country}`); // Output: Land: US
console.log(`Godkända villkor: ${hasAcceptedTerms}`); // Output: Godkända villkor: false
console.log(`Profilbild: ${profilePic}`); //Output: Profilbild: /default-profile.png

            

              
                Copy
              
            
          

I det här exemplet sätter vi standardvärdet till "US" endast om `countryCode` är explicit null eller undefined. Om API:et returnerade `countryCode: ""`, skulle den tomma strängen bevaras, vilket återspeglar användarens faktiska (men potentiellt saknade) landskod.

3. Tillhandahålla reservvärden i funktioner

När du skriver funktioner som accepterar valfria parametrar kan nullish coalescing användas för att tillhandahålla standardvärden för saknade argument.

            function greet(name, greeting) {
  const displayName = name ?? "Gäst";
  const salutation = greeting ?? "Hej";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "God morgon")); // Output: God morgon, Bob!
console.log(greet(null, undefined)); // Output: Hej, Gäst!
console.log(greet("", "")); // Output: , !
console.log(greet("", null)); // Output: Hej, !

            

              
                Copy
              
            
          

Detta tillvägagångssätt säkerställer att funktionen alltid har ett värde att arbeta med, även om anroparen inte tillhandahåller alla argument.

4. Internationalisering och lokalisering (i18n/l10n)

När du arbetar med internationaliserade applikationer har du ofta olika översättningar för olika strängar. Nullish coalescing kan användas för att tillhandahålla en standardöversättning om en specifik översättning saknas för ett visst språk.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Översättning saknas för nyckel: ${key}`;
}

console.log(translate("greeting", "fr")); // Output: Bonjour
console.log(translate("farewell", "fr")); // Output: Översättning saknas för nyckel: farewell
console.log(translate("greeting", "de")); // Output: Hello (faller tillbaka till engelska)

            

              
                Copy
              
            
          

I det här exemplet försöker vi först hitta översättningen för det angivna språket och nyckeln. Om den saknas, faller vi tillbaka på den engelska översättningen. Om även den engelska översättningen saknas, returnerar vi ett meddelande som indikerar att översättningen saknas.

5. Hantering av användarinmatning i formulär

När du bearbetar användarinmatning från formulär kan du stöta på fall där vissa fält lämnas tomma eller innehåller tomma strängar. Att använda nullish coalescing-operatorn tillsammans med optional chaining-operatorn (?.) kan vara mycket effektivt när man hanterar djupt nästlad användarinmatning.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "Inget namn angivet";
const safeUserName = formData?.user?.name ?? "Inget namn angivet";
const userCity = formData?.user?.address?.city ?? "Stad okänd";
const userCountry = formData?.user?.address?.country ?? "Land okänt";

console.log(userName); // Inget namn angivet (eftersom tom sträng är 'falsy')
console.log(safeUserName); // "" (eftersom safeUserName explicit kontrollerar för null eller undefined)
console.log(userCity); // Stad okänd
console.log(userCountry); // Land okänt

            

              
                Copy
              
            
          

Operatorprioritet och kombination med andra operatorer

Nullish coalescing-operatorn har en relativt låg operatorprioritet. Det innebär att du ofta behöver använda parenteser för att säkerställa att den utvärderas korrekt, särskilt när den kombineras med andra operatorer som logisk OCH (&&) eller logisk ELLER (||).

Viktigt att notera: Du kan inte direkt kombinera ?? med && eller || utan att använda parenteser. Detta för att undvika tvetydighet i operationsordningen.

Korrekt användning:

            const value = (someValue ?? 10) && true;
console.log(value); //Output: true om someValue inte är null eller undefined, annars false

const result = (null ?? 5) + 10; // Output: 15

            

              
                Copy
              
            
          

Felaktig användning (resulterar i ett SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Webbläsarkompatibilitet

Nullish coalescing-operatorn (??) är ett relativt nytt tillägg i JavaScript. Se till att dina målwebbläsare stöder den. De flesta moderna webbläsare stöder den, men äldre webbläsare kan kräva transpilerling med verktyg som Babel.

För att kontrollera webbläsarkompatibilitet kan du hänvisa till resurser som MDN Web Docs.

Bästa praxis för att använda Nullish Coalescing

• Använd den när du behöver skilja mellan saknade värden (null eller undefined) och giltiga 'falsy'-värden.
• Använd alltid parenteser när du kombinerar ?? med && eller || för att undvika syntaxfel och säkerställa korrekt utvärdering.
• Var medveten om webbläsarkompatibilitet och överväg transpilerling vid behov.
• Dokumentera din användning av ?? tydligt för att förbättra kodens läsbarhet.
• Testa din kod noggrant för att säkerställa att standardvärden tilldelas korrekt i alla scenarier.

Slutsats

Nullish coalescing-operatorn (??) är ett kraftfullt och värdefullt tillägg till JavaScript-språket. Den erbjuder ett mer exakt och tillförlitligt sätt att tilldela standardvärden jämfört med den traditionella logiska ELLER-operatorn (||), särskilt vid hantering av 'falsy'-värden. Genom att förstå dess nyanser och bästa praxis kan du skriva renare, mer robust och mer underhållbar JavaScript-kod. Överväg att börja använda ?? i dina projekt för att förbättra tydligheten och noggrannheten i dina tilldelningar av standardvärden. Kom ihåg att testa din kod noggrant i olika webbläsare och överväg transpilerling för äldre miljöer.

Denna guide gav en omfattande översikt. Experimentera med ?? i olika sammanhang för att fullt ut förstå dess kapacitet och begränsningar, och fortsätt att förfina din förståelse genom praktisk tillämpning.