Olá coders! 😁 Hoje eu vou falar um pouco sobre desestruturação em javascript, espero que gostem do que vem a seguir. Este é um artigo bem básico para quem quer relembrar ou visualizar rapidamente o conceito, nada muito aprofundado.
A desestruturação é um recurso que foi adicionado no Javascript ES6, como o próprio nome diz, ela permite desestruturar algo, de forma mais simples, retirando o que precisamos, ou “desembalando”. Podemos usa-la para remover elementos de arrays e objetos, de forma bem direta. É uma ótima opção para deixar o código limpo e enxuto. Ao decorrer do texto, vamos entender alguns tipos de desestruturação.
Desestruturação Aninhada
nome: ‘Bob‘,
raca: ‘Vira-lara‘,
idade: 5,
dono: {
nomeDono: ‘Tássio‘,
idadeDono: 26,
endereco: {
rua: ‘Rua Daora‘,
numero: 234,
}
}
}
// Acessando os valores:
const idade = Cachorro.idade //5
const dono = Cachorro.dono.nomeDono // ‘Tássio’
const idade = Cachorro.dono.endereco.rua // ‘Rua Daora’
Observe o exemplo acima. É um objeto Cachorro e é com ele que vamos trabalhar ao longo do artigo. Veja que, para acessar os valores, é necessário replicar Cachorro. várias vezes .
nome,
raca,
idade,
dono: {
nomeDono,
idadeDono,
endereco: { rua, numero }
}
} = Cachorro;
// A desestruturação acima é equivalente a:
const nome = ‘Bob‘;
const raca = ‘Vira-lata‘;
const idade = 5;
const nomeDono = ‘Tássio‘;
const idadeDono = 26;
const rua = ‘Rua Daora‘;
const numero = 234;
Agora, com a aplicação da desestruturação, o processo é menos trabalhoso. As propriedades do objeto já são transformadas em variáveis diretamente, sem precisar usar Cachorro. repetidamente. Esse tipo de desestruturação é conhecida como aninhada pois lida com objetos ou arrays que contêm outros objetos ou arrays internos. Para extrair as propriedades é necessário “mergulhar”(ou “aninhar”) na estrutura.
Desestruturação com Alias
nome: nomeCachorro,
raca: racaCachorro,
idade: idadeCachorro,
dono: {
nomeDono: nomeProprietario,
idadeDono: idadeProprietario,
endereco: { rua: ruaDono, numero: numeroCasa }
}
} = Cachorro;
// A desestruturação acima é equivalente a:
const nomeCachorro = ‘Bob‘;
const racaCachorro = ‘Vira-lata‘;
const idadeCachorro = 5;
const nomeProprietario = ‘Tássio‘;
const idadeProprietario = 26;
const ruaDono = ‘Rua Daora‘;
const numeroCasa = 234;
No código acima as variáveis foram renomeadas, mas os valores permanecem os mesmos. Essa é a desestruturação alias, bastante necessária quando queremos evitar conflitos de nomes no nosso projeto ou quando precisamos que nossas variáveis tenham nomes mais significativos que se encaixem com o contexto.
Observe que nomeCachorro é uma nova variável que armazena o valor da propriedade nome do objeto Cachorro. É importante ressaltar que nomeCachorro não altera nem substitui a propriedade nome no objeto Cachorro. A desestruturação cria novas variáveis (com nomes diferentes) para os valores das propriedades, mas o objeto original permanece inalterado.
Tenho falado aqui sobre a Desestruturação Alias, mas por que o nome é “Alias”? 🤔
Bem, se você for traduzir do inglês para o português, “alias” significa “apelido”, ou seja, estamos criando apelidos para as propriedas do objeto.
Desestruturação Rest/Spread
Rest (…)
// A desestruturação acima é equivalente a:
const nome = ‘Bob‘;
const raca = ‘Vira-lata‘;
const resto = {
idade: 5,
dono: {
nomeDono: ‘Tássio‘,
idadeDono: 26,
endereco: {
rua: ‘Rua Daora‘,
numero: 234
}
}
};
No exemplo acima nome e raca foram desestruturados e armazenados em variáveis separadas, já resto é um novo objeto que contém todas as outras propriedades do objeto Cachorro. É isso que o operador rest permite fazer: capturar o resto das propriedas de um objeto ou elementos de um array que não foram desestruturados.
Abaixo um exemplo com array:
const [unidade, dezena, …resto] = numeracao;
console.log(unidade); // 1
console.log(dezena); // 10
console.log(resto); // [100, 1000, 10000]
Em unidade e dezena pegamos dois primeiros elementos do array numeracao, e o resto é um novo array que contém todos os elementos restantes.
Spread (…)
O operador spread (…) usa o mesmo sinal que o operador rest, mas é usado de maneira diferente. Enquanto o operador rest coleta elementos ou propriedades restantes, o operador spread expande um objeto ou array. Isso é especialmente útil para copiar e combinar objetos e arrays.
Exemplo com Objeto:
const cachorroComOutroDono = { …Cachorro, dono: outroDono };
console.log(cachorroComOutroDono);
// { nome: ‘Bob’, raca: ‘Vira-lata’, idade: 5, dono: { nomeDono: ‘Pedro’, idadeDono: 30 } }
No exemplo acima:
O objeto Cachorro é copiado usando o operador spread (…Cachorro), criando uma nova instância com todas as propriedades do objeto original.
O novo objeto cachorroComOutroDono é então combinado com o objeto outroDono, onde a propriedade dono do objeto Cachorro é substituída pela propriedade dono do objeto outroDono.
Exemplo com array:
const consoantes = [b, c, d];
const letras = […vogais, …consoantes];
console.log(letras); // [a, e, i, b, c, d]
No exemplo acima o array vogais é expandido usando o operador spread (…vogais), e o mesmo é feito com o array consoantes . Ambos os arrays são combinados no novo array letras.
Função com Desestruturação
Com a desestruturação em funções você pode desestruturar objetos diretamente nos parâmetros da função. Isso torna a função mais legível e clara, principalmente quando você está lidando com objetos complexos.
nome,
raca,
idade,
dono: {
nomeDono,
idadeDono,
endereco: { rua, numero }
}
}) {
console.log(`Nome do Cachorro: ${nome}`);
console.log(`Raça: ${raca}`);
console.log(`Idade: ${idade}`);
console.log(`Nome do Dono: ${nomeDono}`);
console.log(`Idade do Dono: ${idadeDono}`);
console.log(`Rua: ${rua}`);
console.log(`Número: ${numero}`);
}
printCachorro(Cachorro);
Observe que na função printCachorro, em vez de acessar Cachorro.nome, Cachorro.raca, etc., você pode acessar nome, raca, etc., diretamente nos parâmetros. A função define seu parâmetro como um objeto com uma estrutura que corresponde ao objeto Cachorro. Isso possibilita extrair todas as propriedades necessárias diretamente quando a função é chamada.
Além disso, também podem ser definidos valores padrão para o caso das propriedades não estarem presentes no objeto passado para a função.
nome = ‘Desconhecido‘,
raca = ‘Desconhecida‘,
idade = 0,
dono: {
nomeDono = ‘Sem nome‘,
idadeDono = 0,
endereco: { rua = ‘Sem rua‘, numero = 0 } = {}
} = {}
} = {}) {
console.log(`Nome do Cachorro: ${nome}`);
console.log(`Raça: ${raca}`);
console.log(`Idade: ${idade}`);
console.log(`Nome do Dono: ${nomeDono}`);
console.log(`Idade do Dono: ${idadeDono}`);
console.log(`Rua: ${rua}`);
console.log(`Número: ${numero}`);
}
printCachorro({});
No exemplo acima, mesmo se o objeto passado para a função estiver vazio ou faltar alguma propriedade, a função ainda funcionará corretamente por conta dos valores padrão.
Espero que este artigo tenha sido útil para você entender entender um pouco mais sobre a desestruturação em Javascript. Lembre-se de que utilizando da maneira correta, esse método pode agregar bastante no resultado final do seu trabalho.
Se você tiver algo a recomendar, feedbacks e etc., sinta-se à vontade para compartilhá-los nos comentários! Até logo, te vejo no próximo artigo!🖖🏽😄
