Entenda o que é desestruturação no JavaScript de uma vez por todas!
- #JavaScript
E aí Dev, tudo bem? Outro dia eu estava lembrando da dificuldade que tive lá no começo dos meus estudos sobre essa expressão do JavaScript ES6, á primeira vista me pareceu complexo, mas fica tranquilo! É mais simples do que você pensa e foi pensando nisso que escrevi esse post, para introduzir esse conceito e ajudar você entendê-lo de uma vez por todas e começar a praticar. Vamos nessa?!
Mas afinal o que é essa tal de desestruturação no JavaScript?
A desestruturação é basicamente um jeito novo, diferente e mais simples de se manipular objetos e arrays dentro do JavaScript.Foi introduzido no JavaScript ES6 e tornou muito mais agradável e limpo os códigos que escrevemos para manipularmos esses tipos de dados, pois antes dela dependendo do tamanho do objeto que estávamos manipulando e de quantas propriedades ele tinha ou o quão complexo ele era, nosso código podia ficar muito grande e bagunçado!
Desestruturação de objetos
Por exemplo, imagine que temos um objeto chamado pessoa que tem duas propriedades, nome e idade:
var pessoa = {
nome: "Maria",
idade: 20
};
Nas versões anteriores do JavaScript, para acessarmos as propriedades desse objeto podemos fazer o seguinte:
var nome = pessoa.nome;
var idade = pessoa.idade;
console.log(nome,idade) //Maria 20;
Porém com a introdução da desestruturação de objetos no JavaScript ES6 podemos acessar as propriedades desse objeto assim:
const {nome,idade} = pessoa;
console.log(nome,idade) //Maria 20;
(Repare que utilizei a palavra “const”, mas não se preocupe com ela agora, pois pretendo abordar sobre ela em outro post, mas por enquanto saiba ela tem o mesmo papel de “var”, que é criar uma variável!)
Perceba que as duas maneiras tem o mesmo resultado, porém com a desestruturação do objeto escrevemos menos e nosso código fica mais limpo.
Desestruturação com objetos compostos
A desestruturação facilita ainda mais quando trabalhamos com objetos compostos, por exemplo:
var pessoa = {
nome: "Diana",
idade: 25,
endereco:{
rua:"Bela Cintra",
numero: 55,
cidade: "São Paulo"
}
}
Aqui temos um objeto composto chamado pessoa e dentro dele temos outras propriedades e objetos, nas versões anteriores da linguagem, para acessarmos as propriedades rua e número, por exemplo, podemos fazer o seguinte:
var rua = pessoa.endereco.rua;
var numero = pessoa.endereco.numero;
console.log(rua,numero) //Bela Cintra 55
Esse código está relativamente pequeno, agora imagine se fossemos acessar cada propriedade dentro de pessoa ou ainda se o objeto pessoa fosse bem maior, com ainda mais propriedades e objetos dentro dele, imaginou aí? Complicado né? Nosso código iria começar a ficar desnecessariamente grande e redundante.
Agora olha só como fica quando usamos desestruturação para manipular este mesmo objeto:
const {endereco:{rua},endereco:{numero}} = pessoa;
console.log(rua,numero) //Bela Cintra 55
Viu só a diferença? Nesse código acima você basicamente disse “JavaScript vai lá dentro do objeto pessoa, procura pelo objeto endereço e me traz os valores das propriedades rua e numero”. Muito simples não é?!
Renomeando as variáveis
E mais! É possível renomear as propriedades que você retirou de dentro do objeto pessoa, olha só:
const {endereco:{rua:minhaRua},endereco:{numero:meuNumero}} = pessoa;
console.log(minhaRua,meuNumero) //Bela Cintra 55
Passando objetos como argumento de função
Uma outra coisa muito interessante é a possibilidade da gente usar a desestruturação para passar argumentos para funções, olha só isso:
const pessoa = {
nome: "Diana",
idade: 25
};
function mostraNome({nome}){
console.log(nome)
}
mostraNome(pessoa) // Diana
No código acima basicamente dissemos “JavaScript eu to te passando o objeto pessoa como parâmetro da função mostraNome, mas é pra você extrair dele apenas a propriedade nome e mostrar no console do navegador”.
Atribuição por desestruturação
Uma coisa muito interessante que veio com esse conceito de desestruturação foi a possiblididade de atribuir valore á objetos e arrays. Olha só que demais!
Atribuição em objetos
const {nome,idade} = {nome:"João", idade:20};
console.log(item,quantidade) //João 20
Atribuição em arrays
const [item,quantidade] = ["Arroz",5];
console.log(item,quantidade) //Arroz 5
Repare que o JavaScript vai atribuindo os valores ás variáveis em sequência, índice á índice, o valor do primeiro índice do array é atribuído á primeira variável, o valor do segundo índice é atribuído na segunda variável e assim por diante.
Para adicionar uma nova variável, e a ela um valor fazemos o seguinte:
const [item,quantidade,preco] = ["Arroz",5,4.50];
console.log(item,quantidade) //Arroz 5 4.50
Da mesma maneira como atribuímos valor á um array por desestruturação podemos fazer como fizemos com os objetos, extrair apenas os valores que queremos:
const compras = ["Feijão",5.50];
const [item,preco] = compras
console.log(item,preco) //Feijão 5.50
Também podemos atribuir o resto dos elementos do array á uma nova variável:
const [item,...quantidadePreco] = ["Feijão",5,5.50];
console.log(item) //Feijão
console.log(quantidadePreco) //[6,5.50]
E para finalizar, também podemos inverter o valor das variáveis do array, olha isso:
let [item,preco] = ["Macarrão",3.50];
[item,preco] = [preco,item]
console.log(item,preco) //3.50 Macarrão
Conclusão
Ufa! Chegamos ao fim, esse foi apenas um post introdutório sobre desestruturação no JavaScript ES6, e se você estudar e praticar tenho certeza que vai mandar muito bem ao usar esta expressão e seus códigos vão ficar uma belezura quando manipular objetos e arrays!
Para complementar seus estudos e se aprofundar mais dá uma olhada na documentação do MDN!
E me siga no Linkedin para não perder os próximos posts, pois eu vou te notificar sobre as novidades!
Valeu Dev, Até a próxima!
