Guia completo de objetos em JavaScript: do básico ao avançado

Objetos são a base do JavaScript. Quase tudo na linguagem é um objeto ou se comporta como um. Entender bem esse conceito muda completamente a forma como você escreve e organiza código.

O que é um objeto em JavaScript?

Um objeto é uma coleção de pares chave: valor. Ele permite agrupar dados relacionados e comportamentos (funções) em uma única estrutura.

// Exemplo de objeto simples
const usuario = {
  nome: 'Ana',
  idade: 28,
  ativo: true
};

Nesse exemplo, nome, idade e ativo são chaves (também chamadas de propriedades), e seus respectivos conteúdos são os valores.

Principais formas de criar objetos

1. Usando literal de objeto {}

É a forma mais comum e direta:

const carro = {
  marca: 'Toyota',
  modelo: 'Corolla',
  ano: 2024
};

2. Usando new Object()

Menos usado no dia a dia, mas importante conhecer:

const pessoa = new Object();
pessoa.nome = 'Carlos';
pessoa.idade = 35;

3. Usando funções construtoras

Antes da chegada das classes, essa era a forma padrão de criar “modelos” de objetos reutilizáveis:

function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;
}

const maria = new Pessoa('Maria', 30);

4. Usando classes (class)

class é uma sintaxe mais moderna e legível para trabalhar com objetos que compartilham estrutura e comportamento:

class Produto {
  constructor(nome, preco) {
    this.nome = nome;
    this.preco = preco;
  }

  aplicarDesconto(percentual) {
    this.preco -= this.preco * (percentual / 100);
  }
}

const notebook = new Produto('Notebook', 5000);
notebook.aplicarDesconto(10);

Propriedades: como acessar, adicionar e remover

Acessando propriedades

Você pode acessar propriedades de duas maneiras:

const filme = {
  titulo: 'Interestelar',
  ano: 2014
};

// Notação com ponto
console.log(filme.titulo); // Interestelar

// Notação com colchetes
console.log(filme['ano']); // 2014

A notação com colchetes é útil quando a chave é dinâmica ou não é um identificador válido (por exemplo, contém espaços ou começa com número).

Adicionando e alterando propriedades

const usuario = {
  nome: 'João'
};

// adicionando
usuario.idade = 25;

// alterando
usuario.nome = 'João Silva';

console.log(usuario);
// { nome: 'João Silva', idade: 25 }

Removendo propriedades

const config = {
  tema: 'claro',
  notificacoes: true
};

delete config.notificacoes;

console.log(config); // { tema: 'claro' }

Propriedades dinâmicas

Você pode definir o nome de uma propriedade a partir de uma variável:

const chave = 'email';

const cliente = {
  nome: 'Laura',
  [chave]: 'laura@example.com'  // cria a propriedade "email"
};

console.log(cliente.email); // laura@example.com

Métodos: funções dentro de objetos

Quando uma propriedade tem valor do tipo função, chamamos isso de método:

const conta = {
  saldo: 1000,
  depositar(valor) {
    this.saldo += valor;
  },
  sacar(valor) {
    if (valor > this.saldo) {
      console.log('Saldo insuficiente');
      return;
    }
    this.saldo -= valor;
  }
};

conta.depositar(500);
conta.sacar(300);
console.log(conta.saldo); // 1200

Note o uso de this para acessar outras propriedades do mesmo objeto.

Iterando sobre objetos

for...in

const usuario = {
  nome: 'Bruno',
  idade: 32,
  cidade: 'Recife'
};

for (const chave in usuario) {
  console.log(chave, usuario[chave]);
}

Object.keys, Object.values e Object.entries

const produto = {
  nome: 'Cadeira',
  preco: 300,
  estoque: 15
};

console.log(Object.keys(produto));   // ['nome', 'preco', 'estoque']
console.log(Object.values(produto)); // ['Cadeira', 300, 15]
console.log(Object.entries(produto));
// [['nome', 'Cadeira'], ['preco', 300], ['estoque', 15]]

Isso é especialmente útil com métodos de array como map, filter e reduce.

Desestruturação de objetos

A desestruturação permite extrair propriedades de forma mais concisa:

const endereco = {
  rua: 'Av. Paulista',
  numero: 1000,
  cidade: 'São Paulo'
};

const { rua, cidade } = endereco;

console.log(rua);    // Av. Paulista
console.log(cidade); // São Paulo

Você também pode renomear variáveis e definir valores padrão:

const usuario = {
  nome: 'Carla',
  idade: 27
};

const {
  nome: primeiroNome,
  sobrenome = 'Não informado'
} = usuario;

console.log(primeiroNome); // Carla
console.log(sobrenome);    // Não informado

Objetos aninhados

Objetos podem conter outros objetos, criando estruturas mais completas:

