Desestruturando Objetos em JavaScript - Object Destructuring
Tags: javascript, beginners, destructuring, tutorial
Published: 2024-02-27 14:14:35

Na semana passada falamos de desestruturação de arrays [aqui](https://dev.to/barobles/desestruturacao-de-arrays-em-javascript-3if5). Agora vamos entender de uma vez por todas desestruturação de objetos!

Conteúdo:
  * [Sintaxe Básica](#basic-syntax)
  * [Renomeando Propriedades](#rename)
  * [Valores Padrão](#default-values)
  * [Renomeando Variáveis e Valores Padrão](#renaming-default)
  * [Objetos Aninhados](#nested-objects)
  * [Alterando Variáveis](#mutating)


### Sintaxe Básica <a name="basic-syntax"></a>

Desestruturação é uma maneira simples de extrair dados de arrays ou objetos em **variáveis separadas**. Vamos dar uma olhada em como funciona a desestruturação de objetos.

Tomemos este objeto como exemplo:
```javascript
const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo'
};
```
Agora vamos extrair os dados de `city` e `age` usando a desestruturação: 

```javascript
const { city, age } = user;
```

Aqui, criamos duas variáveis chamadas `city` e `age`. A elas serão atribuídos os valores das propriedades de mesmo nome do objeto `user`. 

Isso representa uma grande vantagem, pois agora podemos trabalhar isoladamente com essas informações:

```javascript
console.log(city); // output: 'São Paulo'
console.log(age); // output: 28 
```

Alguns detalhes importantes devem ser anotados:

1. Observe que a propriedade `userName` foi omitida na desestruturação. Diferentemente da desestruturação de arrays, não é necessário pular manualmente as propriedades;

2. A ordem das variáveis listadas na desestruturação não importa. Veja que coloquei `city` antes de `age`, o que não resultará em erro. Isso porque em objetos, as propriedades não seguem uma ordem fixa;

3. Os nomes das variáveis podem ser alterados! Veja abaixo:


### Renomeando Propriedades <a name="rename"></a>

Podemos facilmente alterar o nome das propriedades extraídas do objeto ao mesmo tempo em que fazemos a atribuição por desestruturação. Essa recurso é bastante útil para quando queremos evitar conflitos entre nomes:

```javascript
const { city: c, age: a } = user;

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28 
```


### Valores Padrão <a name="default-values"></a>

É possível que algum dos valores extraídos seja `undefined`, o que pode ser uma fonte de bugs no seu código. Podemos evitar isso de uma maneira muito simples!

Ainda usado o objeto `user` acima, suponhamos que queremos extrair uma propriedade `nationality`, que não foi definida. Para evitar que a variável fique com o valor de `undefined`, vamos atribuir a ela um valor padrão, desta forma:

```javascript
const { city, age, nationality = 'brasileira' } = user;
```


### Renomeando Variáveis e Valores Padrão <a name="renaming-default"></a>

Além disso, é possível juntar as sintaxes acima, combinando os processos de renomear variáveis com o de definir valores padrões:

```javascript
const { 
  city: c = 'Brasília',
  age: a = 18,
  nationality: n = 'brasileira'
} = user;
```

E no caso do objeto `user`, a saída agora será esta:

```javascript
console.log(c); // output: 'São Paulo'
console.log(a); // output: 28 
console.log(n); // output: 'brasileira'
```
Perceba que o valor padrão somente será aplicado apenas para `n`, já que os outros valores foram definidos previamente.
 

### Objetos Aninhados <a name="nested-objects"></a>

Se o objeto em questão contiver outro objeto dentro dele, também é possível fazer desestruturação do objeto aninhado. Vamos acrescentar no objeto `user` as notas das disciplinas:

```javascript
const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo',
  grades: {
    math: 9.5,
    portuguese: 9.2,
    chemistry: 10,
    history: 7.5,
    geography: 7.8,
  }
};
```

Para trabalhar isoladamente com as notas, podemos fazer a desestruturação desta maneira:

```javascript
const {
  grades: {
    math, 
    portuguese, 
    chemistry, 
    history, 
    geography 
  } 
} = user;
```

E assim, os valores poderão ser acessados separadamente:

```javascript
console.log(math) // output: 9.5
console.log(portuguese) // output: 9.2
console.log(chemistry) // output: 10
console.log(history) // output: 7.5
console.log(geography) // output: 7.8
```


### Alterando Variáveis <a name="mutating"></a>

Agora vamos para a situação onde as variáveis já foram declaradas e inicializadas, como `a` e `b` abaixo:

```javascript
let a = 55;
let b = 77

const object = {
  a: 41,
  b: 27,
  c: 14
};
```
Como podemos atribuir a `a` e `b` os valores contidos no objeto? Não podemos escrever `let {a, b} = object` nem `const {a, b} = object`, uma vez que estaríamos declarando as variáveis novamente. Mas também não podemos escrever `{a, b} = object`, pois o JavaScript entende que toda linha começando com chaves `{}` é um bloco de código e isso vai gerar um erro de sintaxe no código. 

A solução está em envolver o código usando parênteses:

```javascript
({a, b} = object);

console.log(a); // output: 41
console.log(b); // output: 27
```
Assim, o JavaScript entenderá que se trata de uma desestruturação e não um bloco de código.


Obrigada por ter chegado até aqui! =)
Dúvidas, comentários, sugestões? Comenta aqui embaixo!


![meme da galinha - eu tenho muito a aprender](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91hsku9ezx37hgphehnq.jpg)