Objetos e Destructuring

Objetos literais, spread, rest e destructuring

Objetos JavaScript são coleções de pares chave-valor onde os valores podem ser qualquer tipo — inclusive funções (que se tornam métodos). São a estrutura de dados fundamental do JS e a base de JSON, APIs REST e praticamente todo dado que trafega na web.

Destructuring é a sintaxe que extrai propriedades para variáveis locais. const { nome, idade } = pessoa; cria as variáveis nome e idade. Funciona também para arrays: const [primeiro, segundo] = lista; e para parâmetros de função: function f({ nome, idade }) {}. Você pode renomear durante o destructuring: const { nome: n } = pessoa; e fornecer valores padrão: const { nome = "Anônimo" } = {};

O spread operator (...) copia propriedades enumeŕaveis de um objeto para outro, criando um novo objeto. É a forma imutável de "atualizar" um objeto: const atualizado = { ...original, nome: "Novo" }; — todas as props do original mais a nova sobrescrevendo nome. O rest parameter (...resto) no destructuring captura as propriedades restantes.

Exemplo.java

// ── Criação de objetos ───────────────────────────
const pessoa = {
  nome: "Ana",
  idade: 28,
  saudar() { return `Olá, sou ${this.nome}`; }
};

// Shorthand: quando nome da variável = nome da chave
const nome = "Carlos", idade = 30;
const obj = { nome, idade }; // { nome: "Carlos", idade: 30 }

// ── Destructuring ─────────────────────────────────
const { nome: n, idade: id = 0 } = pessoa; // renomeia + padrão
console.log(n, id); // "Ana" 28

// Destructuring em parâmetros de função
function exibir({ nome, idade }) {
  return `${nome}, ${idade} anos`;
}
exibir(pessoa); // "Ana, 28 anos"

// ── Spread: copiar e mesclar objetos ─────────────
const base = { tema: "dark", lingua: "pt-BR" };
const config = { ...base, lingua: "en-US", debug: true };
// { tema: "dark", lingua: "en-US", debug: true }

// ── Rest: captura o restante ──────────────────────
const { nome: nomePessoa, ...resto } = pessoa;
// nomePessoa = "Ana"
// resto = { idade: 28, saudar: [Function] }

// ── Optional chaining e nullish coalescing ────────
const usuario = null;
const cidade = usuario?.endereco?.cidade; // undefined (sem erro!)
const label = cidade ?? "Cidade desconhecida"; // "Cidade desconhecida"

💡 Dica pro

Optional chaining (?.) e nullish coalescing (??) são essenciais para trabalhar com dados de APIs onde campos podem ser null ou undefined. Eliminam a necessidade de if aninhados de verificação.

Recompensa+35 XP+exercícios