Object Display

Showing an object's contents is harder than showing a number or string. Put an object straight into text and you get something unhelpful. This lesson covers the right tool for each situation: debugging in the console, showing data on a page, and saving or sending it.

// The [object Object] Problem

const user = { name: "Ada", age: 36 };

console.log("User: " + user);
console.log(`User: ${user}`);

When an object is turned into a string, JavaScript uses a generic default. You will see [object Object] on a page or in an alert any time you forget to pick specific properties.

// For Debugging: console.log

Pass the object as its own argument (with a comma, not +) and the console shows it properly, with expandable details:

console.log("User:", user);

For a list of similar objects, console.table draws a grid:

console.table([
  { name: "Ada",   age: 36 },
  { name: "Grace", age: 45 }
]);

// For People: Pick the Properties

On a page, show specific properties in a sentence or layout:

const product = { name: "Desk Lamp", price: 24.5, inStock: true };

const text = `${product.name}: $${product.price.toFixed(2)} (${product.inStock ? "in stock" : "sold out"})`;
console.log(text);

On a real page you would place that text into an element: document.getElementById("info").textContent = text;

// Looping to Show Every Property

const specs = { cpu: "M3", ram: "16GB", storage: "512GB" };

let lines = "";
for (const [key, value] of Object.entries(specs)) {
  lines += `${key}: ${value}\n`;
}
console.log(lines);

The [key, value] in that loop is a shortcut called destructuring. Each entry from Object.entries is a two-item array like ["cpu", "M3"], and const [key, value] unpacks it into two variables in one step. Without it, you would write entry[0] and entry[1]. A plain for...in loop works too:

const person = { name: "John", age: 30, city: "New York" };

let text = "";
for (let x in person) {
  text += person[x] + " ";
}
console.log(text);

Or just the values, joined with a separator:

console.log(Object.values(specs).join(" / "));   // "M3 / 16GB / 512GB"

// For Saving and Sending: JSON.stringify

JSON.stringify turns an object into a text format called JSON. It is how objects are saved to storage and sent to servers:

const user = { name: "Ada", age: 36, langs: ["JS", "Python"] };

console.log(JSON.stringify(user));

Add two more arguments to make it readable. The 2 means "indent with two spaces":

console.log(JSON.stringify(user, null, 2));

JSON.parse goes the other way, turning JSON text back into an object:

const back = JSON.parse('{"name":"Ada","age":36}');
console.log(back.age);   // 36

// What JSON Leaves Out

const thing = {
  name: "Widget",
  secret: undefined,
  greet() { return "hi"; }
};

console.log(JSON.stringify(thing));

// A Custom toString Method

Give an object its own toString and it will use that whenever it is turned into text:

const point = {
  x: 3,
  y: 7,
  toString() { return `(${this.x}, ${this.y})`; }
};

console.log(`Point: ${point}`);

// Which Tool When?

// Quick Check

const item = { name: "Pen", price: 2 };
console.log("Item: " + item);

const t = { n: 1, f() { return 2; }, u: undefined };
console.log(JSON.stringify(t));

// Try It

▶ Open Playground

1. Click Open Playground and run it. Then log user with a comma instead of + and compare the output
2. Show three objects in a grid with console.table
3. Stringify an object with indentation, then parse it back and read one property
4. Add a toString() to an object and use it inside a template literal