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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Send Email Notifications for Broken Images Using jQuery AJAX

    It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

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!