Surprising behavior of for…in loops

Learn how to prevent bugs in your code when using for…in loops for looping through objects.

Photo by Etienne Boulanger on Unsplash

In this article, we will see how to use for...in loops to avoid unpredictable bugs.

Take a look at the below code:

const user = { name: 'David', age: 30 };
for (key in user) {
 console.log(user[key]);
}

Can you predict the output of the above code?

The output will be:
David
30

which is as expected.

Now take a look at the below code:

const user = { name: 'David', age: 30 };
Object.prototype.color = 'red';
Object.prototype.display = function() {};
for (key in user) {
 console.log(user[key]);
}

What will be the output now?

So it prints the color property and display function also, which is obviously not what we expected.

So if somewhere in your code, you or someone has added some properties or methods to the Object prototype, they will be displayed when using a for...in loop.

So the for...in loop will display its own properties and also its prototype properties. We can fix this using hasOwnProperty method.

Object.prototype.hasOwnProperty:

It has the following syntax:

obj.hasOwnProperty(prop)

The method returns true if the prop provided is the obj’s own declared property.

const user = { name: 'David', age: 30 };
Object.prototype.color = 'red';
Object.prototype.display = function() {};
for (key in user) {
 if (user.hasOwnProperty(key)) {
  console.log(user[key]);
 }
}

Now, the output will come as expected

There is another way to fix this issue using Object.keys method and using for...of loop

Object.keys:

It has the following syntax:

Object.keys(obj)

This method returns an array of a given object’s own enumerable property names.

const user = { name: 'David', age: 30 };
Object.prototype.color = 'red';
Object.prototype.display = function() {};
for (key of Object.keys(user)) {
 console.log(user[key]);
}

So you might need to take note of these things when using the for...in loop.

That’s it for today. Hope you learned something new today.

Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.