Desestruturando Objetos em JavaScript - Object Destructuring

Na semana passada falamos de desestruturação de arrays aqui. Agora vamos entender de uma vez por todas desestruturação de objetos!

Conteúdo:

• Sintaxe Básica
• Renomeando Propriedades
• Valores Padrão
• Renomeando Variáveis e Valores Padrão
• Objetos Aninhados
• Alterando Variáveis

Sintaxe Básica

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:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo'
};

Agora vamos extrair os dados de city e age usando a desestruturação:

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:

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

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:

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

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

Valores Padrão

É 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:

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

Renomeando Variáveis e Valores Padrão

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

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

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

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

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:

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:

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

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

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

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

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:

({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!

Comments

[Falcão]

gostei do artigo, parabéns! sempre bom ver brs por aqui

[Barbara Robles 🇧🇷]

Hehe 🇧🇷🇧🇷obrigada!