JavaScript Nullish Coalescing: Mestring af tildeling af standardværdier

JavaScript-udviklere har ofte brug for at tildele standardværdier, når en variabel er null eller undefined. Før ES2020 var den logiske OR-operator (||) den primære metode til at opnå dette. Men introduktionen af nullish coalescing-operatoren (??) giver en mere præcis og pålidelig løsning. Denne omfattende guide udforsker nuancerne i nullish coalescing, dens fordele og praktiske eksempler for at hjælpe dig med at mestre denne kraftfulde funktion.

Forståelse af Nullish Coalescing (??)

Nullish coalescing-operatoren (??) er en logisk operator, der returnerer sin højre operand, når dens venstre operand er null eller undefined. Ellers returnerer den sin venstre operand.

Syntaks:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Væsentlig forskel fra logisk OR (||):

Den logiske OR-operator (||) returnerer den højre operand, hvis den venstre operand er en hvilken som helst falsy-værdi (null, undefined, 0, '', NaN, false). Dette kan føre til uventet adfærd, når du kun har til hensigt at håndtere null- eller undefined-værdier.

Hvorfor bruge Nullish Coalescing?

Nullish coalescing tilbyder flere fordele i forhold til den traditionelle logiske OR-operator:

• Præcision: Den er specifikt rettet mod null og undefined og undgår utilsigtede standardtildelinger for andre falsy-værdier.
• Læsbarhed: Den kommunikerer tydeligt hensigten om kun at håndtere null- eller undefined-tilfælde, hvilket forbedrer kodens vedligeholdelighed.
• Sikkerhed: Den forhindrer uventet adfærd forårsaget af falsy-værdier, der utilsigtet udløser standardtildelinger.

Praktiske eksempler

1. Grundlæggende tildeling af standardværdi

Tildeling af en standardværdi til en variabel, hvis den er null eller undefined:

            const userName = user.name ?? 'Guest';
console.log(userName); // Output: 'Guest' hvis user.name er null eller undefined, ellers det faktiske brugernavn
            

              
                Copy
              
            
          

2. Håndtering af API-svar

Hentning af data fra et API og angivelse af en standardværdi, hvis svaret mangler en bestemt egenskab:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unknown City';
console.log(cityName); // Output: 'Unknown City'
            

              
                Copy
              
            
          

3. Standardkonfigurationer

Indstilling af standardkonfigurationsmuligheder for en komponent eller et modul:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Output: 'normal' hvis userSettings.animationSpeed er null eller undefined
            

              
                Copy
              
            
          

4. Håndtering af brugerpræferencer

Tillad brugere at tilpasse indstillinger og angiv standardværdier, hvis de ikke har specificeret en præference:

            let userVolume = localStorage.getItem('volume'); //kan returnere null
let volume = userVolume ?? 0.5; // sæt en standardlydstyrke på 0.5

console.log(`User volume is ${volume}`);
            

              
                Copy
              
            
          

5. Kædning af Nullish Coalescing

Du kan kæde nullish coalescing-operatoren for at angive en kaskade af standardværdier:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Output: Den første ikke-null/undefined værdi fra kæden
            

              
                Copy
              
            
          

6. Arbejde med funktioner

Tildeling af en standardfunktion, hvis den angivne funktion er null eller undefined:

            const logMessage = logger.log ?? (() => console.log('No logger available.'));
logMessage('This is a test message.');
            

              
                Copy
              
            
          

Nullish Coalescing med Optional Chaining

Nullish coalescing-operatoren passer perfekt sammen med optional chaining (?.), hvilket giver dig mulighed for sikkert at tilgå indlejrede egenskaber uden at forårsage fejl, hvis en mellemliggende egenskab er null eller undefined.

Eksempel:

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

const cityName = user?.profile?.address?.city ?? 'Unknown City';
console.log(cityName); // Output: 'Unknown City'
            

              
                Copy
              
            
          

I dette eksempel, hvis nogen af egenskaberne (user, profile, address eller city) er null eller undefined, vil optional chaining kortslutte, og nullish coalescing-operatoren vil returnere standardværdien 'Unknown City'.

Almindelige anvendelsestilfælde i globale applikationer

Overvej disse internationale scenarier, hvor nullish coalescing kan være særligt nyttigt:

