Desestruturação em Javascript

Matheus Martins Sarmento — Mon, 20 Mar 2023 18:14:17 +0000

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!

Documentação Desestruturação

DEV Community: Matheus Martins Sarmento

Desestruturação em Javascript

O que é desestruturação?

Desestruturando um objeto

Certo, mas é só isso?