Desestruturação em Javascript
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!
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: 'fulano@fulano.com',
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
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.