3 Métodos Poderosos Para Acessar Propriedades em Objetos - Debug Everything

Prévia do material em texto

3 Métodos Poderosos Para Acessar Propriedades em Objetos3 Métodos Poderosos Para Acessar Propriedades em Objetos
JAVASCRIPTJAVASCRIPT
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:
Utilizar o assessor . com a propriedade: object.property
Utilizar o nome da propriedade entre colchetes: objeto['propriedade']
Utilizando desestruturação de objetos: const { propriedade } = objeto
Vamos 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.
Conteúdo
Como criar Objetos em Javascript
Como acessar propriedades em Objetos Javascript
Método 1: Assessor de propriedade ponto .
Considerações sobre o método
Método 2: Utilizando colchetes
Método 3: Desestruturação de Objetos
Considerações sobre o método
Variável alias
Nome dinâmico da propriedade

https://debugeverything.com/category/javascript/
https://debugeverything.com/
Como criar Objetos em Javascript
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 de�nida.
//{key : value} 
{userName: "@EverythingDebug" }
A forma mais simples e mais e�ciente 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 
 };
Como acessar propriedades em Objetos Javascript
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.
Método 1: Assessor de propriedade ponto .
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
Conclusão

https://www.caelum.com.br/apostila-java-orientacao-objetos/orientacao-a-objetos-basica/#mtodos-com-retorno
https://debugeverything.com/
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 especi�co para isso aqui.
Escolha esse método quando o nome da propriedade for conhecida
antecipadamente.
Considerações sobre o método
Essa propriedade funciona muito bem apenas quando os
identi�cadores(chaves) são validos.
Identi�cadores Válidos:
Um identi�cador válido em JavaScript pode conter letras no formato Unicode,
$ , _ , e dígitos 0…9.
{ 
 "title": "Debug", 
 "$title": "Debug", 
 "_title": "Debug", 
 "title9": "Debug", 
}
Identi�cadores Inválidos:

https://debugeverything.com/javascript-como-acessar-e-processar-objetos-aninhados/
https://debugeverything.com/
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 signi�ca que você não pode utilizar esse tipo de
identi�cador. Signi�ca 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.
Método 2: Utilizando colchetes
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

https://debugeverything.com/
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 identi�cadores 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

https://debugeverything.com/
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
exempli�car como você pode utilizar esse método.
Método 3: Desestruturação de Objetos
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:
consttitle = 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 �caria assim:

https://debugeverything.com/
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 de�ne 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;
Considerações sobre o método
O método de desestruturação tem outras abordagens muito úteis que vamos
discutir agora, que agrega ainda mais valor a esse método.
Variável alias
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"

https://debugeverything.com/
Nome dinâmico da propriedade
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 exempli�car:
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.
Conclusão
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 identi�cador 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.

https://debugeverything.com/
Até a próxima.
Deixe uma resposta 
O seu endereço de e-mail não será publicado. Campos obrigatórios são
marcados com *
Comentário
Nome *
E-mail *
Site
 Salvar meus dados neste navegador para a próxima vez que eu comentar.
     
PUBLICAR COMENTÁRIO
CATEGORIAS
Banco de dados
Search… 

whatsapp://send?text=3%20M%C3%A9todos%20Poderosos%20Para%20Acessar%20Propriedades%20em%20Objetos - https://debugeverything.com/como-acessar-propriedades-em-objetos/
https://www.facebook.com/sharer.php?u=https://debugeverything.com/como-acessar-propriedades-em-objetos/
https://twitter.com/share?url=https://debugeverything.com/como-acessar-propriedades-em-objetos/
mailto:enteryour@addresshere.com?subject=3%20M%C3%A9todos%20Poderosos%20Para%20Acessar%20Propriedades%20em%20Objetos&body=Check%20this%20out:%20https://debugeverything.com/como-acessar-propriedades-em-objetos/
https://pinterest.com/pin/create/button/?url=https://debugeverything.com/como-acessar-propriedades-em-objetos/&media=https://debugeverything.com/wp-content/uploads/2020/07/4-dicas-para-usar-o-me%CC%81todo-forEach-de-forma-eficiente-1024x240.png&description=3%20M%C3%A9todos%20Poderosos%20Para%20Acessar%20Propriedades%20em%20Objetos
https://www.linkedin.com/shareArticle?mini=true&url=https://debugeverything.com/como-acessar-propriedades-em-objetos/&title=3%20M%C3%A9todos%20Poderosos%20Para%20Acessar%20Propriedades%20em%20Objetos
https://debugeverything.com/category/banco-de-dados/
https://debugeverything.com/
Em Destaque
Fora da caixa
HTML
Javascript
Node.js
Programando Do Zero
Python
Tech Lead
RECENT TWEETS
Tweets por @EverythingDebug
25 de jan. de 2021
 Debug Everything Retweetou
Parallel testing support lands in Laravel 8 tomorrow. 
 
 
Inserting Data in a Document
 
We can then use the save() method directly in our model to persist the data.
 
In this post, I will show how to create, insert, update, and delete data in #MongoDB.
 
Learn more… bit.ly/3gGK9lJ#100DaysOfCode #javascript #CodeNewbie 
 
Taylor Otwell 
@taylorotwell
Debug Everything
@EverythingDebug

https://debugeverything.com/category/banco-de-dados/
https://debugeverything.com/category/destaque/
https://debugeverything.com/category/fora-da-caixa/
https://debugeverything.com/category/html/
https://debugeverything.com/category/javascript/
https://debugeverything.com/category/nodejs/
https://debugeverything.com/category/programando-do-zero/
https://debugeverything.com/category/python/
https://debugeverything.com/category/tech-lead/
https://twitter.com/EverythingDebug
https://support.twitter.com/articles/20175256
https://twitter.com/taylorotwell/status/1353749788404174852
https://twitter.com/intent/like?tweet_id=1353749788404174852
https://twitter.com/hashtag/MongoDB?src=hash
https://t.co/NsQszE6ete
https://twitter.com/hashtag/100DaysOfCode?src=hash
https://twitter.com/hashtag/javascript?src=hash
https://twitter.com/hashtag/CodeNewbie?src=hash
https://twitter.com/taylorotwell
https://twitter.com/taylorotwell
https://twitter.com/EverythingDebug
https://twitter.com/EverythingDebug
https://twitter.com/EverythingDebug/status/1343693643291488257/photo/1
https://debugeverything.com/
Incorporar Ver no Twitter
28 de dez. de 2020 
Middlewares are functions that are passed control during the execution of asynchronous functions.
Pre middleware functions are executed one after another when each middleware calls next.
MongoDB introduction bit.ly/3gGK9lJ#100DaysOfCode #codeNewbie #mongodb 
Debug Everything
@EverythingDebug
Copyright 2021 © Debug Everything

https://publish.twitter.com/?url=https%3A%2F%2Ftwitter.com%2FEverythingDebug
https://twitter.com/EverythingDebug
https://twitter.com/EverythingDebug/status/1343693643291488257
https://twitter.com/intent/like?tweet_id=1343693643291488257
https://t.co/NsQszE6ete
https://twitter.com/hashtag/100DaysOfCode?src=hash
https://twitter.com/hashtag/codeNewbie?src=hash
https://twitter.com/hashtag/mongodb?src=hash
https://twitter.com/EverythingDebug/status/1343693643291488257/photo/1
https://twitter.com/EverythingDebug
https://twitter.com/EverythingDebug
https://debugeverything.com/