Iterating Objects — Iterate object keys/entries (Object.keys/entries) (intro)

JavaScript was created in 1995 as a simple scripting language for web browsers, but it quickly grew into something much more powerful. From the very beginning, objects were a core part of the language — they let developers store data as key-value pairs, much like a dictionary maps words to definitions. However, for many years, the only built-in way to loop through an object's properties was the for...in loop, which had some confusing quirks. As JavaScript matured, the language designers introduced cleaner, more predictable methods for iterating over objects.

The central problem is straightforward: arrays in JavaScript are easy to loop through with for loops, .forEach(), or for...of, but objects are not arrays. So how do you systematically visit every property in an object? The answer lies in converting object properties into arrays that you can then iterate with familiar array methods.

Before diving into code, let's clarify the key ideas behind iterating objects. JavaScript objects store data in key-value pairs, where each key (also called a property name) is a string that maps to a corresponding value. The three static methods — Object.keys(), Object.values(), and Object.entries() — each extract a different piece of that key-value relationship and return it as an array.

The following diagram shows how a single JavaScript object is transformed into three different array outputs by each of the static methods. Notice how each method extracts a different slice of the same underlying data.

The key insight from this diagram is that all three methods convert the object into a regular array. Once you have an array, you can use any array iteration method you already know — for...of, .forEach(), .map(), and more. This "convert then iterate" strategy is the foundation of object iteration in modern JavaScript.

Object.keys() — Get Property Names

Object.keys(obj) accepts an object and returns an array of strings. Each string is one of the object's own enumerable property names. The order of keys in the returned array matches the order in which properties were added to the object (with integer-like keys sorted first).

Object.values() — Get Property Values

Object.values(obj) works the same way, but instead of returning the property names it returns the corresponding values. Values can be of any type — strings, numbers, booleans, other objects, or even functions.

Object.entries() — Get Key-Value Pairs

Object.entries(obj) combines both pieces: it returns an array where each element is itself a two-element array — [key, value]. This is especially powerful when combined with destructuring in a for...of loop, which lets you unpack the key and value into separate variables in one line.

Now that you know the three methods, let's look at the most common patterns developers use to loop through objects. The diagram below shows each method paired with the iteration technique that works best with it.

Let's walk through a realistic scenario. Imagine you have an object representing a student's test scores, and you want to calculate their average and print each subject with its score.

You now know three static methods for iterating objects, but JavaScript also has the older for...in loop. Understanding how they compare will help you choose the right tool for each situation.

The methods you learned here are building blocks for more advanced JavaScript patterns. As you progress, you'll encounter situations where these techniques combine with other tools to solve complex problems.

One particularly useful advanced pattern is using Object.entries() combined with .filter() and Object.fromEntries() to create a new object containing only the properties that pass a test. This is essentially "filtering an object," which JavaScript doesn't support natively but becomes easy with these tools.