How do I enumerate the properties of a JavaScript object? [duplicate]

  1. Home
  2. javascript
  3. How do I enumerate the properties of a JavaScript object? [duplicate]

This question already has an answer here:

How do I enumerate the properties of a JavaScript object?

I actually want to list all the defined variables and their values, but I’ve learned that defining a variable actually creates a property of the window object.

First answer

Simple enough:

for(var propertyName in myObject) {
   // propertyName is what you want
   // you can get the value like this: myObject[propertyName]
}

Now, you will not get private variables this way because they are not available.


EDIT: @bitwiseplatypus is correct that unless you use the hasOwnProperty() method, you will get properties that are inherited – however, I don’t know why anyone familiar with object-oriented programming would expect anything less! Typically, someone that brings this up has been subjected to Douglas Crockford’s warnings about this, which still confuse me a bit. Again, inheritance is a normal part of OO languages and is therefore part of JavaScript, notwithstanding it being prototypical.

Now, that said, hasOwnProperty() is useful for filtering, but we don’t need to sound a warning as if there is something dangerous in getting inherited properties.

EDIT 2: @bitwiseplatypus brings up the situation that would occur should someone add properties/methods to your objects at a point in time later than when you originally wrote your objects (via its prototype) – while it is true that this might cause unexpected behavior, I personally don’t see that as my problem entirely. Just a matter of opinion. Besides, what if I design things in such a way that I use prototypes during the construction of my objects and yet have code that iterates over the properties of the object and I want all inherited properties? I wouldn’t use hasOwnProperty(). Then, let’s say, someone adds new properties later. Is that my fault if things behave badly at that point? I don’t think so. I think this is why jQuery, as an example, has specified ways of extending how it works (via jQuery.extend and jQuery.fn.extend).

Second answer

The standard way, which has already been proposed several times is:

for (var name in myObject) {
  alert(name);
}

However Internet Explorer 6, 7 and 8 have a bug in the JavaScript interpreter, which has the effect that some keys are not enumerated. If you run this code:

var obj = { toString: 12};
for (var name in obj) {
  alert(name);
}

If will alert “12” in all browsers except IE. IE will simply ignore this key. The affected key values are:

  • isPrototypeOf
  • hasOwnProperty
  • toLocaleString
  • toString
  • valueOf

To be really safe in IE you have to use something like:

for (var key in myObject) {
  alert(key);
}

var shadowedKeys = [
  "isPrototypeOf",
  "hasOwnProperty",
  "toLocaleString",
  "toString",
  "valueOf"
];
for (var i=0, a=shadowedKeys, l=a.length; i<l; i++) {
  if map.hasOwnProperty(a[i])) {
    alert(a[i]);
  }
}

The good news is that EcmaScript 5 defines the Object.keys(myObject) function, which returns the keys of an object as array and some browsers (e.g. Safari 4) already implement it.

Third answer

In modern browsers (ECMAScript 5) to get all enumerable properties you can do:

Object.keys(obj)
(Check the link to get a snippet for backward compatibility on older browsers)

Or to get also non-enumerable properties:

Object.getOwnPropertyNames(obj)

Check ECMAScript 5 compatibility table

Additional info:
What is a enumerable attribute?

Reprint:https://stackoverflow.com/questions/85992/how-do-i-enumerate-the-properties-of-a-javascript-object
Spread the love

Related articles

Comments are closed.