Cómo corregir “[object Object]” en JavaScript (Mejores formas de mostrar objetos)

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

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

1. Introducción

Al crear programas en JavaScript, a veces puedes ver la cadena «[object Object]» al intentar mostrar un objeto. Esta es una situación común que ocurre cuando los objetos de JavaScript se imprimen directamente sin formato.

En este artículo, explicaremos qué significa realmente «[object Object]» y cómo mostrar correctamente el contenido de un objeto de forma legible.

Esta guía está diseñada para desarrolladores principiantes a intermedios, e incluye ejemplos prácticos y fragmentos de código para ayudarte a comprender el tema más a fondo.

2. ¿Qué es ‘[object Object]’?

En JavaScript, cuando intentas convertir un objeto en una cadena, el comportamiento predeterminado a menudo produce «[object Object]». Esta salida representa información de tipo sobre el valor, pero no muestra el contenido real del objeto.

¿Por qué aparece ‘[object Object]’?

Los objetos de JavaScript tienen un método toString() predeterminado. Este método se llama siempre que un objeto se trata como una cadena. Sin embargo, según la especificación estándar de JavaScript, los objetos devuelven el siguiente formato por defecto al convertirse en una cadena.

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

Este comportamiento solo muestra la información de tipo como “object” y no incluye ningún detalle sobre las claves o valores dentro del objeto. Por eso los desarrolladores deben usar otros métodos para inspeccionar y mostrar los datos del objeto correctamente.

3. Por qué aparece ‘[object Object]’

El papel del método toString()

Todos los objetos de JavaScript heredan el método Object.prototype.toString(). Este método se llama automáticamente cuando un objeto se convierte en una cadena.

Para confirmar el comportamiento predeterminado, echa un vistazo al siguiente código:

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

Como puedes ver, toString() está diseñado para devolver «[object Object]» para objetos simples por defecto.

Ejemplos causados por coerción de tipo implícita

El mismo comportamiento ocurre cuando un objeto se concatena con una cadena.

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

En este ejemplo, obj se convierte en una cadena, y toString() se llama internamente, lo que produce la salida «[object Object]».

4. Cómo evitar ‘[object Object]’

4.1. Convertir objetos a cadenas con JSON.stringify()

El enfoque más fácil y común es usar JSON.stringify() para convertir un objeto en una cadena con formato JSON.

Ejemplo: Uso básico de JSON.stringify

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

En este código, las claves y valores del objeto se muestran con precisión en formato JSON.

Impresión bonita (con sangría)

También puedes generar JSON formateado con sangría para mejorar la legibilidad.

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

Salida:

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

Debido a que JSON.stringify() puede formatear objetos complejos y estructuras anidadas de forma limpia, es extremadamente útil para depurar.

4.2. Inspeccionar objetos en detalle con console.dir()

Usando console.dir(), puedes inspeccionar las propiedades y métodos de un objeto en una estructura jerárquica.

Ejemplo: Cómo usar console.dir

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

Esta salida se muestra en un formato que te permite expandir e inspeccionar la estructura del objeto dentro de DevTools.

Diferencia entre console.dir y console.log:

• console.log(obj) muestra el objeto en un estilo de una sola línea, lo que no es ideal para inspeccionar estructuras complejas.
• console.dir(obj) conserva la estructura jerárquica, lo que lo hace útil para objetos y arreglos anidados.

4.3. Implementar un método toString() personalizado

Puedes personalizar la salida predeterminada «[object Object]» definiendo tu propio método toString() en un objeto.

Ejemplo: Implementación 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

Con este enfoque, cuando el objeto se trata como una cadena, mostrará tu formato personalizado en lugar del valor predeterminado.

4.4. Imprimir el contenido del objeto con un bucle for…in

Otra opción es recorrer las claves y valores de un objeto e imprimirlos manualmente.

Ejemplo: Usando un bucle for…in

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

Salida:

key: value
id: 123

Este enfoque es simple y fácil de personalizar, lo que lo hace adecuado para inspeccionar rápidamente objetos pequeños.

4.5. Usar Object.entries() o Object.keys()

A partir de ES6, JavaScript ofrece métodos para extraer claves y valores como arreglos.

Ejemplo: Usando Object.entries

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

Salida:

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

Al obtener pares clave‑valor como arreglos, puedes aprovechar los métodos de arreglos para un procesamiento adicional.

5. Ejemplos avanzados: Mostrar objetos y arreglos complejos

5.1. Mostrar objetos anidados

Cuando un objeto contiene otros objetos, veamos una forma fácil de mostrar su contenido de manera clara.

Ejemplo: Mostrar un objeto anidado

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

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

Salida:

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

Como se muestra arriba, usar JSON.stringify() facilita la comprensión de la estructura de los objetos anidados.

5.2. Mostrar objetos que contienen arreglos

Si un objeto contiene un arreglo, puedes manejarlo de manera similar.

Ejemplo: Mostrar un objeto con un arreglo

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

console.table(order.items);

Salida:

En este ejemplo, console.table() muestra los elementos del arreglo en formato de tabla. Esto facilita la inspección visual de la estructura de datos y mejora la eficiencia de depuración.

5.3. Manejar objetos con referencias circulares

En JavaScript, si un objeto contiene una referencia circular, usar directamente JSON.stringify() generará un error.

Ejemplo: Error de referencia circular

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

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

