Valgfri sammenkdning '?.'

Den valgfrie sammenkdning ?. er en sikker mde at f adgang til indlejrede objekt-egenskaber p, selvom en mellemliggende egenskab ikke eksisterer.

Problemet med ikke-eksisterende egenskaber

Hvis du lige er begyndt at lse vejledningen og lre JavaScript, har problemet mske ikke ramt dig endnu, men det er ret almindeligt.

Som et eksempel, lad os sige, at vi har user-objekter, der indeholder oplysninger om vores brugere.

De fleste af vores brugere har adresser i user.address-egenskaben, med gaden user.address.street, men nogle har ikke angivet dem.

I s fald, nr vi forsger at f user.address.street, og brugeren tilfldigvis ikke har en adresse, fr vi en fejl:

let user = {}; // en bruger uden "address"-egenskab

alert(user.address.street); // Fejl!

Det er det forventede resultat. JavaScript fungerer sdan. Da user.address er undefined, mislykkes et forsg p at f user.address.street med en fejl.

I mange praktiske tilflde foretrkker vi at f undefined i stedet for en fejl her (betydende ingen gade).

og et andet eksempel. I webudvikling kan vi f et objekt, der svarer til et websideelement ved hjlp af et specielt metodekald, ssom document.querySelector('.elem'), og det returnerer null, nr der ikke er et sdant element.

// document.querySelector('.elem') er null, hvis der ikke er et element
let html = document.querySelector('.elem').innerHTML; // fejl, hvis det er null

Hvis elementet ikke findes, fr vi en fejl, nr vi forsger at f adgang til .innerHTML-egenskaben af null. Og i nogle tilflde, nr fravret af elementet er normalt, vil vi gerne undg fejlen og blot acceptere html = null som resultatet.

Hvordan kan vi gre dette?

Den oplagte lsning ville vre at tjekke vrdien ved hjlp af if eller den betingede operator ?, fr vi fr adgang til dens egenskab, sdan her:

let user = {};

alert(user.address ? user.address.street : undefined);

Det virker, der er ingen fejl Men det er ret upraktisk. Som du kan se, optrder "user.address" to gange i koden.

Her er hvordan det samme ville se ud for document.querySelector:

let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;

Vi kan se, at element-sgningen document.querySelector('.elem') faktisk kaldes to gange her. Ikke godt.

For mere dybt indlejrede egenskaber bliver det endnu grimmere, da flere gentagelser er ndvendige.

F.eks. lad os f user.address.street.name p en lignende mde.

let user = {}; // user har ingen adresse

alert(user.address ? user.address.street ? user.address.street.name : null : null);

Det er skrkkeligt!. Flere kan endda have problemer med bare at forst sdan kode.

Der er en lidt bedre mde at skrive det p ved hjlp af &&-operatoren:

let user = {}; // user har ingen adresse

alert( user.address && user.address.street && user.address.street.name ); // undefined (ingen fejl)

At ANDe hele stien til egenskaben sikrer, at alle komponenter eksisterer (hvis ikke, stopper evalueringen), men det er heller ikke ideelt.

Som du kan se, optrder egenskabsnavne stadig flere gange i koden. F.eks. i koden ovenfor optrder user.address tre gange.

Derfor blev den valgfrie kdning ?. tilfjet til sproget. For at lse dette problem n gang for alle!

Valgfri kdning

Den valgfrie kdning ?. stopper evalueringen, hvis vrdien fr ?. er undefined eller null og returnerer undefined.

Fremover i denne artikel, for korthedens skyld, vil vi sige, at noget eksisterer, hvis det ikke er null og ikke undefined.

Med andre ord, value?.prop:

• fungerer som value.prop, hvis value eksisterer,
• ellers (nr value er undefined/null) returnerer det undefined.

Her er den sikre mde at f adgang til user.address.street ved hjlp af ?.:

let user = {}; // user har ingen adresse

alert( user?.address?.street ); // undefined (ingen fejl)

Koden er kort og ren, der er ingen duplikation overhovedet.

Her er et eksempel med document.querySelector:

let html = document.querySelector('.elem')?.innerHTML; // vil vre undefined, hvis der ikke er noget element

At lse adressen med user?.address fungerer selvom user objektet ikke eksisterer:

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

Bemrk: ?.-syntaksen gr vrdien fr den valgfri, men ikke videre.

F.eks. i user?.address.street.name tillader ?. at user sikkert kan vre null/undefined (og returnerer undefined i det tilflde), men det glder kun for user. Yderligere egenskaber tilgs p en almindelig mde. Hvis vi vil have nogle af dem til at vre valgfrie, skal vi erstatte flere . med ?..

// ReferenceError: user is not defined
user?.address;

Kortslutning (Short-circuiting)

Som nvnt tidligere stopper ?. straks (kortslutter) evalueringen, hvis venstredelen ikke eksisterer.

S hvis der er yderligere funktionskald eller operationer til hjre for ?., vil de ikke blive udfrt.

For eksempel:

let user = null;
let x = 0;

user?.sayHi(x++); // ingen "user", s udfrelsen nr ikke sayHi-kaldet og x++

alert(x); // 0, vrdi ikke inkrementeret

Andre varianter: ?.(), ?.[]

Den valgfrie kdning ?. er ikke en operator, men en srlig syntaks, der ogs fungerer med funktioner og firkantede parenteser.

For eksempel bruges ?.() til at kalde en funktion, der mske ikke eksisterer.

I koden nedenfor har nogle af vores brugere admin-metoden, og nogle har ikke:

let userAdmin = {
  admin() {
    alert("Jeg er admin");
  }
};

let userGuest = {};

userAdmin.admin?.(); // Jeg er admin

userGuest.admin?.(); // intet sker (metoden findes ikke)

Her bruger vi i begge linjer frst punktum (userAdmin.admin) til at f admin-egenskaben, fordi vi antager, at user-objektet eksisterer, s det er sikkert at lse fra det.

Derefter tjekker ?.() venstredelen: hvis admin-funktionen findes, s krer den (det glder for userAdmin). Ellers (for userGuest) stopper evalueringen uden fejl.

?.[]-syntaksen fungerer ogs, hvis vi gerne vil bruge firkantede parenteser [] til at f adgang til egenskaber i stedet for punktum .. Ligesom i de tidligere tilflde tillader det at lse en egenskab sikkert fra et objekt, der mske ikke eksisterer.

let key = "firstName";

let user1 = {
  firstName: "John"
};

let user2 = null;

alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined

Vi kan ogs bruge ?. med delete:

delete user?.name; // slet user.name hvis user eksisterer

let user = null;

user?.name = "John"; // Fejl, virker ikke
// fordi det evalueres til: undefined = "John"

Opsummering

Den valgfrie kdning ?.-syntaks har tre former:

1. obj?.prop returnerer obj.prop hvis obj eksisterer, ellers undefined.
2. obj?.[prop] returnerer obj[prop] hvis obj eksisterer, ellers undefined.
3. obj.method?.() kalder obj.method() hvis obj.method eksisterer, ellers returnerer undefined.

Som vi kan se, er alle tre former enkle og ligetil at bruge. ?. tjekker venstredelen for null/undefined og tillader evalueringen at fortstte, hvis det ikke er tilfldet.

En kde af ?. tillader sikker adgang til indlejrede egenskaber.

Vi br dog anvende ?. med omtanke, kun hvor det er acceptabelt iflge vores kodelogik, at venstredelen ikke eksisterer. S det ikke skjuler programmeringsfejl for os, hvis de opstr.