Looping Over Key-Value Pairs in JavaScript

by

JavaScript objects are a fundamental part of the language and are used to store collections of data and more complex entities. Often, you’ll need to iterate over an object to utilize its properties. Below, we explore different ways to achieve this.

Method 1: Using for...in Loop

The for...in statement loops through the properties of an object. Here’s how you can use it to access both keys and values:

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(`Key: ${key}, Value: ${object[key]}`);
  }
}

Note: The hasOwnProperty check is important to ensure that the property belongs to the object itself and not inherited from the prototype chain.

Method 2: Using Object.keys()

Object.keys() returns an array of a given object’s own enumerable property names. You can combine this with a forEach loop:

const object = { a: 5, b: 10, c: 15 };

Object.keys(object).forEach(key => {
  console.log(`Key: ${key}, Value: ${object[key]}`);
});

Method 3: Using Object.entries()

Object.entries() method returns an array of a given object’s own enumerable string-keyed property [key, value] pairs. This can be looped over with forEach:

const object = { x: 10, y: 20, z: 30 };

Object.entries(object).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

Method 4: Using for...of with Object.entries()

Combining for...of with Object.entries() provides a clean syntax for looping over objects:

const object = { red: "apple", yellow: "banana", green: "pear" };

for (const [key, value] of Object.entries(object)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Conclusion

These methods provide robust options for iterating over objects in JavaScript. Choosing the right approach depends on your specific requirements, such as whether you need to access both the key and the value, or just the keys.

For those looking to dive deeper, you might want to read a related article that further explores object manipulation in JavaScript: Understanding JavaScript Objects. This link provides more insights and advanced techniques to work effectively with objects.