Object.keys

By  on  

I adore JavaScript objects.  Love them.  You're probably asking "well, why don't you marry them?"  Trust me:  if I could, I would.  Arrays are nice and all but object keys provide another level of structure and information that is invaluable.  For example, it's much faster search an object for a key than it is to search an array for value presence.

The way we've always iterated on an Object instance was always a for loops with a hasOwnProperty check which was ugly; Object.keys (not Object.prototype.keys) provides an array of Object properties!

var person = {
  firstName: 'David',
  lastName: 'Walsh',
  // ...
};

Object.keys(person).forEach(function(trait) {
  console.log('Person ', trait,': ', person[trait]);
});

If you work with JSON or simply raw JavaScript objects, and you haven't been using Object.keys, now is the time to ditch the old method for this elegant solution!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

Discussion

  1. Franz

    Why don’t you use this:

    for (let trait in person){console.log(trait)}
    • Kay.L

      @Franz,
      for..in iterating over NON own properties.

    • Proqz

      Not very well supported http://caniuse.com/#feat=let

    • Proqz

      Also would iterate over prototype properties.

    • Abis Mal

      The for each...in statement is deprecated as the part of ECMA-357 (E4X) standard. E4X support has been removed, but for each...in will not be disabled and removed because of backward compatibility considerations. Consider using for...of instead. (Please refer to bug 791343.)

  2. Also: Use const, not let. The loop creates a new context in each iteration, the loop variable therefore is constant unless your loop-code changes it.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!