JavaScript Objects — Can you use forEach?

Why This Question Matters

If you've been writing JavaScript for a while, you've probably reached for .forEach() a hundred times. It's the go-to for iterating over arrays. But then you encounter a plain old JavaScript object {} and try to do the same thing, only to get the dreaded TypeError: ...forEach is not a function.

This is a classic stumbling block. The confusion usually stems from the fact that in JS, almost everything looks like an object, but not every object behaves like an array. Understanding the difference between Iterables and Objects is a rite of passage for any dev moving from "just making it work" to actually understanding the language.

Understanding the Code

The question is simple: TRUE or FALSE: You cannot loop over an object with forEach.

To understand why the answer is TRUE, we have to look at where .forEach() actually lives. In JavaScript, .forEach() is a method defined on Array.prototype.

When you create an array:

const users = ['Alice', 'Bob', 'Charlie'];

users.forEach(user => console.log(user)); 

Now, look at a standard object:

const userProfile = {

  name: 'Alice',

  age: 30,

  role: 'Developer'

};

userProfile.forEach(key => console.log(key)); // ❌ Boom. TypeError.

Finding the Correct Answer

The correct answer is TRUE. You cannot call .forEach() directly on a JavaScript object.

If you want to iterate over an object, you have to transform that object into something that *can* be iterated—usually an array. Here are the three most common ways to actually get the job done:

1. Object.keys()
This gives you an array of the object's keys. Since the result is an array, you can now use .forEach().

Object.keys(userProfile).forEach(key => {

  console.log(${key}: ${userProfile[key]});

});

2. Object.values()
Same deal, but you get the values directly. Great when you don't care about the keys.

Object.values(userProfile).forEach(value => {

  console.log(value);

});

3. Object.entries()
This is my personal favorite. It returns an array of arrays (pairs), allowing you to destructure the key and value immediately.

Object.entries(userProfile).forEach(([key, value]) => {

  console.log(${key} is ${value});

});

Common Mistakes Developers Make

The biggest mistake is assuming that because an object is a "collection" of data, it should behave like an array.

Another common trip-up is the for...in loop. You'll see a lot of old tutorials suggesting for...in to iterate over objects. While it works, it has a nasty habit of iterating over properties inherited through the prototype chain. If some library you're using modified Object.prototype, a for...in loop might pick up properties you never intended to touch.

If you use for...in, you usually have to wrap your logic in a .hasOwnProperty() check:

for (let key in userProfile) {

  if (userProfile.hasOwnProperty(key)) {

    // Now it's safe

  }

}

Real-World Usage

In a production environment, you'll run into this constantly when handling API responses. Most JSON responses are nested objects.

Imagine you're building a dashboard that displays a set of system metrics. The API might send you something like this:

{

  "cpu_usage": "12%",

  "memory_usage": "45%",

  "disk_io": "2mb/s"

}

Another common use case is when you're implementing a "Configuration" object where keys represent feature flags and values represent their status. Converting that object to an array allows you to filter out disabled features before rendering them to the screen.

Key Takeaways

- .forEach() is an Array method, not a universal iteration method.
- Plain objects don't have a .forEach() method because they don't inherit from Array.prototype.
- To loop over an object, use Object.keys(), Object.values(), or Object.entries() to get an array first.
- Avoid for...in unless you're specifically intending to walk up the prototype chain and know how to handle it.
- When in doubt, convert your object to an array. It gives you access to the full power of .map(), .filter(), and .reduce().