How to Dump Object in JavaScript

1. Use console.log() to Dump Object in JavaScript
2. Use console.log(JSON.stringyfy()) to Dump Object in JavaScript
3. Use console.dir() to Dump Object in JavaScript
4. Use console.table() to Dump Object in JavaScript
5. Use object.entries() to Dump Object in JavaScript
6. Conclusion

Most JavaScript developers love to use the console to inspect variables while coding. There are different methods to output an object’s keys and properties.

This article will discuss different methods to log JavaScript objects directly to the console window.

Use console.log() to Dump Object in JavaScript

We can use the console.log() method to output a message to the web console. The message can be a single string or multiple JavaScript objects.

Example:

console.log({hi: "✋", goodbye: "🖐️", nested: {inner: "🌎"}, array: [100]})

Output:

Use console.log(JSON.stringyfy()) to Dump Object in JavaScript

This method converts a JavaScript object or value to a JSON string. This method replaces or includes the values depending on the specified properties.

We will use null,2 as additional arguments for better indentation: console.log(JSON.stringify(obj,null,2)).

And we will use a second argument stringify to print properties matching the respective keys: console.log(JSON.stringify(obj,["key"])).

Example:

console.log(JSON.stringify({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]}))
console.log(JSON.stringify({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]},null,2))
console.log(JSON.stringify({hi: "✋", goodbye: "🖐️", world: {inner: "🌎"}, array: [50]},['hi']))

Output:

JSON.stringify is an excellent method, but it only works with JSON-compatible data, meaning that certain value types can be lost.

Use console.dir() to Dump Object in JavaScript

There is a method specifically meant for displaying objects to the console called console.dir(). This method is used to see all the properties of a specified JavaScript object in the console.

Example:

console.dir({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]})

Output:

Now, we will cover a method used to display tabular data.

Use console.table() to Dump Object in JavaScript

console.table() is perfect for displaying object data in the console window. It is an excellent method for a quick object inspection.

This function logs data as a table. Every element present in the array will be a row in the table, and the first column in the table will be the index.

If the data is an array, then its values are the array indices, and if the data is an object, then its values will be the names of the property.

Example:

console.table({hi: "✋", bye: "🖐️"})
console.table({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]})

Output:

Use object.entries() to Dump Object in JavaScript

The object.entries() method returns an array of a given object’s string-keyed property, in the same order as that provided by a for...in loop. The only significant difference is that a for...in loop lists the properties in the prototype chain.

The order of the array returned by object.entries() will not depend on how an object is defined. If there is a need for a particular order, the array must be sorted first.

The resulting key-value array can be iterated using a for...of loop. This allows more customization in terms of output.

The code below uses object.entries(object) and console.log().

Example 1:

const objectExample = {hi: "✋", bye: "🖐️", earth: {inner: "🌎"}, array: [50]}
console.log("Use object.entries and a .forEach loop to log key and value pairs to console:")
Object.entries(objectExample).forEach(keyValuePair => {console.log("  ",...keyValuePair)})
// The spread operator is a quick way to expand the array [key, value]

console.log("Alternatively, we can destructure the keys and values using a for...of loop:")
for(const [key,value] of Object.entries(objectExample)) { console.log(`  ${key}: ${value}`) }
// const is optional but recommended

// A for...of example without const - defaults to var in the global scope
for([key,value] of Object.entries(Example)) { `${key}: ${value}` }
console.log("Using var will mean that the key and value are still accessible in global scope")
console.log(`  ${key}: ${value}`) // These vars pollute the global scope and could lead to bugs

Output:

Example 2:

// ES6 example using for...in loop
var exampleObject = {hi: "✋", bye: "🖐️", earth: {inner: "🌎"}, array: [50]}
for(var property in exampleObject) { console.log(property + ": " + exampleObject[property]) }

Output:

We explicitly want to use the var keyword because otherwise, var will be implicitly declared in the global scope. Another thing to note is that a for...in loop will loop through inherited properties unless we check the object.prototype.hasOwnProperty() method for every property.

Conclusion

The console.log(JSON.stringify()) method logs the object to the console as a string, as long as the object data is JSON-type.

For complex objects, the object.entries() method is a way of looping through an object and logging the object to the console.

We can also use alert() - in which case alert(JSON.stringify()) and object.entries() using alert() will be the best choices to log the contents of the object inside the alert.