const pedido = {
  id: 123,
  cliente: {
    nome: 'Felipe',
    email: 'felipe@example.com'
  },
  itens: [
    { produto: 'Livro', quantidade: 2, preco: 50 },
    { produto: 'Mouse', quantidade: 1, preco: 80 }
  ]
};

Com desestruturação aninhada:

const {
  cliente: { nome, email },
  itens: [primeiroItem]
} = pedido;

console.log(nome);        // Felipe
console.log(email);       // felipe@example.com
console.log(primeiroItem); // { produto: 'Livro', quantidade: 2, preco: 50 }

Comparação de objetos: referência vs valor

Objetos em JavaScript são comparados por referência, não por conteúdo:

const a = { nome: 'João' };
const b = { nome: 'João' };
const c = a;

console.log(a === b); // false (objetos diferentes na memória)
console.log(a === c); // true (mesma referência)

Para comparar conteúdos, é preciso uma estratégia manual, por exemplo:

function objetosIguais(obj1, obj2) {
  const chaves1 = Object.keys(obj1);
  const chaves2 = Object.keys(obj2);

  if (chaves1.length !== chaves2.length) return false;

  for (const chave of chaves1) {
    if (obj1[chave] !== obj2[chave]) return false;
  }

  return true;
}

console.log(objetosIguais(a, b)); // true, se tiverem mesmas chaves e valores simples

Clonando e mesclando objetos

Using spread operator (...)

const configPadrao = {
  tema: 'claro',
  idioma: 'pt-BR'
};

const configUsuario = {
  tema: 'escuro'
};

const configFinal = { ...configPadrao, ...configUsuario };

console.log(configFinal);
// { tema: 'escuro', idioma: 'pt-BR' }

Esse padrão é muito usado para sobrescrever configurações padrão com preferências do usuário.

Object.assign

const destino = {};
Object.assign(destino, configPadrao, configUsuario);

console.log(destino);
// { tema: 'escuro', idioma: 'pt-BR' }

Tanto o spread quanto Object.assign fazem clones rasos (shallow copy). Para estruturas profundamente aninhadas, é preciso cuidado extra.

JSON e objetos

Objetos JavaScript se aproximam bastante do formato JSON, mas não são exatamente a mesma coisa. JSON é um formato de texto. A conversão entre eles é muito comum em APIs.

const usuario = {
  nome: 'Paula',
  idade: 29
};

// Objeto -> JSON (string)
const json = JSON.stringify(usuario);

// JSON -> Objeto
const obj = JSON.parse(json);

Objetos imutáveis (ou quase)

Mesmo que você use const, ainda pode alterar o conteúdo do objeto, apenas não pode reatribuir a variável:

const usuario = { nome: 'Rafa' };
usuario.nome = 'Rafael';   // permitido
// usuario = {}            // erro

Para restringir alterações:

• Object.freeze(obj): impede qualquer mudança nas propriedades existentes.
• Object.seal(obj): impede adicionar/remover propriedades, mas permite alterar valores.

const config = {
  tema: 'claro'
};

Object.freeze(config);

config.tema = 'escuro'; // não tem efeito em modo estrito gera erro

console.log(config.tema); // 'claro'

Herança via protótipo

Todo objeto em JavaScript tem um protótipo, que é outro objeto do qual ele “herda” propriedades e métodos. As classes modernas (class) são uma sintaxe mais amigável por cima desse mecanismo.

class Animal {
  constructor(nome) {
    this.nome = nome;
  }

  falar() {
    console.log(`${this.nome} fez um som.`);
  }
}

class Cachorro extends Animal {
  falar() {
    console.log(`${this.nome} latiu.`);
  }
}

const rex = new Cachorro('Rex');
rex.falar(); // Rex latiu.

Boas práticas ao trabalhar com objetos

• Use nomes de propriedades claros: isso torna o código mais legível e reduz erros.
• Evite mutações desnecessárias: sempre que possível, crie novos objetos em vez de alterar os existentes, principalmente em arquiteturas reativas (como React).
• Valide dados de entrada: antes de acessar propriedades aninhadas, verifique se os níveis anteriores existem ou use optional chaining (obj?.prop).
• Centralize estruturas reutilizáveis: use funções, classes ou fábricas para criar objetos que sigam o mesmo padrão.

Conclusão

Objetos estão em todo lugar no JavaScript: desde configurações simples até estruturas complexas de uma aplicação. Dominar sua criação, manipulação, clonagem, iteração e herança torna seu código mais organizado, expressivo e fácil de manter.

À medida que você pratica, comece a observar como bibliotecas e frameworks que você usa diariamente modelam dados com objetos — isso vai reforçar seu entendimento e inspirar soluções melhores no seu próprio código.