Objetos em JavaScript: propriedades e métodos

Um objeto é um saco de valores nomeados

Enquanto um array agrupa valores pela posição, um objeto em JavaScript agrupa valores por nome. Quando aquilo que você está modelando tem partes rotuladas — um usuário com nome e idade, uma requisição com método e URL — o caminho natural é criar um objeto.

A forma mais curta de criar um objeto em JavaScript é usando um object literal:

Cada entrada é um par chave: valor. Por baixo dos panos, as chaves são sempre strings (as aspas são opcionais quando a chave é um identificador válido, como name). Já os valores podem ser qualquer coisa que o JavaScript saiba representar — números, strings, booleanos, arrays, funções e até outros objetos.

Pode deixar a vírgula depois da última entrada sem problema. A maioria dos times mantém essa vírgula final mesmo — ela deixa os diffs mais limpos quando você adiciona uma nova propriedade depois.

Lendo e escrevendo propriedades de objeto

Existem duas formas de acessar uma propriedade: a notação de ponto e a notação de colchetes.

A notação de ponto é mais limpa e vai ser sua primeira escolha na maioria dos casos. Já a notação de colchetes se justifica quando a chave está guardada em uma variável ou quando ela não é um identificador válido:

Ler uma propriedade que não existe retorna undefined — sem erro:

Isso pode mascarar erros de digitação silenciosamente. Se você quer que a falha grite, vai precisar verificar explicitamente.

Adicionando e removendo propriedades de objeto

Objetos em JavaScript são flexíveis — você pode adicionar chaves a qualquer momento:

E removê-las com delete:

delete é um daqueles operadores que você não usa todo dia, mas quando precisa remover uma chave de verdade do objeto (e não só deixá-la como undefined), é ele que resolve. Se você fizer user.email = undefined, a chave continua lá — "email" in user ainda vai retornar true.

Como verificar se uma propriedade existe em um objeto JavaScript

Existem três formas, cada uma com um significado um pouco diferente:

• in verifica se a chave existe, incluindo as que vêm herdadas da cadeia de protótipos.
• Object.hasOwn(obj, chave) olha só para as chaves próprias do objeto. Use quando quiser ignorar as herdadas. Ele substitui a velha chamada hasOwnProperty.
• obj.chave !== undefined funciona na maioria dos casos, mas te engana quando a propriedade foi explicitamente definida como undefined.

Na dúvida, vai de Object.hasOwn — geralmente é ele que faz o que você realmente quer.

Métodos: funções que moram dentro de objetos

Quando o valor de uma propriedade é uma função, a gente chama essa propriedade de método. Dentro de um object literal existe uma sintaxe curtinha para defini-los:

this dentro de um método se refere ao objeto em que o método foi chamado — no caso, user. É assim que o greet sabe qual nome usar.

Mas fica o alerta: arrow functions não têm o próprio this, então não servem para métodos que precisam acessar outras propriedades do objeto:

Use a sintaxe abreviada de método (greet() { ... }) sempre que o código acessar this. Arrow functions são ótimas para callbacks, mas não combinam com métodos de objeto.

Objetos aninhados

Os valores também podem ser objetos, e isso vai tão fundo quanto você precisar:

Ler uma propriedade aninhada é questão de encadear — user.address.city. O problema: se algum passo no meio do caminho for null ou undefined, você toma um TypeError na cara:

console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')

O optional chaining (user.profile?.city) é a solução moderna — em vez de lançar erro quando um elo da cadeia está faltando, ele simplesmente retorna undefined. Mais adiante neste capítulo tem uma página só sobre isso.

Como percorrer um objeto em JavaScript

Quando você precisa passar por todas as chaves de um objeto, o trio Object.keys, Object.values e Object.entries é a sua melhor escolha:

Object.entries é o mais útil do trio — ele devolve a chave e o valor juntos, e combina muito bem com destructuring de array.

Existe também o laço for...in, mas ele também percorre propriedades herdadas, o que geralmente não é o que você quer:

for (const key in scores) {
  console.log(key);  // funciona, mas inclui chaves herdadas
}

Prefira Object.keys / Object.entries, a menos que você realmente queira incluir propriedades herdadas.

Atalhos de sintaxe que vale a pena conhecer

Dois açúcares sintáticos que você vai encontrar em todo lugar:

O shorthand de propriedades entra em ação quando o nome da variável coincide com o da chave. Já as chaves computadas (o formato [expr]) permitem montar nomes de propriedades de forma dinâmica — muito útil em funções que atualizam um campo pelo nome.

Comparação de objetos em JavaScript é por referência

Essa aqui pega quase todo mundo de surpresa pelo menos uma vez:

=== em objetos verifica se os dois lados apontam para o mesmo objeto na memória, não se o conteúdo é igual. Dois objetos com propriedades idênticas continuam sendo dois objetos diferentes.

Quando a pergunta é "esses dois têm o mesmo formato?", você vai precisar comparar os campos manualmente ou usar algum helper de comparação profunda (deep equality). O JSON.stringify(a) === JSON.stringify(b) é uma gambiarra rápida que resolve para dados simples, mas quebra feio em qualquer coisa que envolva funções, undefined ou referências circulares.

Objetos são mutáveis, mesmo com const

O const trava a variável em um único valor. Ele não congela o objeto para o qual esse valor aponta:

Se você quer imutabilidade de verdade, o Object.freeze(user) impede alterações futuras (mas só no nível raso — objetos aninhados continuam mutáveis). Na prática, a maior parte do código confia mais na convenção do que no Object.freeze — encare objetos const como "não reatribua essa variável" e resolva a imutabilidade no nível do design.

Próximo passo: arrays

Objetos e arrays são os dois blocos de construção que formam tudo o mais. Objetos cuidam de dados rotulados; arrays cuidam de dados ordenados. No próximo tópico: como os arrays funcionam em JavaScript e aquele punhado de métodos (push, slice, map e companhia) que resolve quase tudo no dia a dia.