How to display JavaScript object using console.log method?

Are you ready to discover how to display JavaScript objects using the console.log method and can improve your coding skills?

Learn how to use it for debugging and improve your coding skills.

This article will explore the several ways to log an object to the console in JavaScript, its different uses, and tips for better debugging.

Get ready to make the most out of console logs and make your coding work smooth.

What is console.log() method?

The console.log() method is a function that is used to print messages to the web console.

It’s a handy tool for developers to use when they want to see what’s going on in their code.

For instance, if you want to see what’s inside of an object at a certain point in your code, you can use console.log(object) to print the value of that variable to the console.

Here’s an example illustration:

//an example object
var object = {Firstname: "It", Lastname: "Sourcecode"};

//  this will print the object in the console
console.log(object);✅

Output:

{ Firstname: 'It', Lastname: 'Sourcecode' }

This can help you debug your code and figure out what’s going on. The console.log() method can take multiple arguments, so you can print multiple values at once.

You can also use it to print strings, numbers, objects, and more! It’s a versatile tool that is available in all web browsers.

8 Different ways to display a JavaScript object or to console log an object in JavaScript

There are several methods available for logging objects to the console.

Now, here are eight (8) different ways how to display a JavaScript object or to console.log an object in JavaScript, along with example code for each:

Using console.log(object)

The most basic way to log an object to the console is by using the console.log() method and passing the object as an argument.

Here’s an example:

let sampleObject = {name: "Itsourcecode", age: 18};
console.log(sampleObject);✅

Output:

{ name: 'Itsourcecode', age: 18 }

Using JSON.stringify()

You can use the JSON.stringify() method to convert the object into a JSON string and then log it to the console.

Here’s an example:

let sampleObject = {name: "Mark", age: 19};
console.log(JSON.stringify(sampleObject)); ✅

Output:

{"name":"Mark","age":19}

Using Object.entries():

You can use the Object.entries() method to loop through the object and log its properties to the console.

Here’s an example:

let sampleObject = {name: "Luke", age: 20};
for (let [key, value] of Object.entries(sampleObject)) {
    console.log(`${key}: ${value}`); ✅
}

Output:

name: Luke
age: 20

Using for…in loop:

You can use a for…in loop to iterate over the properties of the object and log them to the console.

Here’s an example:

let sampleobject = {name: "Mathew", age: 21};
for (let key in sampleobject) {
    console.log(`${key}: ${sampleobject[key]}`);✅
}

Output:

name: Mathew
age: 21

Using Object.keys()

You can use the Object.keys() method to get an array of the object’s own enumerable properties and then log them to the console.

Here’s an example:

let sampleObject = {name: "Jude", age: 22};
let keys = Object.keys(sampleObject);
for (let key of keys) {
console.log(${key}: ${sampleObject[key]} );✅
}

Output:

name: Jude
age: 22

Using Object.values():

You can use the Object.values() method to get an array of the object’s own enumerable property values and then log them to the console.

Here’s an example:

let sampleObject = {name: "David", age: 23};
let values = Object.values(sampleObject);
for (let value of values) {
    console.log(value); ✅
}

Output:

David
23

Using a custom function

You can write a custom function that takes an object as an argument, iterates over its properties, and logs them to the console.

Here’s an example:

function logObject(object) {
    for (let key in object) {
        console.log(`${key}: ${object[key]}`);
    }
}

let sampleObject = {name: "Solomon", age: 24};
logObject(sampleObject); ✅

Output:

name: Solomon
age: 24

Using a library

There are several libraries available that provide methods for logging objects to the console, such as Lodash.

Here’s an example using Lodash:

let _ = require('lodash');
let sampleObject = {name: "Itsourcecode", age: 25};
console.log(sampleObject); ✅

Output:

{ name: 'Itsourcecode', age: 25 }

Conclusion

In conclusion, this article discusses the console log JavaScript object for debugging and improving coding skills.

It provides an overview of the method’s basic usage and then delves into eight (8) different ways to log objects to the console, including examples for each method.

The article emphasizes the versatility of the console.log() method and how it can be used to print strings, numbers, and objects.

We are hoping that this article provides you with enough information that help you understand the console log JavaScript Object.

If you want to dive into more JavaScript topics, check out the following articles:

• Binary search in JavaScript 
• Binary in JavaScript
• Blob JavaScript

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →