Javascript

Objetos: estruturando dados do mundo real Já leu

• • 7 min de leitura

Objetos: estruturando dados do mundo real
Arrays são ótimos para listas. Mas como representar uma pessoa, um produto, um pedido — entidades com várias característi

Arrays são ótimos para listas. Mas como representar uma pessoa, um produto, um pedido — entidades com várias características diferentes? Para isso existem os objetos.

Um objeto é uma coleção de propriedades, onde cada propriedade tem um nome (chave) e um valor. É a estrutura de dados mais fundamental do JavaScript — tanto que a linguagem inteira foi construída em cima dela. Arrays são objetos. Funções são objetos. O próprio document do navegador é um objeto.

Entender objetos profundamente é entender o JavaScript.

Criando objetos

const pessoa = {
  nome: "Ana Paula",
  idade: 28,
  profissao: "Desenvolvedora",
  ativa: true,
};

A sintaxe usa chaves {}, com pares de chave: valor separados por vírgula. Isso se chama objeto literal — a forma mais comum de criar objetos.

Acessando propriedades

Há duas formas de acessar valores:

const pessoa = {
  nome: "Ana Paula",
  idade: 28,
  profissao: "Desenvolvedora",
};

// Notação de ponto (use sempre que possível)
console.log(pessoa.nome);      // Ana Paula
console.log(pessoa.idade);     // 28

// Notação de colchetes (use quando a chave é dinâmica)
const campo = "profissao";
console.log(pessoa[campo]);    // Desenvolvedora
console.log(pessoa["nome"]);   // Ana Paula

A notação de colchetes é essencial quando você não sabe o nome da propriedade antecipadamente — quando ela vem de uma variável, por exemplo.

Modificando e adicionando propriedades

const produto = {
  nome: "Notebook",
  preco: 3500,
};

// Modificar propriedade existente
produto.preco = 3200;
console.log(produto.preco); // 3200

// Adicionar nova propriedade
produto.estoque = 15;
console.log(produto.estoque); // 15

// Remover propriedade
delete produto.estoque;
console.log(produto.estoque); // undefined

Propriedades com funções — métodos

Quando uma propriedade de um objeto é uma função, ela é chamada de método:

const calculadora = {
  somar: function(a, b) {
    return a + b;
  },
  subtrair: function(a, b) {
    return a - b;
  },
  // Sintaxe moderna de método (shorthand):
  multiplicar(a, b) {
    return a * b;
  },
};

console.log(calculadora.somar(5, 3));       // 8
console.log(calculadora.subtrair(10, 4));   // 6
console.log(calculadora.multiplicar(3, 7)); // 21

A palavra-chave this

Dentro de um método, this se refere ao próprio objeto. É como o objeto falando de si mesmo:

const conta = {
  titular: "Carlos",
  saldo: 1000,

  depositar(valor) {
    this.saldo += valor;
    console.log(`Depósito de R$ ${valor}. Novo saldo: R$ ${this.saldo}`);
  },

  sacar(valor) {
    if (valor > this.saldo) {
      console.log("Saldo insuficiente.");
      return;
    }
    this.saldo -= valor;
    console.log(`Saque de R$ ${valor}. Novo saldo: R$ ${this.saldo}`);
  },

  verSaldo() {
    console.log(`${this.titular}, seu saldo é R$ ${this.saldo}`);
  },
};

conta.verSaldo();    // Carlos, seu saldo é R$ 1000
conta.depositar(500); // Depósito de R$ 500. Novo saldo: R$ 1500
conta.sacar(200);     // Saque de R$ 200. Novo saldo: R$ 1300
conta.sacar(2000);    // Saldo insuficiente.

Atenção: this dentro de arrow functions não se refere ao objeto — por isso usamos a sintaxe de função normal nos métodos. Voltaremos a este tema no Artigo 08.

Objetos aninhados

Propriedades de um objeto podem ser outros objetos:

const usuario = {
  nome: "Fernanda",
  idade: 31,
  endereco: {
    rua: "Av. Paulista",
    numero: 1000,
    cidade: "São Paulo",
    estado: "SP",
  },
  contato: {
    email: "fernanda@email.com",
    telefone: "11 99999-0000",
  },
};

console.log(usuario.endereco.cidade);    // São Paulo
console.log(usuario.contato.email);      // fernanda@email.com
console.log(usuario.endereco.numero);    // 1000

Arrays de objetos — o padrão mais comum

Na prática, você vai trabalhar o tempo todo com listas de objetos:

const produtos = [
  { id: 1, nome: "Notebook", preco: 3500, categoria: "eletrônicos" },
  { id: 2, nome: "Mouse", preco: 80, categoria: "eletrônicos" },
  { id: 3, nome: "Cadeira", preco: 900, categoria: "móveis" },
  { id: 4, nome: "Mesa", preco: 700, categoria: "móveis" },
];

