Há duas maneiras de definir, alterar e acessar as propriedades de um objeto: notação por ponto e notação por colchetes.
Notação de ponto
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." }