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
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    jQuery Link Nudge Plugin

    A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at producing the same type of effect.

  • By
    NSFW Blocker Using MooTools and CSS

    One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away. Since...

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!