When working with JavaScript objects, you often need to display object data on the screen, in the browser console, or inside a webpage. Understanding how to properly display objects is important for debugging, learning, and building real applications.

What is Object Display in JavaScript?

Object display means showing the contents of an object in a readable format.

For example, consider this object:

Now the question is:

 How do we see this data on the screen or console?

JavaScript provides multiple ways to display objects depending on where you want the output.

1. Display Object Using console.log() (Most Common Way)

The easiest way to display an object is using console.log().

Explanation:

  • Displays the entire object in the browser console

  • Best for debugging and learning

  • Commonly used by developers

2. Display Object Properties Individually

You can display each property separately.

Explanation:

  • Useful when you only want specific values

  • Makes the output cleaner

3. Display Object Using document.write() (Webpage Output)

You can show object data directly on the webpage.

Explanation:

  • Displays data inside the browser page

  • Mostly used for learning (not recommended in real apps)

4. Display Object Using JSON.stringify()

Objects are not always displayed nicely as text.
To convert an object into a readable string, use JSON.stringify().

Output:

{"brand":"Toyota","model":"Corolla","year":2022}

Explanation:

  • Converts object into a string format

  • Very useful when sending data to APIs

  • Common in backend and frontend communication

5. Display Object Using a Loop

You can loop through the object and display all properties.

Output:

title: JavaScript Basics author: John Doe pages: 250

Explanation:

  • Displays every key and value dynamically

  • Useful when object data is large or unknown

6. Display Object in HTML Using InnerHTML

You can show object data inside HTML elements.

HTML
1<p id="output"></p>
2
3<script>
4let movie = {
5 name: "Inception",
6 rating: 8.8
7};
8
9document.getElementById("output").innerHTML =
10 "Movie: " + movie.name + "<br>Rating: " + movie.rating;
11</script>

Explanation:

  • Displays object data nicely on the webpage

  • Very common in real-world web applications

Which Method Should You Use?

MethodBest Use
console.log()Debugging and learning
Dot notationShowing specific values
document.write()Simple demos
JSON.stringify()APIs, data transfer
LoopsDisplaying many properties
innerHTMLShowing data on webpage

Common Mistakes Beginners Make

Trying to directly print object with text

This may show:

[object Object]

Correct way


Why Object Display is Important in JavaScript

Learning how to display objects helps you:

  • Debug your code easily

  • Understand API responses

  • Build dynamic webpages

  • Work with backend data

  • Become confident with real-world JavaScript

Every professional developer constantly uses object display techniques.

Conclusion

Object display in JavaScript is a fundamental skill. Whether you are debugging, building UI, or working with APIs, you must know how to properly view and present object data.

Once you master these techniques, working with objects becomes much easier and more powerful.