Desestruturação com Javascript
Tags: webdev, javascript, beginners, programming
Published: 2024-06-06 23:38:09

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

```jsx
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 . 

```jsx
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

```jsx
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 (`...`)

```jsx
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:**

```jsx
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:**

```jsx
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:**

```jsx
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.

```jsx
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.

```jsx
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!🖖🏽😄