How to Display a JavaScript Object

In this snippet, you will find quick solutions for displaying an object in JavaScript.

For example, when you need to print the object for debugging purposes, you can use the following code:

Javascript object

Note that logging the object directly is preferred. The following code will not display the object's contents clearly:

Javascript object

You can also use a comma in the console.log() method. This prints the string first, followed by the object's properties. Here is an example:

Javascript object

There is also an alternative method: the native JSON.stringify() method. It handles nested objects, and all major browsers support it.

Here is an example of using the <kbd class="highlighted">JSON.stringify()</kbd> method:

Javascript object JSON stringify

You can use a custom replacer function with JSON.stringify() to handle circular references, which otherwise cause this error:

Describing the JSON.stringify() Method

The JSON.stringify() method converts JavaScript objects into strings, which is useful when sending data to a web server. It accepts three parameters: value, replacer, and space. The value is the object to convert. The replacer is optional; it can be a function or an array that filters properties. If the value is null or undefined, the method returns the string "null". The space parameter is also optional and controls indentation in the resulting string. The method returns a JSON-formatted string.

The Usage of JavaScript Objects

Objects are a fundamental data type in modern JavaScript. Unlike primitive data types, which store a single value, objects are complex structures that can hold any combination of primitives and reference types. Objects are reference types themselves. They can be created using <kbd class="highlighted">brackets {…}</kbd> with an optional list of properties.