How to Loop Through a JavaScript Object: Keys, Values, and Entries

By the end of this page, you will understand how to iterate over a JavaScript object's properties and access its keys and values. You will learn the most common approaches, when to use each one, and how to avoid common mistakes such as iterating over inherited properties.

In JavaScript, an object stores data as key-value pairs. For example, in this object:

const p = {
  p1: "value1",
  p2: "value2"
};

• p1 and p2 are the keys
• "value1" and "value2" are the values

Looping through an object means visiting each property one by one so you can read or use its data.

This matters because objects are everywhere in JavaScript:

• API responses are often objects
• Configuration settings are often objects
• Form data may be stored in objects
• Lookup tables and grouped data are commonly represented as objects

There are several ways to iterate through an object, and each has a slightly different purpose:

• for...in loops through enumerable property names
• Object.keys() gives you an array of keys
• Object.values() gives you an array of values
• Object.entries() gives you an array of [key, value] pairs

For most modern JavaScript code, or is often the clearest choice because they work well with array methods and avoid some of the pitfalls of .

Think of a JavaScript object like a set of labeled drawers:

• the label on each drawer is the key
• the item inside the drawer is the value

Looping through the object means opening each drawer one at a time:

• first read the label
• then read what is inside

Different JavaScript methods give you different ways to inspect the drawers:

• Object.keys() gives you just the labels
• Object.values() gives you just the contents
• Object.entries() gives you both the label and the contents together

Using for...in

const p = {
  p1: "value1",
  p2: "value2",
  p3: "value3"
};

for (const key in p) {
  console.log(key, p[key]);
}

This prints each property name and its value.

• key will be "p1", "p2", "p3"
• p[key] accesses the matching value

Safer for...in with own-property check

const p = {
  p1: "value1",
  p2: "value2",
  p3: "value3"
};

for (const key in p) {
  if (Object.(p, key)) {
    .(key, p[key]);
  }
}

Consider this example:

const user = {
  name: "Ava",
  age: 28,
  role: "admin"
};

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

Here is what happens step by step:

1. user is created with three properties:

   • name: "Ava"
   • age: 28
   • role: "admin"

2. Object.entries(user) creates an array of pairs:

[["name", "Ava"], ["age", 28], ["role", "admin"]]

Looping through objects is common in real programs.

Rendering data in a UI

You may receive settings or profile data as an object and want to display each field.

const profile = {
  username: "sam",
  country: "UK",
  plan: "pro"
};

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

Validating form input

const formData = {
  email: "test@example.com",
  password: "123456",
  agreeToTerms: true
};

for (const [field, value] of Object.entries(formData)) {
  if (value === "" || value === null) {
    console.log(` is required`);
  }
}

In real codebases, developers often combine object iteration with other useful patterns.

Validation and guard clauses

function validateUser(user) {
  for (const [key, value] of Object.entries(user)) {
    if (value === undefined || value === null) {
      return `${key} is missing`;
    }
  }

  return "User is valid";
}

This uses an early return to stop as soon as invalid data is found.

Transforming object data

Developers often convert an object into an array using Object.entries(), transform it, then convert it back.

const prices = {
  apple: 1,
  banana: 2
};

const updatedPrices = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value * ])
);

.(updatedPrices);

1. Using dot notation with a variable key

Broken code:

const p = { p1: "value1" };

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

This prints undefined because p.key looks for a property literally named key.

Correct code:

for (const key in p) {
  console.log(p[key]);
}

Use bracket notation when the property name is stored in a variable.

2. Forgetting that for...in can include inherited properties

Broken idea:

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

This may loop over inherited enumerable properties too.

for...in vs

const obj = {
  a: 1,
  b: 2
};

Get keys

Object.keys(obj); // ["a", "b"]

Get values

Object.values(obj); // [1, 2]

Get key-value pairs

Object.entries(obj); // [["a", 1], ["b", 2]]

Loop with for...in

for (const key in obj) {
  if (Object.hasOwn(obj, key)) {
    console.log(key, obj[key]);
  }
}

Loop with Object.keys()

How do I loop through keys and values in a JavaScript object?

Use Object.entries() with for...of:

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

What is the difference between for...in and Object.keys()?

for...in loops through enumerable property names, including inherited ones. Object.keys() returns only the object's own enumerable keys.

Can I use for...of directly on an object?

No. Plain JavaScript objects are not directly iterable. Use Object.keys(), Object.values(), or Object.entries() first.

What is the best way to iterate over an object in modern JavaScript?

If you need both keys and values, Object.entries() is usually the cleanest and easiest to read.

Why do I need bracket notation like ?

• JavaScript objects — The core data structure being iterated.
• Arrays in JavaScript — Useful because Object.keys(), Object.values(), and Object.entries() return arrays.
• for...in loop — A language feature specifically used for object property names.
• for...of loop — Commonly used with arrays returned from object methods.
• Bracket notation vs dot notation — Important for accessing dynamic property names.
• Array methods like forEach, map, and filter — Often used after converting object data into arrays.
• Object destructuring — Helpful when working with [key, value] pairs from Object.entries().
• Prototype inheritance — Relevant because for...in can include inherited properties.