Getting a list of associative array keys

The JavaScript Object: A Puzzle Wrapped in an Enigma

In JavaScript, objects are often an analogue to the associate arrays found in other languages. However, it's crucial to remember they're not quite the same. Keys in JavaScript objects don't sit in an index-based order like arrays.

Filtering Prototype Properties

When traversing object keys with a for...in loop, it's possible to encounter properties from the prototype chain. To filter these out, use the hasOwnProperty method.

const objectWithProto = Object.create({ stuffFromDad: 'inherited' });
objectWithProto.myStuff = 'own';

for (const key in objectWithProto) {
  if (objectWithProto.hasOwnProperty(key)) {
    console.log(key); // Only gives us "myStuff". Sorry, dad! 
  }
}


With Object.keys(), prototype properties are automatically excluded - no need to disinherit anything!

Ordered Keys? Maybe, Maybe not.

The order of keys in a JavaScript object isn't guaranteed when using a for...in loop. However, Object.keys() does return keys in the same order as a manual object property traversal - in line with ECMAScript 2015 or ES6.

Can I use Object.keys() Everywhere?

Although Object.keys() enjoys wide support, do confirm its compatibility with your target browser. For instance, if your users are still stuck surfing on Internet Explorer 8, Object.keys() won't work for them. Don't worry; help is at hand (read on!).

Taking It to the Next Level: Advanced Usage

In certain environments or situations, the regular Object.keys() method may fall short. If you're dealing with legacy code, cross-frame solutions, or simply need to squeeze out more juice, here are some tips.

What if They Don't Speak Object.keys()

As the saying doesn't really go, "Make your own keys if life doesn't give you Object.keys()!". If you're working in an older browser that didn't bother packing Object.keys(), create a polyfill:

if (!Object.keys) {
   // 'Polyfill' sounds tasty, right? But it's less filling, more fixing. 
  // Fixes lack of Object.keys in older environments.
  Object.keys = ... 
  // Polyfill implementation details here. Seriously, it's long.
  // Check the full answer for the code, don't be lazy!
}


Check the previous version of this answer for the complete polyfill code.

Check Library Influence

When working with libraries like jQuery or Prototype.js, these libraries might tweak objects with additional methods or properties. Always keep the library documentation handy to understand these effects.

For instance, in jQuery, $.each() comes to the rescue:

$.each(myObj, function(key, value) {
    // Got 'em both! 
    // One 'each' to rule them all.
});


Rule the Objects: Best Practices

Sticking to accurate terminology promotes better understanding and clear communication. By referring to objects with keys instead of 'associative array', you and your team will have a clearer picture of what you're dealing with.

Beware of the Prototype

Be cautious when using for...in with libraries such as Prototype.js that modify the prototype. Use hasOwnProperty() to prevent iterating over prototype properties.

Harness the Right Tools

Leverage the power of Object.keys(obj) for a clean and straightforward way to list your object's keys. It focuses on the object's own properties, perfect for modern, ES5+ compliant environments.

For the Bold: Map

JavaScript provides a Map object that closely resembles associative arrays and maintains insertion order. Consider using Map when order matters and when you need key-value pair interaction.