Prev Next

JavaScript Object Display

Displaying object properties and values is essential for debugging and providing meaningful information to users. JavaScript offers multiple ways to present object data, both in the console and on web pages.

Key Topics

Displaying Objects in Console

The simplest way to display an object is to log it to the console, allowing you to inspect its properties and values during development.

let user = { name: "Diana", age: 29 };
console.log(user);

Output

> { name: "Diana", age: 29 }

Explanation: Logging the user object directly to the console provides a quick view of its properties and values.

String Interpolation

Use template literals or string concatenation to integrate object values into strings for more readable output.

console.log(`${user.name} is ${user.age} years old.`);

Output

> Diana is 29 years old.

Explanation: Template literals allow embedding object property values directly into a string, making the output more descriptive and user-friendly.

Iterating Over Properties

Use loops such as for...in to iterate over an object's properties, extracting keys and values for display.

for (let key in user) {
    console.log(key + ": " + user[key]);
}

Output

> name: Diana

> age: 29

Explanation: The for...in loop iterates over all enumerable properties of the user object, logging each key-value pair to the console.

JavaScript Usage in DOM

This DOM-based example demonstrates how to display object data on a webpage, providing a user-friendly interface for viewing object information.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Display in DOM</title>
</head>
<body>
    <h1>Object Display Demo</h1>
    <button onclick="displayUser()">Display User</button>
    <div id="output"></div>

    <script>
        let userData = { name: "Ethan", role: "Engineer" };
        function displayUser() {
            document.getElementById("output").textContent = userData.name + " is an " + userData.role;
        }
    </script>
</body>
</html>

Key Takeaways

  • Console Logging: Quickly inspect object data in the browser console.
  • String Interpolation: Embed object values into strings for readable output.
  • Iteration: Use loops to list all object properties and values.
  • DOM Integration: Present object data dynamically on webpages.
Prev Next