Funzioni di accesso proprietà

Esistono due modi per impostare, modificare e accedere alle proprietà di un oggetto: la notazione con punti e la notazione tra parentesi.

Come osservato in alcuni esempi precedenti, la notazione con punti utilizza un punto (.) tra una e la chiave di proprietà a cui si accede:

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

Puoi utilizzare la notazione punto per accedere, modificare o creare nuove proprietà utilizzando operatori delle assegnazioni:

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

L'accodamento delle chiavi delle proprietà tramite la notazione a punti ti consente di accedere alle proprietà di oggetti che sono a loro volta proprietà di un oggetto:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

Tuttavia, l'utilizzo di questa sintassi quando una chiave specificata nella catena potrebbe non essere definita può causare errori. Nell'esempio seguente, myMissingProp non è un dell'oggetto myObj, quindi il tentativo di accedere a myObj.myMissingProp porta a undefined. Il tentativo di accedere a una proprietà su undefined, come se fosse un oggetto, genera un errore:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

Per risolvere questo problema, ES2020 ha introdotto un "operatore di concatenamento facoltativo" (?.) per accedere in sicurezza alle proprietà nidificate degli oggetti.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

Le chiavi a cui si accede utilizzando la notazione a punti non sono racchiuse tra virgolette come accade per le stringhe litterali. Questo significa che puoi utilizzare la notazione punti per accedere solo alle chiavi di proprietà che siano identificatori validi:

const myObj = {
    "1": true,
    "key with spaces": true
};

myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal

myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'

Per questo motivo, è buona norma seguire le regole per gli identificatori quando specifichi le chiavi delle proprietà, se possibile. Se non è possibile per una determinata chiave, una sintassi alternativa della notazione tra parentesi consente di impostare e accedere a chiavi di oggetti basate su stringhe che non rispettano le regole degli identificatori.

Notazione parentesi quadra

La notazione tra parentesi utilizza un insieme di parentesi ([]) contenenti un valore che valuta una stringa (o un simbolo) che rappresenta chiave della proprietà.

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

Questa sintassi è notevolmente più permissiva e potenzialmente permissiva per creare confusione, poiché il valore tra parentesi viene valutato come valore letterale stringa a prescindere dal tipo di dati. Ad esempio, qui il valore booleano false e il valore numerico 10 vengono utilizzati per accedere alle proprietà associate alle chiavi letterali di stringa "false" e "10":

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

Il punto di forza di questa sintassi sta nella sua flessibilità, che consente l'uso di stringhe create dinamicamente per accedere alle proprietà. L'esempio seguente utilizza un numero casuale per selezionare una delle tre proprietà di un oggetto:

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

Come con la notazione a punti, puoi utilizzare la notazione tra parentesi per accedere e creare nuove proprietà utilizzando gli operatori di assegnazione:

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }