Desestruturação de objetos: pegando informações de forma rápida

Até agora, para pegar dados de um objeto, você usava algo assim:

const pessoa = {
  nome: "Ana",
  idade: 25,
  cidade: "Recife"
};

const nome = pessoa.nome;
const idade = pessoa.idade;

Funciona bem.
Mas quando precisamos de vários campos, isso pode ficar repetitivo.

A desestruturação de objetos resolve isso, permitindo “desmontar” o objeto de forma rápida.

Ideia principal

Pense no objeto como uma caixa com etiquetas (nome, idade, cidade).
Desestruturar é pegar direto as etiquetas que você quer, em uma linha.

Exemplo básico

const pessoa = {
  nome: "Ana",
  idade: 25,
  cidade: "Recife"
};

const { nome, idade } = pessoa;

console.log(nome);  // Ana
console.log(idade); // 25

Aqui, o JavaScript cria variáveis nome e idade com os valores do objeto.

Nome da variável precisa bater com a chave

Na desestruturação simples, o nome da variável deve ser o mesmo da chave:

const produto = {
  titulo: "Teclado",
  preco: 120
};

const { titulo, preco } = produto;

Renomeando variáveis na desestruturação

Você pode pegar a chave e guardar em variável com outro nome:

const produto = {
  titulo: "Teclado",
  preco: 120
};

const { titulo: nomeDoProduto, preco: valorDoProduto } = produto;

console.log(nomeDoProduto);  // Teclado
console.log(valorDoProduto); // 120

Valor padrão (default)

Se a chave não existir, você pode definir um valor padrão:

const usuario = {
  nome: "Bruno"
};

const { nome, perfil = "visitante" } = usuario;

console.log(nome);   // Bruno
console.log(perfil); // visitante

Desestruturação em objetos aninhados

Também funciona com objetos dentro de objetos:

const aluno = {
  nome: "Carla",
  endereco: {
    cidade: "Salvador",
    estado: "BA"
  }
};

const {
  endereco: { cidade, estado }
} = aluno;

console.log(cidade); // Salvador
console.log(estado); // BA

Usando desestruturação em parâmetros de função

Muito comum em projetos reais:

function mostrarUsuario({ nome, email }) {
  console.log(nome + " - " + email);
}

const usuario = {
  nome: "Lia",
  email: "lia@email.com",
  ativo: true
};

mostrarUsuario(usuario); // Lia - lia@email.com

Isso deixa a função mais clara, porque já mostra quais campos ela usa.

Pegando o resto das propriedades (rest)

Você pode separar alguns campos e juntar o restante:

const pessoa = {
  nome: "Ana",
  idade: 25,
  cidade: "Recife",
  profissao: "Dev"
};

const { nome, ...resto } = pessoa;

console.log(nome);  // Ana
console.log(resto); // { idade: 25, cidade: "Recife", profissao: "Dev" }

Cuidados rápidos

• Se tentar desestruturar uma chave que não existe, o valor será undefined (a menos que tenha default).
• Em objetos aninhados, cuide para o caminho existir.
• Desestruturação facilita leitura, mas use com clareza para não deixar o código confuso.

Resumo da lição

• Desestruturação permite pegar propriedades de objeto de forma rápida e limpa.
• Você pode:
  • extrair campos direto (const { nome } = obj)
  • renomear (const { nome: nomeUsuario } = obj)
  • definir padrão (const { perfil = "visitante" } = obj)
  • usar em objetos aninhados
  • usar em parâmetros de função
  • capturar restante com ...resto

É um recurso muito usado no JavaScript moderno para escrever código mais legível.