Acessadores de propriedades

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

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." }

A vinculação 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 abaixo, myMissingProp não é uma propriedade do objeto myObj. Portanto, tentar acessar myObj.myMissingProp resulta em undefined. Tentar acessar uma propriedade em undefined, como se fosse 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 são encerradas entre aspas, como os literais de string. 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, é recomendável seguir as regras de identificadores ao especificar chaves de propriedade sempre que possível. Se isso não for possível para uma chave específica, uma sintaxe alternativa de notação de colchetes permite definir e acessar chaves de objeto baseadas em string que não seguem as regras de identificador.

Notação por colchetes

A notação de colchetes usa um conjunto de colchetes ([]) que contêm um valor que avalia uma string (ou um símbolo) que representa a 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á na 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." }