Objetos em JavaScript e por que aparece [object Object]
Guia de objetos em JavaScript
Objetos em JavaScript: chaves, cópias e [object Object] resolvido | We.Inc
Crie, leia, percorra e copie objetos JavaScript, e descubra por que sua página mostra [object Object] e como exibir o valor real. Cole qualquer JSON para inspecioná-lo ao vivo.
Um objeto JavaScript é um conjunto de valores nomeados escrito como { key: value }. Você lê um valor com obj.key ou obj['key'], lista as chaves com Object.keys e os pares com Object.entries. O texto [object Object] aparece quando um objeto é convertido em string; use JSON.stringify(obj) para imprimir o conteúdo.
Objetos são o formato em que chega quase toda resposta de API, arquivo de configuração e prop do React. Este guia cobre as poucas operações que você usa no dia a dia e depois trata das duas surpresas clássicas: [object Object] aparecendo na página ou em um alert, e uma cópia que compartilha em segredo seus dados aninhados com o original.
Cole ou edite um JSON no inspetor. Ele é interpretado no seu navegador com JSON.parse.
Cada linha mostra uma forma comum de transformar o objeto em texto ou em lista, incluindo a que produz [object Object].
Use o experimento de cópia para mudar um valor aninhado em uma cópia com spread e em uma cópia com structuredClone, e veja qual delas vaza de volta para o original.
Os exemplos de código abaixo estão prontos para colar no seu editor ou no console do navegador.
Para ver um objeto no console, registre-o sozinho com console.log(obj) ou console.table(obj). Juntá-lo a uma string com + o achata em [object Object].
Object.keys retorna as chaves como strings, mesmo as que parecem números, e chaves do tipo inteiro vêm em ordem crescente antes das demais.
JSON.stringify ignora propriedades cujo valor é undefined, uma função ou um symbol, e lança um TypeError em referências circulares.
Use Object.hasOwn(obj, key) para testar se o próprio objeto tem uma chave; o operador in também olha propriedades herdadas.
Perguntas frequentes
Por que meu código imprime [object Object]?
Algo converteu o objeto em string: um + com texto, uma template literal, um alert, element.textContent ou innerText. O toString padrão de objetos simples retorna o texto fixo [object Object]. Imprima JSON.stringify(obj) no lugar, ou escolha a propriedade que você queria, como obj.name.
Como percorrer um objeto em JavaScript?
Use for (const [key, value] of Object.entries(obj)) { ... }. Um objeto simples não é iterável, então usar for...of diretamente nele lança um TypeError. for...in também funciona, mas inclui chaves enumeráveis herdadas.
Como copiar um objeto sem ligá-lo ao original?
Para um objeto plano, { ...obj } ou Object.assign({}, obj) basta. Se o objeto tiver objetos ou arrays aninhados, use structuredClone(obj), que copia todos os níveis. Ele lida com Dates, Maps e Sets, mas lança um DataCloneError com funções e nós do DOM.
Como transformar um objeto em array e voltar?
Object.entries(obj) dá um array de pares [key, value]. Transforme-o com map ou filter e depois reconstrua um objeto com Object.fromEntries(pairs). Esse é o jeito usual de aplicar um map sobre os valores de um objeto.
Qual é a diferença entre um objeto e um Map?
Um Map aceita qualquer tipo como chave, guarda a ordem de inserção de todas as chaves e tem a propriedade size. Objetos simples usam chaves string ou symbol e são o que o JSON produz. Note que JSON.stringify transforma um Map em {}, então converta antes com Object.fromEntries(map).
Notação de ponto versus colchetes
A notação de ponto é mais curta e funciona quando a chave é um identificador válido que você conhece ao escrever o código. Os colchetes são obrigatórios quando a chave está em uma variável, contém espaço ou hífen, ou começa com um dígito, por exemplo headers['content-type'].
Ler uma chave que não existe dá undefined em vez de erro. O que lança erro é ler uma propriedade desse undefined, e é por isso que o optional chaining (user.address?.city) é tão útil com dados de API.
Cópias rasas e profundas
O spread copia só o nível de cima. O novo objeto ganha seus próprios campos, mas se um campo guarda outro objeto, as duas cópias apontam para esse mesmo objeto interno, então editar copy.address.city também edita o original.
structuredClone percorre a estrutura inteira e também cria novos objetos internos. Ele não mantém protótipos de classe, getters nem setters, então uma instância de classe volta como um objeto simples com os mesmos dados.
Mostrando o valor real em vez de [object Object]
Quatro formas de exibir um objeto
Só a primeira linha produz [object Object]. As outras imprimem um conteúdo legível.
Formatação legível dentro da página
Um elemento pre mantém as quebras de linha e a indentação que o JSON.stringify adiciona com o terceiro argumento.
Transformando objetos com entries e fromEntries
Adicionar imposto a cada preço
entries transforma o objeto em pares, map altera cada valor, fromEntries cria um novo objeto.
Spread versus structuredClone
A cópia com spread compartilha o objeto interno address; o clone não.
Inspetor de objetos
Edite o JSON e veja como cada abordagem o transforma em texto ou em lista.
Seu objeto em JSON
JSON inválido: {v}
Esse JSON é válido, mas não é um objeto. Coloque-o entre chaves.
Formas de exibir o objeto
Código
Saída
Experimento de cópia
Mude a cidade em uma cópia e depois veja se o original também mudou.