// Filtrar por categoria
const eletronicos = produtos.filter(p => p.categoria === "eletrônicos");
console.log(eletronicos);

// Encontrar produto por id
const produto = produtos.find(p => p.id === 3);
console.log(produto.nome); // Cadeira

// Listar nomes de todos os produtos
const nomes = produtos.map(p => p.nome);
console.log(nomes); // ["Notebook", "Mouse", "Cadeira", "Mesa"]

// Total do valor em estoque
const total = produtos.reduce((acc, p) => acc + p.preco, 0);
console.log(`Total: R$ ${total}`); // Total: R$ 5180

Viu como map, filter e reduce do artigo anterior se encaixam perfeitamente aqui?

Verificando se uma propriedade existe

const usuario = { nome: "João", idade: 25 };

// Operador in
console.log("nome" in usuario);    // true
console.log("email" in usuario);   // false

// Optional chaining — evita erros ao acessar propriedades aninhadas
const config = {
  tema: {
    cor: "azul",
  },
};

console.log(config.tema?.cor);       // "azul"
console.log(config.idioma?.codigo);  // undefined (sem erro!)
// Sem o ?. isso causaria: TypeError: Cannot read properties of undefined

O optional chaining (?.) é um dos recursos mais úteis do JavaScript moderno. Use-o sempre que acessar propriedades que podem não existir.

Iterando sobre objetos

const pessoa = {
  nome: "Ricardo",
  idade: 35,
  cidade: "Curitiba",
};

// for...in — percorre as chaves do objeto
for (const chave in pessoa) {
  console.log(`${chave}: ${pessoa[chave]}`);
}
// nome: Ricardo
// idade: 35
// cidade: Curitiba

// Object.keys — array com as chaves
console.log(Object.keys(pessoa));
// ["nome", "idade", "cidade"]

// Object.values — array com os valores
console.log(Object.values(pessoa));
// ["Ricardo", 35, "Curitiba"]

// Object.entries — array de pares [chave, valor]
console.log(Object.entries(pessoa));
// [["nome", "Ricardo"], ["idade", 35], ["cidade", "Curitiba"]]

Object.entries() é especialmente poderoso porque você pode encadear métodos de array sobre ele:

const precos = { notebook: 3500, mouse: 80, teclado: 200 };

// Filtrar itens acima de R$ 100 e exibir formatado
Object.entries(precos)
  .filter(([, valor]) => valor > 100)
  .forEach(([produto, valor]) => {
    console.log(`${produto}: R$ ${valor}`);
  });

// notebook: R$ 3500
// teclado: R$ 200

Copiando objetos

Objetos são passados por referência — isso é uma fonte clássica de bugs para iniciantes:

const original = { nome: "Ana", idade: 25 };

// ❌ Isso NÃO cria uma cópia — ambas apontam para o mesmo objeto
const copia = original;
copia.nome = "Maria";

console.log(original.nome); // "Maria" ← o original foi alterado!

Para copiar corretamente, use o spread operator:

const original = { nome: "Ana", idade: 25 };

// ✅ Cria uma cópia independente (shallow copy)
const copia = { ...original };
copia.nome = "Maria";

console.log(original.nome); // "Ana" ← intacto
console.log(copia.nome);    // "Maria"

Falaremos mais sobre spread operator no próximo artigo.

Tarefa para você

Modele um sistema simples de biblioteca:

// 1. Crie um array com pelo menos 4 livros
//    Cada livro deve ter: titulo, autor, ano, disponivel (boolean), paginas

// 2. Filtre apenas os livros disponíveis

// 3. Encontre todos os livros publicados após 2000

// 4. Exiba o título e autor de cada livro no formato:
//    "Dom Casmurro — Machado de Assis"

// 5. Calcule o total de páginas de todos os livros

// Dica: combine map, filter e reduce com seu array de objetos

Conclusão

Neste artigo você aprendeu:

  • Como criar objetos com a sintaxe literal
  • Acessar propriedades com ponto e colchetes
  • Adicionar, modificar e remover propriedades
  • Criar métodos e usar this
  • Trabalhar com objetos aninhados
  • Iterar sobre objetos com for...in e Object.keys/values/entries
  • O perigo da referência e como copiar objetos corretamente
  • O optional chaining ?. para acesso seguro

No próximo artigo vamos aprender desestruturação, spread e rest — recursos que deixam o código com objetos e arrays muito mais limpo e expressivo.

 

📚 Fontes e Referências

Comentários

Mais em Javascript

Async/Await: escrevendo código assíncrono de forma limpa
Async/Await: escrevendo código assíncrono de forma limpa

As Promises resolveram o Callback Hell. Mas encadear muitos .then() aind...

O que é JavaScript e por que aprender?
O que é JavaScript e por que aprender?

Se você quer trabalhar com desenvolvimento web — seja criando sit...

Escopo, Hoisting e Closures
Escopo, Hoisting e Closures

Este é um dos artigos mais importantes da série. Não por...