Como corrigir “[object Object]” no JavaScript (Melhores formas de exibir objetos)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

Ao criar programas em JavaScript, você pode às vezes ver a string “[object Object]” ao tentar exibir um objeto. Esta é uma situação comum que ocorre quando objetos JavaScript são exibidos diretamente sem formatação.

Neste artigo, explicaremos o que “[object Object]” realmente significa e como exibir corretamente o conteúdo de um objeto de forma legível.

Este guia foi criado para desenvolvedores iniciantes a intermediários, e inclui exemplos práticos e trechos de código para ajudá-lo a entender o assunto mais profundamente.

2. O que é ‘[object Object]’?

Em JavaScript, quando você tenta converter um objeto em uma string, o comportamento padrão geralmente resulta em “[object Object]”. Essa saída representa informações de tipo sobre o valor, mas não mostra o conteúdo real do objeto.

Por que ‘[object Object]’ aparece?

Objetos JavaScript têm um método toString() padrão. Esse método é chamado sempre que um objeto é tratado como string. No entanto, de acordo com a especificação padrão do JavaScript, objetos retornam o seguinte formato por padrão quando convertidos em string.

console.log({}); // Output: [object Object]

Esse comportamento mostra apenas a informação de tipo como “object” e não inclui detalhes sobre chaves ou valores dentro do objeto. Por isso, os desenvolvedores precisam usar outros métodos para inspecionar e exibir os dados do objeto corretamente.

3. Por que ‘[object Object]’ aparece

O papel do método toString()

Todos os objetos JavaScript herdam o método Object.prototype.toString(). Esse método é chamado automaticamente quando um objeto é convertido em string.

Para confirmar o comportamento padrão, veja o código a seguir:

const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]

Como você pode ver, toString() foi projetado para retornar “[object Object]” para objetos simples por padrão.

Exemplos causados por coerção implícita de tipo

O mesmo comportamento ocorre quando um objeto é concatenado com uma string.

const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]

Neste exemplo, obj é convertido em string, e toString() é chamado internamente — resultando na saída “[object Object]”.

4. Como evitar ‘[object Object]’

4.1. Converter objetos em strings com JSON.stringify()

A abordagem mais fácil e comum é usar JSON.stringify() para converter um objeto em uma string formatada em JSON.

Exemplo: Uso básico de JSON.stringify

const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}

Neste código, as chaves e valores do objeto são exibidos com precisão no formato JSON.

Impressão formatada (com indentação)

Você também pode gerar JSON formatado com indentação para melhorar a legibilidade.

console.log(JSON.stringify(obj, null, 2));

Saída:

{
  "key": "value",
  "id": 123
}

Como JSON.stringify() pode formatar objetos complexos e estruturas aninhadas de forma limpa, ele é extremamente útil para depuração.

4.2. Inspecionar objetos em detalhe com console.dir()

Usando console.dir(), você pode inspecionar as propriedades e métodos de um objeto em uma estrutura hierárquica.

Exemplo: Como usar console.dir

const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);

Esta saída é exibida em um formato que permite expandir e inspecionar a estrutura do objeto dentro das DevTools.

Diferença entre console.dir e console.log:

• console.log(obj) mostra o objeto em estilo de linha única, o que não é ideal para inspecionar estruturas complexas.
• console.dir(obj) preserva a estrutura hierárquica, tornando-o útil para objetos e arrays aninhados.

4.3. Implementar um método toString() personalizado

Você pode personalizar a saída padrão “[object Object]” definindo seu próprio método toString() em um objeto.

Exemplo: Implementação personalizada de toString

const obj = {
  key: "value",
  id: 123,
  toString() {
    return `Key: ${this.key}, ID: ${this.id}`;
  },
};
console.log(obj.toString()); // Output: Key: value, ID: 123

Com esta abordagem, quando o objeto é tratado como uma string, ele exibirá seu formato personalizado em vez do valor padrão.

4.4. Imprimir o Conteúdo do Objeto com um Loop for…in

Outra opção é percorrer as chaves e valores de um objeto e imprimi-los manualmente.

Exemplo: Usando um Loop for…in

const obj = { key: "value", id: 123 };
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

