JavaScript Object Display

Displaying JavaScript objects in a readable format can be essential for debugging and logging purposes. Below are several methods you can use to display objects in JavaScript.

1. console.log()

The console.log() method can display objects in the console. It provides a basic view of the object's properties and values.

const person = {
    name: "Alice",
    age: 25
};

console.log(person); // Logs the object to the console

            

2. JSON.stringify()

The JSON.stringify() method converts a JavaScript object into a JSON string. You can use this method to get a string representation of the object, which can be useful for storage or display.

const person = {
    name: "Alice",
    age: 25
};

const jsonString = JSON.stringify(person);
console.log(jsonString); // {"name":"Alice","age":25}

            

3. JSON.stringify(obj, null, 2)

By providing additional parameters to JSON.stringify(), you can format the output with indentation for better readability.

const person = {
    name: "Alice",
    age: 25
};

const jsonString = JSON.stringify(person, null, 2);
console.log(jsonString);
/*
{
  "name": "Alice",
  "age": 25
}
*/

            

4. Object.toString()

The Object.toString() method returns a string representing the object. By default, it returns "[object Object]", but it can be overridden by defining a custom toString() method in the object's prototype.

const person = {
    name: "Alice",
    age: 25,
    toString() {
        return `Name: ${this.name}, Age: ${this.age}`;
    }
};

console.log(person.toString()); // Name: Alice, Age: 25

            

5. console.dir()

The console.dir() method displays an interactive list of the properties of the specified JavaScript object. This can be particularly useful for inspecting complex objects.

const person = {
    name: "Alice",
    age: 25
};

console.dir(person); // Displays the object properties interactively in the console