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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • By
    Create Classy Inputs Using MooTools’ OverText

    The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort.

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

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!