Saída:

key: value
id: 123

Esta abordagem é simples e fácil de personalizar, tornando-a adequada para inspecionar rapidamente objetos pequenos.

4.5. Use Object.entries() ou Object.keys()

A partir do ES6, o JavaScript fornece métodos para extrair chaves e valores como arrays.

Exemplo: Usando Object.entries

const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));

Saída:

[ [ 'key', 'value' ], [ 'id', 123 ] ]

Ao obter pares chave-valor como arrays, você pode aproveitar os métodos de array para processamento adicional.

5. Exemplos Avançados: Exibindo Objetos e Arrays Complexos

5.1. Exibindo Objetos Aninhados

Quando um objeto contém outros objetos, vamos observar uma maneira fácil de exibir o conteúdo de forma clara.

Exemplo: Exibindo um Objeto Aninhado

const data = {
  user: {
    name: "John",
    age: 30,
    address: {
      city: "Tokyo",
      country: "Japan",
    },
  },
  hobbies: ["reading", "traveling"],
};

console.log(JSON.stringify(data, null, 2));

Saída:

{
  "user": {
    "name": "John",
    "age": 30,
    "address": {
      "city": "Tokyo",
      "country": "Japan"
    }
  },
  "hobbies": [
    "reading",
    "traveling"
  ]
}

Como mostrado acima, usar JSON.stringify() torna a estrutura de objetos aninhados fácil de entender.

5.2. Exibindo Objetos que Contêm Arrays

Se um objeto contém um array, você pode tratá-lo de maneira semelhante.

Exemplo: Exibindo um Objeto com um Array

const order = {
  id: 101,
  items: [
    { name: "Apple", price: 150 },
    { name: "Banana", price: 100 },
    { name: "Cherry", price: 200 },
  ],
  total: 450,
};

console.table(order.items);

Saída:

Neste exemplo, console.table() exibe os itens do array em formato de tabela. Isso facilita a inspeção visual da estrutura de dados e melhora a eficiência da depuração.

5.3. Lidando com Objetos com Referências Circulares

Em JavaScript, se um objeto contém uma referência circular, usar diretamente JSON.stringify() lançará um erro.

Exemplo: Erro de Referência Circular

const objA = {};
const objB = { a: objA };
objA.b = objB;

console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON

Nesse caso, você pode resolver o problema usando uma biblioteca de terceiros ou implementando uma função personalizada para lidar com referências circulares.

Exemplo de Solução: Usando a Biblioteca flatted

const { stringify } = require("flatted");

console.log(stringify(objA));

Esta abordagem permite que você stringify objetos com segurança, mesmo contendo referências circulares.

5.4. Obtendo Apenas as Chaves de Objetos ou Arrays

Ao explorar uma estrutura de dados, também pode ser útil extrair e exibir apenas as chaves ou valores.

Obter uma Lista de Chaves:

const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]

Obter uma Lista de Valores:

console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]

Obter Pares Chave-Valor:

console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]

Esses métodos são úteis para analisar dados e extrair informações específicas de forma eficiente.

6. Erros Comuns e Correções

6.1. Erro de Referência Circular: “Convertendo estrutura circular para JSON”

Mensagem de Erro:

TypeError: Converting circular structure to JSON

Causa:
Isso acontece quando uma propriedade de um objeto referencia o mesmo objeto novamente, criando uma estrutura circular.

Exemplo:

const objA = {};
const objB = { parent: objA };
objA.child = objB;

console.log(JSON.stringify(objA)); // Error occurs

Solução 1: Use uma Função de Serialização Personalizada

function safeStringify(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) return "[Circular]";
      seen.add(value);
    }
    return value;
  });
}

console.log(safeStringify(objA)); 
// Output: {"child":{"parent":"[Circular]"}}

Solução 2: Use uma Biblioteca de Terceiros

Se você usar uma biblioteca projetada para referências circulares, como flatted, pode evitar esse erro mais facilmente.

const { stringify } = require("flatted");
console.log(stringify(objA));

Essa abordagem permite que você manipule com segurança estruturas circulares complexas com a ajuda de uma biblioteca.

6.2. Erros ao Manipular undefined ou null

