How to Loop Through an Object in JavaScript

Use object looping when you need to read every key, every value, or both from a JavaScript object. The most practical patterns are for...in, Object.keys(), Object.values(), and Object.entries().

What you’ll build or solve

You’ll learn how to loop through an object in JavaScript using the most common iteration methods. You’ll also know which method is best for keys, values, or key-value pairs.

When this approach works best

This approach is the right choice when object properties need to be rendered, transformed, validated, or exported.

Common real-world scenarios include:

• Settings panels
• API payload inspection
• Form error messages
• Config rendering
• Dynamic dashboards

This is a bad idea when the data is already an array. In that case, use array loops directly.

Prerequisites

You only need:

• A JavaScript file or browser console
• A basic object
• Basic object syntax knowledge

Step-by-step instructions

Step 1: Loop through keys and values with Object.entries()

The cleanest default is Object.entries() because it gives both the key and value together.

const user = {
  name: "Alex",
  role: "admin",
  active: true
};

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}

If you only need keys, switch to Object.keys().

for (const key of Object.keys(user)) {
  console.log(key);
}

If you only need values, use Object.values().

for (const value of Object.values(user)) {
  console.log(value);
}

What to look for:

• Object.entries() is best for key-value pairs
• Object.keys() gives only keys
• Object.values() gives only values
• Great for rendering dynamic UI sections
• Avoid looping inherited properties with raw for...in unless needed

Examples you can copy

Render settings

const settings = {
  theme: "dark",
  notifications: true
};

for (const [key, value] of Object.entries(settings)) {
  console.log(`${key}: ${value}`);
}

Print field names

const form = {
  email: "alex@example.com",
  country: "USA"
};

for (const key of Object.keys(form)) {
  console.log(key);
}

Read metric values

const metrics = {
  views: 1200,
  clicks: 84
};

for (const value of Object.values(metrics)) {
  console.log(value);
}

Common mistakes and how to fix them

Mistake 1: Trying to use for...of directly on an object

What the reader might do:

for (const item of user) {
  console.log(item);
}

Why it breaks: plain objects are not iterable by default.

Corrected approach:

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}

Mistake 2: Using for...in without filtering inherited properties

What the reader might do:

for (const key in user) {
  console.log(key);
}

Why it breaks: inherited properties may also appear.

Corrected approach:

for (const key of Object.keys(user)) {
  console.log(key);
}

Mistake 3: Looping keys when values are needed

What the reader might do:

for (const key of Object.keys(user)) {
  console.log(key);
}

Why it breaks: this only prints property names.

Corrected approach:

for (const value of Object.values(user)) {
  console.log(value);
}

Troubleshooting

If for...of fails, wrap the object with Object.keys(), values(), or entries().

If unexpected keys appear, avoid raw for...in.

If both key and value are needed, default to Object.entries().

If rendering order matters, confirm the object keys were created in the intended order.

Quick recap

• Use Object.entries() for key-value pairs
• Use Object.keys() for keys only
• Use Object.values() for values only
• Avoid direct for...of on plain objects
• Prefer entries as the clean default