Javascript nos oferece três diferente formas para acessar as propriedades em um Objeto, todas são muito uteis e podem ser combinadas entre si. As métodos são:
. com a propriedade: object.propertyobjeto['propriedade']const { propriedade } = objetoVamos ver como funciona cada sintaxe para acessar propriedades em objetos. E entender quando é razoável, dependendo da situação, usar de uma forma ou outra.
Antes de entender como acessar as propriedades em objetos, vamos ver como podemos criar nossos objetos.
Objetos em Javascript são conjuntos de chaves-valores que diferentemente dos arrays, não possuem ordem definida.
//{key : value}
{userName: "@EverythingDebug" }
A forma mais simples e mais eficiente de criar um Objeto em Javascript é utilizando chaves {}. Você precisa simplesmente criar uma variável, no exemplo abaixo chamei a variável de myProfile, e passar as propriedades para essa variável, bem simples.
const myProfile = {
title: "@EverythingDebug",
url: "https://twitter.com/EverythingDebug",
tweets: 9,
followers: 4,
following: 6
};
Vamos listar aqui os três métodos que você pode utilizar para acessar propriedades em objetos, cada uma com a sua utilidade. Cada método pode se encaixar melhor, dependendo da situação ou do que o projeto demandar.
.Eu confesso que não é o nome mais elegante, mas o assessor em si é bastante útil. O nome original, em inglês é Dot property accessor.
Em Javascript, é a forma mais comum de acessar propriedades em objetos. Java também utliza esse mesmo formato para acessar propriedades em objetos.
Em Javascript essa é a sintaxe que você vai usar:
expressão.identificador
expressão deve estar associada a um objeto, e identificador é o nome da propriedade que você gostaria de acessar.
Por exemplo, para o nosso objeto myProfile, vamos tentar acessar as propriedades title e tweets.
const myProfile = {
title: "@EverythingDebug",
url: "https://twitter.com/EverythingDebug",
tweets: 9,
followers: 4,
following: 6
};
console.log(myProfile.title); // @EverythingDebug
console.log(myProfile.tweets); // 9
myProfile.title é um assessor de propriedade ponto que lê o nome da propriedade do objeto myProfile.
Você pode usar o assessor de propriedade ponto em uma cadeia para acessar propriedades mais profundas de um objeto: object.prop1.prop2. Tem um artigo especifico para isso aqui.
Escolha esse método quando o nome da propriedade for conhecida antecipadamente.
Essa propriedade funciona muito bem apenas quando os identificadores(chaves) são validos.
Identificadores Válidos:
Um identificador válido em JavaScript pode conter letras no formato Unicode, $, _, e dígitos 0…9.
{
"title": "Debug",
"$title": "Debug",
"_title": "Debug",
"title9": "Debug",
}
Identificadores Inválidos:
Se você quiser usar esse método para acessar propriedades em objetos, Javascript não vai permitir que você use alguns caracteres nas propriedades dos objetos. Como o ponto ., hífen - ou se iniciar com um número.
{
"title.name": "Debug",
"title-name": "Debug",
"5title": "Debug",
}
Vamos rodar os exemplos acima e ver quais resultados obtemos utilizando cada um deles:
const myObject = {
"title": "Debug",
"$title": "Debug",
"_title": "Debug",
"title9": "Debug",
"title.name": "Debug",
"title-name": "Debug",
"5title": "Debug",
}
//valid identifiers
console.log(myObject.title); //Debug
console.log(myObject.$title); //Debug
console.log(myObject._title); //Debug
console.log(myObject.title9); //Debug
//not valid identifiers
console.log(myObject.title.name); //undefined
console.log(myObject.title-name); //NaN
console.log(myObject.5title); // throws SyntaxError: Unexpected number
Mas em Javascript, isso não significa que você não pode utilizar esse tipo de identificador. Significa que você não pode utiliza-los com esse método.
Para resolver esse tipo de problema, Javascript oferece outras maneiras de acessar propriedades em Objetos.
A sintaxe para esse método também é bem simples:
expressão[expressão]
Essa sintaxe é bem conhecida quando falamos de Arrays, mas como sabemos (ou pelo menos deveríamos), em Javascript, Arrays são um tipo especial de objeto.
A primeira expressão deve estar associada a um objeto, e a segunda expressão deve retornar ou expressar o nome de uma propriedade. Vamos entender melhor:
Podemos acessar a propriedade colocando o nome da propriedade diretamente entre colchetes:
const myProfile = {
title: "@EverythingDebug",
url: "https://twitter.com/EverythingDebug",
tweets: 9,
followers: 4,
following: 6
};
console.log(myProfile['title']); // "@EverythingDebug"
Ou, nós podemos criar uma variável e associar com o nome da propriedade, por exemplo:
const myProfile = {
title: "@EverythingDebug",
url: "https://twitter.com/EverythingDebug",
tweets: 9,
followers: 4,
following: 6
};
const myTitle = 'title';
const myFollowers = 'followers';
console.log(myProfile[myTitle]); // "@EverythingDebug"
console.log(myProfile[myFollowers]); // 4
Utilizando esse método para acessar propriedades em objetos, você consegue utilizar os identificadores que não eram possíveis com o primeiro método:
const myObject = {
"title.name": "Debug",
"title-name": "Debug",
"5title": "Debug",
}
//Using brackets to access objects properties
//the identifiers are are now valid
console.log(myObject['title.name']); //Debug
console.log(myObject['title-name']); //Debug
console.log(myObject['5title']); //Debug
Você pode utilizar esse método quando a propriedade for dinâmica, ou seja, ela pode ser alterada durante a execução do programa.
Esse método nos permite trabalhar com as propriedades de formas bem interessantes. Olha o exemplo abaixo, onde eu consigo acessar as propriedades de um Objeto de forma dinâmica.
const myForm = {
input_1: "Name",
input_2: "Last Name",
input_3: "Age",
}
let size = Object.keys(myForm).length;
for (let i = 1; i < size + 1; i++) {
console.log(myForm["input_" + i]);
}
De longe essa não é a melhor a solução para essa situação, mas serve para exemplificar como você pode utilizar esse método.
A atribuição por desestruturação permite atribuir as propriedades de um array ou objeto a variáveis usando uma sintaxe que se parece com array ou objeto literais.
{ identificador } = expressão;
Para acessar propriedades em objetos utilizando desestruturação, você vai usar a sintaxe acima. Onde expressão deve estar associada a um objeto, e identificador ao nome da propriedade que você gostaria de acessar.
Para acessar propriedades em objetos ou Arrays, como já vimos você pode fazer assim:
const title = myObject.title;
const name = myObject.name;
const title = myObject['title'];
const name = myObject['name'];
Agora utilizando a sintaxe de desestruturação para acessar propriedades em objetos, o mesmo código acima ficaria assim:
const { title, name } = myObject;
A sintaxe é mais limpa e bem mais direta do que os métodos anteriores.
E podemos acessar o valor da propriedade, da mesma forma que faríamos com as varáveis no primeiro exemplo:
const myObject = {title: 'My Title', name: 'My Name'};
const {title, name} = myObject;
console.log(name); // "My Name"
console.log(title); // "My Title"
const {title, name} = myObject é uma desestruturação que define duas variáveis, title e name, como os valores das propriedades de mesmo nome.
Você pode utilizar esse método para extrair quantas propriedades você precisar.
const { identificador1, identificador2, .., identificadorN } = expressão;
O método de desestruturação tem outras abordagens muito úteis que vamos discutir agora, que agrega ainda mais valor a esse método.
Se você quiser de acessar propriedades em objetos, mas precisa criar um nome de variável diferente do nome da propriedade, você pode usar o aliasing.
const { identificador: nomeDaVariavel } = expressão;
identificador é o nome da propriedade a ser acessada, nomeDaVariável é o nome da variável que você quer criar, e expressão deve ser associada à um objeto. Após a desestruturação, a variável nomeDaVariável contém o valor da propriedade.
Aqui vai um exemplo:
const myObject = {title: 'My Title', name: 'My Name'};
const {title: myObjectTitle} = myObject;
console.log(myObjectTitle); // "My Title"
O que torna a desestruturação de objetos ainda mais útil é que você pode extrair para as propriedades das variáveis com valores dinâmicos:
const { [expressão]: identificador } = expressão;
A primeira expressão deve estar associada com o nome da propriedade que você quer extrair, o identificador deve indicar o nome da variável após a desestruturação, e a última expressão deve estar associada com o objeto.
Vamos exemplificar:
const myTitle= 'title';
const myObject = {title: 'My Title', name: 'My Name'};
const {[myTitle]: myObjectTitle} = myObject;
console.log(myObjectTitle); // "My Title"
const {[myTitle]: myObjectTitle} = myObject é uma desestruturação de objetos que, dinamicamente, em tempo de execução, determina que propriedade extrair.
JavaScript fornece um monte de boas maneiras para acessar propriedades em objetos.
O primeiro método, utilizando a sintaxe do ponto ., object.property funciona bem quando você conhece a variável antecipadamente.
Quando o nome da propriedade é dinâmica ou não é um identificador válido, uma alternativa melhor é utilizar o segundo método, e colocar a propriedade entre colchetes: object[propertyName].
A desestruturação do objeto extrai a propriedade para uma variável diretamente: { propriedade } = objeto. Além disso, é possível extrair as propriedades de forma dinâmicas (determinadas em tempo de execução): { [propertName]: variável }. = objeto.
Não há formas boas ou ruins de acessar as propriedades. Escolha de acordo com a sua situação particular.
Até a próxima.
Parabéns e obrigado, me ajudou um bocado!
Obrigado por compartilhar. Explicação simples e direta.
Deixe um comentário