Executando verificação de segurança...
6
martinscode
2 min de leitura ·

Desestruturação em Javascript

Desestruturação

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!

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Carregando publicação patrocinada...
3
kht

Complementando com alguns detalhes:

Você não precisa usar exatamente o mesmo nome da propriedade, se quiser pode mudar. Além disso, é possível definir um valor default caso a propriedade não exista:

const Pessoa = { nomeCompleto: 'Matheus Martins', idade: 23 };

const { // propriedade nomeCompleto atribuído à variável nome
        nomeCompleto : nome,
        // se não tiver a propriedade endereco, usa como valor a string "não disponível"
        endereco = 'não disponível' } = Pessoa;

console.log(nome); // Matheus Martins
console.log(endereco); // não disponível

E ainda é possível combinar as duas formas. Por exemplo, nomeCompleto : nome = 'sem nome' se eu quiser que a propriedade nomeCompleto seja atribuída na variável nome, e caso ela não exista, o valor default seja a string 'sem nome'.

E também é possível usar em estruturas aninhadas:

const pessoa = { nome: 'Fulano de Tal', idade: 42,
    contatos: {
        email: '[email protected]',
        fone: '91234-5678',
        endereco: { logradouro: 'Rua Tal', numero: 123 }
    }
};

const { nome, contatos: { fone, endereco: { logradouro, numero = 's/n', bairro = 'bairro não informado'} } } = pessoa;

console.log(`${nome} mora em ${logradouro} ${numero} ${bairro} - telefone: ${fone}`);
// Fulano de Tal mora em Rua Tal 123 bairro não informado - telefone: 91234-5678
1
martinscode
Autor
Autor

Perfeito! Otímo comentário!
Esse é meu primeiro post aqui no TabNews, faz sentido eu complementar o post com suas observações e lhe dar o crédito por isso? Ou o comentário também fica indexado nos buscadores?

1
kht

Bom, já fiz umas buscas no Google e nos resultados também aparecem links direto para os comentários. Então acho que não precisa complementar o post, pode deixar assim mesmo.

3
eliaseas

Um bom uso da desestruturação é quando você quer clonar um objeto, algo muito util em React, pois mudanças nas propriedades não são percebidas e portanto não são renderizadas.

Exemplo:

const [ cliente, setCliente ] = useState({
  nome: "Elias",
  idade: 32,
  ativo: false,
};

...

setCliente({
  ...cliente,
  ativo: true, // como está depois, tem prioridade sobre o valor original gerado pela desestruturação.
};

Importante saber que essa desestruturação não é "deep", portanto não vai recriar objetos em um segundo nível.

1
coffeeispower

na verdade pra esse caso e melhor fazer assim:

setCliente((old) => {
  old.active = true;
  return old;
})

assim ele modifica o objeto sem fazer alocações desnecessarias.

1
1
0