Atribuição via Desestruturação em objetos §

---

Sintaxe §

[tipo da variável] {campos a serem extraídos} = {objeto}

---

Valores Padrão §

const pessoa = {
  // nome: "Luiz",
  sobrenome: "Miranda",
  idade: 30,
  endereco: {
    rua: "Av Brasil",
    numero: 320
  }
};
 
const { nome, sobrenome, idade } = pessoa;
 
console.log(nome, sobrenome, idade); // undefined Miranda 30

const pessoa = {
  // nome: "Luiz",
  sobrenome: "Miranda",
  idade: 30,
  endereco: {
    rua: "Av Brasil",
    numero: 320
  }
};
 
const { nome = "", sobrenome, idade } = pessoa;
 
console.log(nome, sobrenome, idade); // Miranda 30

---

Atribuir Nomes Distintos aos Campos de um Objeto na Desestruturação §

Sintaxe §

[tipo da variável] {[nome do campo do objeto]: [novo nome], ...} = {objeto}

Exemplo §

const pessoa = {
  nome: "Luiz",
  sobrenome: "Miranda",
  idade: 30,
  endereco: {
    rua: "Av Brasil",
    numero: 320
  }
};
 
const { nome: teste, sobrenome, idade } = pessoa;
 
console.log(teste, sobrenome, idade); // Luiz Miranda 30

---

Desestruturação em Objetos Encadeados §

Sintaxe §

[tipo da variável] { [nome do objeto encadeado]: { [nome do campo], ... }} = {objeto}

Exemplo §

const pessoa = {
  nome: "Luiz",
  sobrenome: "Miranda",
  idade: 30,
  endereco: {
    rua: "Av Brasil",
    numero: 320
  }
};
 
const { endereco: { rua, numero} } = pessoa;
 
console.log(rua, numero); // Av Brasil 320

---

Exemplo §

Forma Tradicional §

const pessoa = {
  nome: "Luiz",
  sobrenome: "Miranda",
  idade: 30,
  endereco: {
    rua: "Av Brasil",
    numero: 320
  }
};
 
const nome = pessoa.nome;
 
console.log(nome); // Luiz

Desestruturação §

const pessoa = {
  nome: "Luiz",
  sobrenome: "Miranda",
  idade: 30,
  endereco: {
    rua: "Av Brasil",
    numero: 320
  }
};
 
const { nome } = pessoa;
 
console.log(nome); // Luiz

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado