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