Iteration over Objects in JavaScript: A Complete Guide for Beginners

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

Every developer who writes JavaScript eventually faces the task: "How do I loop through all the properties of an object?" If you're used to working with arrays, where you have for, forEach, and map, objects might seem unruly. But don't get upset! In this article, we'll cover all the ways to iterate over an object in JavaScript — from the classic for...in to the modern Object.keys(), Object.values(), and Object.entries().

We won't just show the syntax. We'll break down which method to choose for a specific task, what pitfalls exist, and how to avoid stepping on the rake of inherited properties. Let's go!

What is an Object in JavaScript and Why Do You Need to Iterate Over It?

An object is a collection of "key: value" pairs. Unlike an array, where elements are ordered by index, the order of properties in an object is not guaranteed (although modern engines try to preserve it).

Imagine you have an object with user data:

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

You need to display all the data on the screen, send it to the server, or just calculate something. Without iteration, you'd have to write user.name, user.age, etc. — this is inflexible and doesn't scale. What if the object has 50 properties? That's where iteration methods come in handy.

Method #1: The Classic for...in

The oldest and most straightforward way to iterate over object properties is using the for...in loop. It was created specifically for objects.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscow'\n};\n\nfor (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// Output:\n// name: Anna\n// age: 28\n// city: Moscow

Here, key is the property name (a string value), and user[key] is its value.

Important! for...in iterates not only over the object's own properties but also over those inherited through the prototype chain. This can lead to unexpected results, especially if you've extended the prototypes of built-in objects (which you shouldn't do, but you never know).

To avoid this, use the hasOwnProperty method:

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

A modern alternative is Object.hasOwn() (ES2022):

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

When to use for...in? When you need the property names (keys) and you're sure you won't encounter inherited properties. Or when you're working with simple objects created with a literal {}.

Method #2: Object.keys() — Get an Array of Keys

The Object.keys() method returns an array of an object's own (non-inherited) enumerable properties. It is the most popular and safe way to iterate today.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscow'\n};\n\nconst keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city']\n\n// Now you can use forEach or for...of\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Advantage: you get a regular array that you can do anything with — filter, map, sort.

Example with filtering:

const filteredKeys = Object.keys(user).filter(key => key !== 'isAdmin');\nfilteredKeys.forEach(key => console.log(user[key]));

When to use Object.keys()? Almost al