• Lokalisering: Tilvejebringelse af standardoversættelser baseret på brugerens lokalitet. Hvis en oversættelse ikke er tilgængelig for et specifikt sprog, kan der implementeres en fallback til et standardsprog (f.eks. engelsk).
• Valutaformatering: Visning af valutaværdier med passende formatering baseret på brugerens region. Hvis de regionale indstillinger ikke er tilgængelige, kan et standardvalutaformat anvendes.
• Dato- og tidsformatering: Formatering af datoer og tidspunkter i henhold til brugerens lokalitet. Hvis lokalitetsoplysningerne mangler, kan et standard dato- og tidsformat bruges.
• Adresseformatering: Visning af adresseoplysninger i det korrekte format for forskellige lande. Hvis landet ikke er specificeret, kan et standardadresseformat bruges.

Eksempel: Lokaliserings-fallback

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hello!";
console.log(translatedText);
            

              
                Copy
              
            
          

Bedste praksis

• Brug ?? til null/undefined-tjek: Foretræk ?? frem for ||, når du specifikt ønsker at håndtere null- eller undefined-værdier.
• Kombiner med optional chaining: Brug ?? i forbindelse med optional chaining (?.) for sikkert at tilgå indlejrede egenskaber.
• Undgå unødvendig kompleksitet: Hold din kode ren og læsbar ved kun at bruge ??, når det giver en klar fordel.
• Overvej browserkompatibilitet: Sørg for, at dine mål-browsere understøtter nullish coalescing-operatoren (ES2020). Hvis du skal understøtte ældre browsere, skal du bruge en transpiler som Babel.
• Kodeanmeldelser: Opmuntr til kodeanmeldelser for at sikre korrekt brug af nullish coalescing-operatoren, især i store internationale projekter, hvor fejlfortolkninger af falsy-værdier kan have betydelige konsekvenser.

Browserkompatibilitet

Nullish coalescing-operatoren er en relativt ny funktion i JavaScript (ES2020). Sørg for, at dine mål-browsere understøtter den, eller brug en transpiler som Babel for at sikre kompatibilitet med ældre browsere. Overvej brugsdemografien for din applikation. For eksempel kan et projekt rettet mod brugere i lande med langsommere teknologiadoption kræve transpilation i højere grad end et, der er rettet mod brugere i teknologisk fremskredne regioner.

Faldgruber at undgå

• Blanding af ?? og || med &&: Når du kombinerer nullish coalescing-operatoren (??) eller den logiske OR-operator (||) med den logiske AND-operator (&&) uden eksplicitte parenteser, kaster JavaScript en syntaksfejl. Brug altid parenteser for at tydeliggøre rækkefølgen af operationer.
• Forveksling af ?? med ||: Husk den afgørende forskel: ?? tjekker kun for null og undefined, mens || tjekker for enhver falsy-værdi.

Eksempel på faldgrube 1 (Syntaksfejl):

            // Dette vil kaste en SyntaxError:
// const value = a ?? b && c;

// Korrekt måde (ved brug af parenteser):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternativer til Nullish Coalescing (for ældre browsere)

Hvis du har brug for at understøtte ældre browsere, der ikke understøtter nullish coalescing-operatoren, kan du bruge følgende alternativer:

• Logisk OR-operator (||): Som nævnt tidligere er dette den traditionelle tilgang. Vær dog opmærksom på problemet med falsy-værdier.
• Ternær operator: En mere omstændelig, men eksplicit måde at tjekke for null eller undefined på.

Eksempel: Ternær operator

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Konklusion

Nullish coalescing-operatoren (??) er en værdifuld tilføjelse til JavaScript-sproget, der giver en mere præcis og læsbar måde at håndtere tildeling af standardværdier på, når man arbejder med null- eller undefined-værdier. Ved at forstå dens fordele og nuancer kan du skrive renere, sikrere og mere vedligeholdelsesvenlig kode. Kombinationen med optional chaining forbedrer yderligere din evne til at håndtere komplekse datastrukturer elegant. Når du bygger applikationer til et globalt publikum, skal du overveje implikationerne af null- og undefined-værdier i forskellige kulturelle og regionale sammenhænge og udnytte nullish coalescing til at levere en konsistent og brugervenlig oplevelse for alle.