How to Iterate Through a JavaScript Object?

General Discussions
, ,
1

How can I loop through or enumerate a JavaScript object? I have a JavaScript object like this: var p = { “p1”: “value1”, “p2”: “value2”, “p3”: “value3” };

How do I iterate over this object to access all its elements (p1, p2, p3, etc.) and retrieve their keys and values? I’m looking for guidance on how to effectively iterate over object javascript techniques.

2

Using for...in Loop: The for...in loop is a straightforward way to iterate over an object’s keys. This method is particularly useful when you want to directly access the keys and values of an object.

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) { // Check if the key is a direct property of the object
        console.log(key + ": " + p[key]);
    }
}

This approach is beneficial for cases where you only need to iterate over object JavaScript properties that belong directly to p, ignoring properties inherited through the prototype chain.

3

Using Object.keys(): Another effective way to iterate over object JavaScript keys is by leveraging Object.keys(), which returns an array of the object’s keys. You can then loop over this array with forEach().

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).forEach(function(key) {
    console.log(key + ": " + p[key]);
});

This method can be a bit cleaner, as it focuses only on the object’s own properties without requiring a hasOwnProperty check.

4

Using Object.entries(): Object.entries() provides a more direct way to iterate over object JavaScript by returning an array of [key, value] pairs. You can then iterate over this array with forEach().

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.entries(p).forEach(function([key, value]) {
    console.log(key + ": " + value);
});

This approach is especially useful if you need both the key and value in each iteration. It’s concise and particularly handy for when you want to process or display key-value pairs together.