Eai pessoal! Hoje venho aqui falar um pouco sobre desestruturação no javascript.
O que é desestruturação?
Se a gente der um google temos uma definição rápida, temos:
Desestruturação
substantivo feminino
ação ou efeito de desestruturar(-se).
desfazimento de estrutura, sustentação, organização; desordem, desorganização.
perda do referencial; perturbação.
Muito genérico né? hahaha. De uma forma fácil, desestruturar é desconstruir.
Imagine uma caixa e dentro dela temos diversos itens, você sabe que dentro dela tem um lápis e com isso quando você retira esse lápis de dentro dela está fazendo uma desestruturação.
No javascript não é diferente, teremos um objeto (Array/Object) que queremos retirar um item de dentro dele de forma fácil. Se liga nesse exemplo simples de atribuição:
let [a, b] = [1, 2];
console.log(a) // 1
console.log(b) // 2
De forma geral, a desestruturação funciona dessa forma (atribuindo valores a variáveis).
Desestruturando um objeto
Agora vamos dar mais um passo, imagine que temos um objeto de Pessoa e a pessoa terá um nome e uma idade, teremos algo dessa forma:
let Pessoa = {
nome: 'Matheus Martins',
idade: 23
}
Agora imagine que você está desenvolvendo um Header da sua aplicação e deseja mostrar apenas o nome dessa pessoa na sua tela, muito provavelmente você usaria: Pessoa.nome e não está errado! Mas como estamos falando de desestruturação você poderia fazer da seguinte forma:
let { nome } = Pessoa
console.log(nome) // Matheus Martins
Dessa forma, o objeto pessoa em si não importa tanto para nós e você se foca apenas na variável que deseja usar.
Certo, mas é só isso?
Cara não é só isso! O javascript permite que você use desestruturação em vários momentos do seu código e de várias formas diferentes. Meu intuito aqui só foi introduzir o conceito e logo mais irei trazer um post sobre desestruturação mais avançado com exemplos em React.
Se tu ta curioso e não aguenta esperar. Vai na documentação do MDN que tem tudo lá! E foi de lá que eu baseei esse post!
Top comments (0)