Is there a built-in way to loop through the properties of an object?

Beyond the basics: Enhancing object iteration

Let's move beyond mere loops and extend our paths in the vast universe of JavaScript object iteration.

Handling object properties with ES6 methods

Object.keys(), Object.values(), and Object.entries(): The three Musketeers of JavaScript keys, values, and both together:

let keys = Object.keys(obj); // ['a', 'b', 'c']
let values = Object.values(obj); // [1, 2, 3]
let entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]


These methods are your friends in the realm of array iterators. They pave the way for .forEach(), .map(), .filter(), and more to bring forth powerful ways to remodel object data.

ES6: For better for-loop

The for...of loop coupled with Object.entries() is your dynamic duo to iterate over keys and values with ease:

for (const [key, value] of Object.entries(obj)) {
  // Cause let's face it, everyone loves a pair
  console.log(`${key}: ${value}`);
}


Framework-specific enchants

In a Handlebars.js world, objects can be accessed using the tools {{#each}}, {{@key}}, and {{this}}:

{{#each myObject}}
  Key: {{@key}}, Value: {{this}}
{{/each}}


The Joneses of Handlebars.js can even use their own custom helpers for complex situations. They perform feats such as looping through and showing property-value pairs:

Handlebars.registerHelper('eachProperty', function(context, options) {
  let ret = "";
  for (let prop in context) {
    if (context.hasOwnProperty(prop)) {
      ret = ret + options.fn({property: prop, value: context[prop]});
    }
  }
  return ret;
});


Not to be left behind, Ember.js features Ember.Handlebars.registerHelper to create similar helpers, combining it with Ember.get for safe object property access.

Beware the prototype

Be heedful of the hasOwnProperty method when iterating. It acts as a gatekeeper for properties that arrived from the object's prototype. Use it wisely to filter the intrinsic properties:

for (const key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) { 
    // Keeping it real, filtering out the 'pretenders'
    console.log(`${key}: ${obj[key]}`);
  }
}


This way, you even guard against that one strange property named "hasOwnProperty.” You heard it here first!

Taking into account enumerable properties

Remember! Not all properties like to socialize. Some are non-enumerable. Fear not, Object.keys() will only return enumerable properties for you. But if you're into social inclusivity, Object.getOwnPropertyNames() will include even the introverts.