How to Iterate Over an Object in JavaScript: 5 Ways with Examples

How to Iterate Over an Object in JavaScript: From Beginner to Pro

Every developer sooner or later faces the task: "How do I go through all the properties of an object?" The question is so popular that on Stack Overflow it has gathered thousands of views and hundreds of answers. And it's no surprise — objects in JavaScript are the foundation of everything: from configurations to data from the server.

In this tutorial, we will cover all the main ways to iterate over an object in JavaScript, from classics to modern methods. You will learn when to use for...in, how Object.keys is better, and how Object.entries simplifies life. Let's go!

Preparation: Creating a Test Object

To make the examples clear, let's take a simple user object:

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscow',\n  isAdmin: false\n};

Our task is to output all keys and values. Let's see what tools are in the JavaScript arsenal.

1. The for...in Loop — A Classic

The oldest and most basic way to iterate over object properties. It appeared back in ES3 and works in all browsers.

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: Anna\n// age: 28\n// city: Moscow\n// isAdmin: false

Important nuance: for...in iterates not only over own properties but also over inherited ones through the prototype. To filter them out, use hasOwnProperty:

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Modern objects rarely have extra prototype properties, but the habit of checking hasOwnProperty will protect against bugs when working with libraries.

2. Object.keys() — A Modern Approach

The Object.keys() method returns an array of an object's own keys. This eliminates problems with prototypes and gives access to all array methods.

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Advantages:

\n
• Works only with own properties (not inherited)
\n
• Returns an array — you can use forEach, map, filter
\n
• Readable and predictable code
\n

This is my favorite way when you just need to get a list of keys and work with them.

3. Object.values() — When You Only Need Values

Sometimes we are only interested in the values of properties, without the keys. For example, for summing or displaying data.

const values = Object.values(user);\nconsole.log(values); // ['Anna', 28, 'Moscow', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

The method appeared in ES2017 and is great for working with data collections where keys don't matter.

4. Object.entries() — The King of Methods

Object.entries() returns an array of arrays, where each nested array is a [key, value] pair. This is a universal tool for iterating over an object in JavaScript.

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', 'Anna'],\n//   ['age', 28],\n//   ['city', 'Moscow'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

Notice the destructuring in the forEach parameters: ([key, value]). This makes the code clean and concise.

When to use:

\n
• You need both keys and values
\n
• You want to transform an object into another structure (e.g., into a Map)
\n
• You are writing a function