2

Entenda o que é desestruturação no JavaScript de uma vez por todas!

#JavaScript
Danilo Lima
Danilo Lima

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!


Referências


0
27

Comentários (0)

None

Brasil