Aparência
Desestruturação de Objetos
A desestruturação de objetos permite que você extraia propriedades de um objeto e as atribua a variáveis utilizando uma sintaxe de atribuição que espelha a estrutura do objeto.
Exemplo Básico
Aqui está um exemplo básico de desestruturação de objetos:
javascript
const pessoa = {
nome: "João",
idade: 30,
profissao: "Desenvolvedor",
};
// Desestruturação
const { nome, idade, profissao } = pessoa;
console.log(nome); // João
console.log(idade); // 30
console.log(profissao); // Desenvolvedor
Neste exemplo, as variáveis nome
, idade
e profissao
são criadas e atribuídas aos valores correspondentes das propriedades do objeto pessoa
.
Atribuição a Variáveis com Nomes Diferentes
Você pode também desestruturar um objeto e atribuir as propriedades a variáveis com nomes diferentes:
javascript
const pessoa = {
nome: "João",
idade: 30,
profissao: "Desenvolvedor",
};
// Desestruturação com renomeação
const { nome: nomeCompleto, idade: anos, profissao: trabalho } = pessoa;
console.log(nomeCompleto); // João
console.log(anos); // 30
console.log(trabalho); // Desenvolvedor
Aqui, as propriedades nome
, idade
e profissao
são desestruturadas e atribuídas às variáveis nomeCompleto
, anos
e trabalho
, respectivamente.
Valores Padrão
A desestruturação também permite definir valores padrão para variáveis caso a propriedade correspondente do objeto não esteja definida:
javascript
const pessoa = {
nome: "João",
idade: 30,
};
// Desestruturação com valores padrão
const { nome, idade, profissao = "Desconhecido" } = pessoa;
console.log(nome); // João
console.log(idade); // 30
console.log(profissao); // Desconhecido
No exemplo acima, profissao
não está definida no objeto pessoa
, então o valor padrão 'Desconhecido' é atribuído à variável profissao
.
Desestruturação Aninhada
Você pode desestruturar objetos aninhados utilizando uma sintaxe similar:
javascript
const pessoa = {
nome: "João",
idade: 30,
endereco: {
rua: "Rua A",
cidade: "Cidade B",
},
};
// Desestruturação aninhada
const {
nome,
endereco: { rua, cidade },
} = pessoa;
console.log(nome); // João
console.log(rua); // Rua A
console.log(cidade); // Cidade B
Neste caso, as propriedades rua
e cidade
do objeto endereco
são desestruturadas diretamente.
Benefícios da Desestruturação
- Sintaxe Concisa e Legível: Reduz a necessidade de código repetitivo ao acessar propriedades de objetos.
- Atribuição de Variáveis Simples: Facilita a extração e a renomeação de propriedades de objetos.
- Valores Padrão: Permite definir valores padrão para variáveis, evitando o uso de verificações explícitas.
A desestruturação é uma ferramenta poderosa para tornar o código JavaScript mais limpo e legível, especialmente quando lidamos com estruturas de dados complexas.