Object Display in JavaScript

In JavaScript, displaying objects is essential for debugging, logging, and data transfer.. JavaScript provides several ways to display objects for inspection and serialization:

• console.log – Outputs objects to the console.
• console.dir – Displays a detailed, interactive view of an object’s properties.
• JSON.stringify – Converts objects to JSON strings for serialization or structured logging.
• Other console methods (e.g., console.table, console.group) enhance readability for arrays or complex objects.

Using console.log

The most common method to display an object’s contents in the console, typically used for debugging.

• Displays the object’s enumerable properties.
• Nested objects appear as expandable hierarchies in modern consoles (Chrome DevTools, Node.js).
• Non-enumerable or prototype properties may not appear.

Syntax:

console.log(object);

Example:

const person = {
  name: "John",
  age: 30,
  address: { city: "Mumbai", country: "India" }
};
console.log(person);
// Output:
// { name: "John", age: 30, address: { city: "Mumbai", country: "India" } }

Using console.dir

Displays an interactive, detailed view of an object’s properties, often more structured than console.log.

• Displays properties as a collapsible list.
• May include non-enumerable or prototype properties.

Syntax:

console.dir(object);

Example:

const person = { name: "John", age: 30 };
console.dir(person);

Using JSON.stringify

Converts an object to a JSON string, useful for serialization, logging, or transmitting data.

• Converts enumerable own properties to a JSON string.
• Excludes functions, undefined, and symbols.
• Circular references throw a TypeError.

Syntax:

JSON.stringify(value[, replacer[, space]]);

• value – Object to convert.
• replacer (optional) – Function or array to filter/transform properties.
• space (optional) – Number of spaces for indentation.

Example:

const person = {
  name: "John",
  age: 30,
  job: undefined,
  greet: function() { console.log("Hi"); },
  [Symbol("id")]: 123
};
console.log(JSON.stringify(person));
// Output: {"name":"John","age":30}

// Pretty-print with indentation
console.log(JSON.stringify(person, null, 2));
/* Output:
{
  "name": "John",
  "age": 30
}
*/

Replacer Example:

const replacer = (key, value) => (typeof value === "number" ? value * 2 : value);
console.log(JSON.stringify(person, replacer)); // {"name":"John","age":60}

Other Console Methods

a) console.table

Displays object properties in a tabular format, ideal for arrays of objects or simple key-value pairs.

const people = [
  { name: "John", age: 30 },
  { name: "Alice", age: 25 }
];
console.table(people);

b) console.group

Groups related logs for nested objects, improving readability.

console.group("Person");
console.log("Name:", person.name);
console.log("Address:", person.address);
console.groupEnd();

Handling Special Cases

Circular References:

console.log and JSON.stringify fail with circular references.

const obj = {};
obj.self = obj;
console.log(obj); // [Circular] or incomplete
// JSON.stringify(obj); // TypeError

Non-Enumerable Properties:

• console.log and JSON.stringify skip non-enumerable properties.
• Use Object.getOwnPropertyNames or console.dir to inspect them.

Object.defineProperty(person, "id", { value: 123, enumerable: false });
console.log(person); // id not shown
console.dir(person); // May show id in some environments

Custom Display: Define a toString method to customize object display.

const person = {
  name: "John",
  age: 30,
  toString() {
    return `${this.name}, ${this.age} years old`;
  }
};
console.log(person.toString()); // "John, 30 years old"