Desestruturação de objetos

Consideremos o objeto seguinte:

const carro = { 
   marca: 'Opel', 
   modelo: 'Corsa', 
   matricula: '01-02-bb' 
};
const marca = carro.marca; 
const modelo = carro.modelo; 
const matricula = carro.matricula; 
console.log(marca + ", " + modelo + ", " + matricula);

Este código tem um problema porque nos obriga a repetir a expressão carro. 3 vezes para podermos extrair as propriedades do objeto.

Para obviar isso, o javascript ES6 introduziu uma funcionalidade chamada object destructuring ou desestruturação de objetos.

Esta funcionalidade permite-nos extrair as propriedades de um objeto numa única instrução, da seguinte maneira:

const {marca, modelo, matricula} = carro;

O código completo já com object destructuring ficara assim:

const carro = { 
   marca: 'Opel', 
   modelo: 'Corsa', 
   matricula: '01-02-bb' 
};

//Desestruturação do objeto carro:
const {marca, modelo, matricula} = carro; 

console.log(marca + ", " + modelo + ", " + matricula); 

Neste exemplo, extraímos todas as propriedades do objeto carro. No entanto, podemos extrair as propriedades que quisermos:

const {marca} = carro;

Neste caso, extraímos somente a propriedade marca.

Podemos igualmente extrair uma ou mais propriedades e renomeá-las, atribuindo-lhes um alias:

const {marca: m} = carro; 

console.log(m); 

Podemos também extrair objetos dentro de objetos:

const carro = { 
   marca: "Opel", 
   modelo: "Corsa", 
   matricula: "01-02-bb", 
   combustivel: { 
      tipo: "gasoleo", 
      categoria: "aditivado", 
   }, 
};
 
const { combustivel } = carro; 

console.log(combustivel.tipo);