for..in or for..of Object keys

javascript object for-loop for-in-loop for-of-loop
Spedwards picture Spedwards · Apr 17, 2017 · Viewed 12.9k times · Source

So my IDE doesn't like when I use a for..in loop to iterate over an object keys. I get a warning:

Possible iteration over unexpected (custom / inherited) members, probably missing hasOwnProperty check

So I get what it's saying, so in that case would it be better to use something like for (const key of Object.keys(obj)) instead of for (const key in obj)?

Are there any real differences between the two, performance-wise?

Answer

Christos picture Christos · Apr 17, 2017

There is a slight difference between looping though the Object.keys array and looping using a for...in statement, which in the majority of cases would not be noted. Object.keys(obj) returns only an array with the own properties of the object, while the for...in returns also the keys found in the prototype chain, in order the latter to be done extra check to the prototype of the obj is needed and then to the prototype of the prototype and so on and so forth, until the whole prototype chain has been visited. This certainly makes the second approach less efficient than the first, but as I have already mentioned, this difference would be hardly noticed in the majority of cases.

For a more formal approach, as it is stated in the MDN:

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

Related questions

Uncaught TypeError: items is not iterable

My understanding is that for...in loops are designed to iterate over objects in Javascript. See this post and this post. Take the following example. This returns 'Uncaught TypeError: items is not iterable' in my console. If I wrap the …

Read More
Check if object value exists within a Javascript array of objects and if not add a new object to array

If I have the following array of objects: [ { id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 2, username: 'ted' } ] Is there a way to loop through the array to check whether a particular username value already exists and if it does do …

Read More
Can I loop through a javascript object in reverse order?

So I have a JavaScript object like this: foo = { "one": "some", "two": "thing", "three": "else" }; I can loop this like: for (var i in foo) { if (foo.hasOwnProperty(i)) { // do something } } Which will loop through the properties in the order …

Read More