Desestruturamento

E ae galera… Estamos mais uma vez aqui para falar do ES6.  E hoje vamos falar de algo que tem um nome difícil mas uma aplicação fácil.

Em vários post eu sempre digo que o ES6 veio para reduzir código repetitivo e facilitar a leitura do código. O desestruturamento não é diferente, com ele podemos retirar facilmente elementos de um objeto ou array e usando a mesma sintaxe de construção de dados para retirar dados.

Vamos criar um objeto user para poder mostrar como o desestruturamento funciona. Mas antes vamos relembrar como era feitos na versão anterior do JS. Vamos pegar apenas o nome do nosso usuário:

Captura de Tela 2018-03-10 às 12.12.37 PM

De formar bem simples, podemos passar o objeto e com a notação do ponto pegar a propriedade name do objeto, armazenar numa constante e seguir… Mas com o desestruturamento, ficou ainda mais fácil. Vejamos o exemplo:

Captura de Tela 2018-03-10 às 12.15.51 PM.png

Notou a diferença? Não? Vamos lá… Com o desestruturamento não é mias necessário fazer o uso da notação de ponto para acessar uma propriedade de um objeto. Podemos passar apenas a propriedade que queremos capturar entre chaves e dizer qual o objeto será desestruturado. E o retorno dessa constante será justamente a propriedade. Vamos retirar agora o sobrenome e o email das duas formas.

Captura de Tela 2018-03-10 às 12.21.22 PM

Notaram a diferença agora? Antes, seria necessário criar uma variável para cara uma das propriedades que seriam retiradas do objeto. Com o desestruturamento, podemos em apenas uma linha selecionar todas as propriedades e o próprio operador criar as variáveis com o mesmo nome da propriedade a ser retirada. Deixando o código mais limpo e fácil de compreender.

O mais legal disso tudo, é saber que o mesmo pode ser feito em arrays. Vamos pegar um exemplo… Um array de cores e vamos pegar a primeira e a ultima cor desse array:

Captura de Tela 2018-03-10 às 12.28.01 PM

Esse é o modo padrão, mas como seria com o desestruturamento?

Captura de Tela 2018-03-10 às 12.30.27 PM

E aquele monte de virgula ali? Que bruxaria é essa?

Calma… Vamos lá, quando fazemos a desestruturação de um array, estamos atribuindo uma variável para cara elemento no array que queremos capturar. No nosso exemplo queremos pegar o primeiro e o ultimo valor. Então devemos colocar a variável na posição que queremos capturar, deixar vazio os elementos que não serão capturados. Ficou claro?

 

Beleza Marcus, exemplos legais… Mas mostra algo prático, algo que a gente vá ver no cotidiano como desenvolvedor.

Vamos sim… A minha motivação para o post de hoje, foi justamente uma solução que tive que executar essa semana. Vou mostrar de uma forma simplificada o problema e a solução.

De forma simplificada o problema era, pegar apenas o nome e o endereço de uma pessoa atrás de um filtro aplicado em um array de objetos. Mais ou menos assim:

Captura de Tela 2018-03-10 às 12.43.58 PM

Como eu faço para pegar apenas o nome e o endereço do segundo elemento em nosso array? Ai pensei… Vou desestruturar esse array e o objeto dentro dele.

Como???

Captura de Tela 2018-03-10 às 12.57.33 PM.png

O desestruturamento veio para facilitar MUITO a nossa vida. E como já é de costume aqui no blog. Segue uma pequena lista de exercícios para vocês fazerem!!!

Basta entrar no nosso GitHub para ter acessos as questões.

 

 

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s