Volitelné řetězení

Přes všechna vylepšení, která jazyk JavaScript přidal za posledních několik let, jako je operátor spread, výchozí hodnoty argumentů a funkce šipek, stále existuje několik funkcí, které bych rád viděl implementovat. Jednou z takových funkcí je volitelné řetězení. Volitelné řetězení umožňuje vývojářům odkazovat na vlastnosti objektu, které mohou nebo nemusí existovat, aniž by došlo k chybě.

Vezměte si následující příklad:

const person = {
  name: "David",
  skills: {
    javascript: {
      frameworks: ["MooTools", "React"],
    }
  },
  save: () => { }
};

// Property that *doesn't* exist (css)
person.skills.css.frameworks;
// Uncaught TypeError: Cannot read property 'frameworks' of undefined

Pokus o získání vlastnosti nedefinovaného rodiče má za následek TypeError který může zablokovat vaši aplikaci. V tomto případě bychom chtěli zkontrolovat, zda css vlastnost existuje:

if(
  person.skills && 
  person.skills.css && 
  person.skills.css.frameworks) {
    // ...
}

Napsal jsem obslužný program get and set nazvaný Objectifier, který usnadňuje odkazování na vlastnosti vnořených objektů, ale s návrhem Optional Chaining nyní máme nativní způsob.

Jednoduchý příklad volitelného řetězení je:

const skills = person?.skills;

Ve vzoru můžete pokračovat po řadě vnořených objektů:

const frameworks = person?.skills?.javascript?.frameworks;

Pokud vlastnost neexistuje, řetězení se zastaví a undefined je vráceno. Volitelné řetězení také podporuje syntaxi hranatých závorek:

const language = "javascript";
const frameworks = person?.skills?.[language]?.frameworks;

Můžete také volat funkci bez postihu:

// Calls save if exists, otherwise nothing
const frameworks = person?.save();

Můžete dokonce použít řetězení syntaxe na objektu nejvyšší úrovně:

addEventListener?.("click", e => { });

methodDoesntExist?.(); // undefined

Můžete dokonce použít destrukturaci s volitelným řetězením:

const { frameworks, doesntExist } = person.skills?.javascript;

Pokud chcete nastavit záložní hodnotu v případě, že hodnota není definována, můžete tak učinit pomocí ?? :

let frameworkz = person?.skills?.["javascript"]?.frameworkz ?? "react.js";

V době psaní tohoto článku se volitelné řetězení ještě neobjevuje v žádném prohlížeči, ale můžete si pohrát s volitelným řetězením v online kompilátoru Babel.

Volitelné řetězení se jeví jako poněkud kontroverzní změna. Tvrdí se, že vývojáři by měli znát a ověřovat objekty, které používají; na druhou stranu průběžná kontrola vnořených vlastností je noční můrou. Těším se na volitelné řetězení v JavaScriptu. Jaké jsou vaše myšlenky?