Acessadores de propriedades

Há duas maneiras de configurar, alterar e acessar as propriedades de um objeto: notação por pontos e notação por colchetes.

Notação por pontos

Como já visto em alguns exemplos anteriores, a notação por pontos usa um ponto (.) entre uma e a chave de propriedade que está sendo acessada:

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

myObj.myProp;
> "String value."

Você pode usar a notação de ponto para acessar, alterar ou criar novas propriedades usando operadores de atribuição:

const myObj = {};

myObj.myProp = "String value.";

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

O encadeamento de chaves de propriedade usando a notação de ponto permite acessar as propriedades de objetos que são propriedades de um objeto:

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

myObj.myProp.childProp;
> true;

No entanto, usar essa sintaxe quando uma chave especificada na cadeia pode não ser definidos podem causar erros. No exemplo a seguir, myMissingProp não é um do objeto myObj. Portanto, ao tentar acessar myObj.myMissingProp resultados em undefined. Tentativa de acessar uma propriedade em undefined, como se for um objeto, causa um erro:

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

> myObj.myMissingProp
> undefined

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

Para resolver esse problema, o ES2020 introduziu um "operador de encadeamento opcional" (?.) para acessar com segurança propriedades aninhadas de objetos.

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

myObj.myMissingProp?.childProp;
> undefined

As chaves acessadas usando a notação de ponto não ficam entre aspas, como "string" literais são. Isso significa que é possível usar a notação de ponto para acessar apenas chaves de propriedade que são identificadores válidos:

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'

Por isso, é uma prática recomendada seguir as regras de identificador. ao especificar chaves de propriedade sempre que possível. Se isso não for possível uma sintaxe alternativa de notação de colchete permite definir e acessar Chaves de objeto baseadas em string que não seguem as regras do identificador.

Notação por colchetes

A notação por colchetes usa um conjunto de colchetes ([]) contendo um valor que avalia uma string (ou um Símbolo) que representa chave de propriedade.

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

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

Essa sintaxe é consideravelmente mais permissiva e potencialmente permissiva o suficiente ser confuso, porque o valor entre colchetes é avaliado como um literal de string independentemente do tipo de dados. Por exemplo, aqui o valor booleano false e o O valor numérico 10 são usados para acessar as propriedades associadas à string chaves literais "false" e "10" :

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

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

A força dessa sintaxe está em sua flexibilidade, permitindo o uso de strings criadas dinamicamente para acessar propriedades. O exemplo a seguir usa uma número aleatório para selecionar uma das três propriedades de um objeto:

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

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

Assim como na notação por pontos, é possível usar a notação por colchetes para acessar e criar novos propriedades, usando operadores de atribuição:

const myObj = {};

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

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