Desestruturação com Javascript

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

const Cachorro = {
  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 .

const {
  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

const {
  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 (...)

const { nome, raca, ...resto } = Cachorro;

// 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 numeracao = [1, 10, 100, 1000, 10000];

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 outroDono = { nomeDono: 'Pedro', idadeDono: 30 };
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 vogais = [a, e, i];
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.

function printCachorro({
  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.

function printCachorro({
  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!🖖🏽😄

Comments

[Anderson Oliveira Bezerra]

Muito interessante mano, parabéns pelo conteúdo!

[Tássio Medeiros]

Obrigado pela força @andersonpull ! Isso me dá mais entusiasmo✨ .
Em breve, mais conteúdo por aqui.