image

Access unlimited bootcamps and 650+ courses forever

60
%OFF
Danilo Lima
Danilo Lima12/12/2020 14:37
Share

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!

Referências

Share
Comments (0)