En este caso, puedes resolver el problema usando una biblioteca de terceros o implementando una función personalizada para manejar referencias circulares.

Ejemplo de solución: Usando la biblioteca flatted

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

console.log(stringify(objA));

Este enfoque te permite convertir a cadena de forma segura objetos que contienen referencias circulares.

5.4. Obtener solo claves de objetos o arreglos

Al explorar una estructura de datos, también puede ser útil extraer y mostrar solo las claves o los valores.

Obtener una lista de claves:

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

Obtener una lista de valores:

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

Obtener pares clave‑valor:

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

Estos métodos son útiles para analizar datos y extraer información específica de manera eficiente.

6. Errores comunes y soluciones

6.1. Error de referencia circular: “Convirtiendo estructura circular a JSON”

Mensaje de error:

TypeError: Converting circular structure to JSON

Causa:
Esto ocurre cuando una propiedad de un objeto vuelve a referenciar al mismo objeto, creando una estructura circular.

Ejemplo:

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

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

Solución 1: Usar una función de serialización 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]"}}

Solución 2: Usar una biblioteca de terceros

Si utilizas una biblioteca diseñada para referencias circulares, como flatted, puedes evitar este error de forma más sencilla.

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

Este enfoque te permite manejar de manera segura estructuras circulares complejas con la ayuda de una biblioteca.

6.2. Errores al manejar undefined o null

Ejemplo de error:

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

Causa:
Intentar acceder a una propiedad en undefined o null genera un error.

Solución: Usar encadenamiento opcional

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

El encadenamiento opcional (?.) permite acceder de forma segura incluso cuando el objeto no existe.

6.3. Error de propiedad indefinida

Ejemplo de error:

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

Causa:
Esto ocurre cuando intentas acceder a una propiedad que no existe.

Solución 1: Establecer un valor por defecto

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

Solución 2: Combinar encadenamiento opcional y coalescencia nula

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

Esto hace que el acceso a la propiedad sea más seguro y evita errores en tiempo de ejecución.

6.4. Errores al usar Object.assign()

Ejemplo de error:

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

Causa:
Object.assign() requiere un objeto como primer argumento, por lo que pasar null o undefined produce un error.

Solución:
Pasa un objeto vacío como valor inicial.

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

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

Ejemplo de error:

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

Causa:
JSON tiene reglas de sintaxis estrictas. Usar comillas simples o omitir comillas alrededor de las claves lo vuelve un JSON inválido.

Solución:
Corrige la cadena para que tenga un formato JSON válido.

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

7. Resumen

En este artículo cubrimos el problema común de visualización «[object Object]» en JavaScript, incluyendo por qué ocurre y cómo solucionarlo con soluciones prácticas. Repasemos los puntos clave y organicemos lo que aprendimos.

7.1. Qué significa realmente ‘[object Object]’

• Los objetos de JavaScript se convierten a cadenas por defecto usando el método toString().
• Como resultado, los objetos simples se muestran en el formato «[object Object]».

7.2. Cómo mostrar correctamente el contenido de un objeto

Presentamos varios enfoques prácticos para inspeccionar y mostrar los datos de un objeto de forma más clara.

1. JSON.stringify() para convertir objetos en cadenas legibles:

• Muestra los objetos en formato JSON y admite impresión bonita (salida formateada).

1. console.dir() para inspección jerárquica de objetos:

• Te permite explorar visualmente estructuras de objetos detalladas en DevTools.

1. Implementar un método toString() personalizado:

• Te permite definir tu propio formato de visualización para los objetos.

1. Usar bucles y Object.entries():

• Extrae claves y valores para imprimirlos manualmente.

7.3. Casos de Uso Avanzados y Manejo de Objetos Complejos

• Objetos y arreglos anidados: JSON.stringify() y console.table() ayudan a mostrar los datos de forma limpia y legible.
• Cómo lidiar con errores de referencias circulares:
• Usa funciones personalizadas o bibliotecas de terceros para evitar fallos.
• Extracción eficiente de datos:
• Utiliza Object.keys(), Object.values() y Object.entries() para obtener información de manera eficiente.

7.4. Prevención de Errores y Consejos de Depuración

También explicamos errores comunes relacionados con operaciones de objetos y cómo solucionarlos.

1. Errores de referencias circulares:

• Maneja estos casos con serializadores personalizados o bibliotecas.

1. Errores al acceder a valores undefined o null:

• Usa encadenamiento opcional y establece valores por defecto.

1. Errores de JSON.parse():

• Asegúrate de que la cadena tenga un formato JSON válido.

Aplicando estas técnicas, puedes prevenir errores de antemano y hacer que la depuración sea mucho más fluida.

7.5. Reflexiones Finales

Los objetos de JavaScript son una herramienta poderosa para gestionar datos de forma flexible. Sin embargo, si no comprendes cómo se comportan los objetos, podrías encontrarte con problemas de visualización como «[object Object]» o errores inesperados en tiempo de ejecución.

Utiliza las técnicas y estrategias de manejo de errores presentadas en este artículo para escribir código más limpio, seguro y eficiente.

Próximos pasos:

• Para profundizar tu comprensión del manejo de objetos, revisa artículos relacionados y la documentación oficial.
• Escribe y ejecuta código real para confirmar el comportamiento y reforzar tus habilidades.

¡Esto concluye nuestra explicación del problema de visualización de objetos en JavaScript. Gracias por leer!