Exemplo de Erro:

const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined

Causa:
Tentar acessar uma propriedade em undefined ou null resulta em um erro.

Solução: Use Encadeamento Opcional

const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)

O encadeamento opcional (?.) permite acesso seguro mesmo quando o objeto não existe.

6.3. Erro de Propriedade Indefinida

Exemplo de Erro:

const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined

Causa:
Isso ocorre quando você tenta acessar uma propriedade que não existe.

Solução 1: Defina um Valor Padrão

console.log((obj.value || "default").toString()); // Output: default

Solução 2: Combine Encadeamento Opcional e Nullish Coalescing

console.log(obj.value?.toString() ?? "default"); // Output: default

Isso torna o acesso à propriedade mais seguro e previne erros em tempo de execução.

6.4. Erros ao Usar Object.assign()

Exemplo de Erro:

const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object

Causa:
Object.assign() requer um objeto como primeiro argumento, portanto passar null ou undefined causa um erro.

Solução:
Passe um objeto vazio como valor inicial.

const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }

6.5. Erro de JSON.parse: “Token inesperado”

Exemplo de Erro:

const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON

Causa:
JSON tem regras de sintaxe estritas. Usar aspas simples ou omitir aspas ao redor das chaves torna o JSON inválido.

Solução:
Corrija a string para o formato JSON válido.

const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }

7. Resumo

Neste artigo, abordamos o problema comum de exibição “[object Object]” em JavaScript, incluindo por que ele ocorre e como corrigi-lo com soluções práticas. Vamos revisar os pontos principais e organizar o que aprendemos.

7.1. O que ‘[object Object]’ Realmente Significa

• Objetos JavaScript são convertidos em strings por padrão usando o método toString().
• Como resultado, objetos simples são exibidos no formato “[object Object]” .

7.2. Como Exibir o Conteúdo de Objetos Corretamente

Apresentamos várias abordagens práticas para inspecionar e exibir os dados de objetos de forma mais clara.

1. JSON.stringify() para converter objetos em strings legíveis:

• Exibe objetos no formato JSON e suporta impressão formatada (pretty printing).

1. console.dir() para inspeção hierárquica de objetos:

• Permite explorar visualmente estruturas detalhadas de objetos no DevTools.

1. Implementando um método toString() personalizado:

• Permite definir seu próprio formato de exibição para objetos.

1. Usando loops e Object.entries():

• Extrai chaves e valores para imprimi‑los manualmente.

7.3. Casos de Uso Avançados e Manipulação de Objetos Complexos

• Objetos e arrays aninhados: JSON.stringify() e console.table() ajudam a exibir dados de forma limpa e legível.
• Como lidar com erros de referência circular:
• Use funções personalizadas ou bibliotecas de terceiros para evitar falhas.
• Extração eficiente de dados:
• Use Object.keys(), Object.values(), e Object.entries() para recuperar informações de forma eficiente.

7.4. Prevenção de Erros e Dicas de Depuração

Também explicamos erros comuns relacionados a operações com objetos e como corrigi‑los.

1. Erros de referência circular:

• Lide com eles usando serializadores personalizados ou bibliotecas.

1. Erros ao acessar undefined ou null:

• Use encadeamento opcional e defina valores padrão.

1. Erros de JSON.parse:

• Certifique‑se de que a string está em formato JSON válido.

Aplicando essas técnicas, você pode prevenir erros antecipadamente e tornar a depuração muito mais fluida.

7.5. Considerações Finais

Objetos JavaScript são uma ferramenta poderosa para gerenciar dados de forma flexível. Contudo, sem entender como os objetos se comportam, você pode encontrar problemas de exibição como “[object Object]” ou erros inesperados em tempo de execução.

Use as técnicas e estratégias de tratamento de erros apresentadas neste artigo para escrever código mais limpo, seguro e eficiente.

Próximos Passos:

• Para aprofundar seu entendimento sobre manipulação de objetos, consulte artigos relacionados e a documentação oficial.
• Escreva e execute código real para confirmar o comportamento e fortalecer suas habilidades.

Isso conclui nossa explicação sobre o problema de exibição de objetos JavaScript. Obrigado por ler!