Iterate through object properties

Using modern JavaScript features for object property iteration

The simple for...in loop described earlier gets the job done, but modern JavaScript provides us with more elegant, fool-proof methods that are worth exploring!

Use Object.keys to harvest property names

Object.keys(obj).forEach(key => {
    console.log(`Using Object.keys to find "${key}". Let's see what it hides: ${obj[key]}`);
});


Use Object.entries to harvest key-value pairs

Object.entries(obj).forEach(([key, value]) => {
    console.log(`Hey ${key}, what's up? Oh, it's ${value}!`);
});


Using destructuring for graceful and concise iteration

Sometimes, you just have to show off a bit. That's where destructuring shines!

for (const [key, value] of Object.entries(obj)) {
  console.log(`Property "${key}" has a secret: ${value}. But don't tell anyone 😉`);
}


Always verify property ownership while iterating

When dealing with complex objects, we might encounter properties that we'd rather not iterate over, such as those inherited through the prototype chain.

for (const key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    console.log(`Confirmed "${key}" is ours! Now, what secret does it hold: ${obj[key]}?`);
  }
}


Iterate over just the values

There will be times when we're only interested in the values. Object.values is just the tool for such situations.

Object.values(obj).forEach(value => {
    console.log(`Shhhh... The value is: ${value}`);
});


Embrace modern JavaScript with Object.entries

The Object.entries function provides an easy to understand interface for naviagting key-value pairs. With destructuring, it's a trip down EasyToUnderstand Lane.

for (const [key, value] of Object.entries(obj)) {
  console.log(`If "${key}" is the question, then ${value} is the answer!✌️`);
}
