How to Iterate Over JavaScript Object's Properties and Values?

const arr = [ 'hello', 'am', 'JavaScript' ];
for (let x in arr) {
    console.log(arr[x]);
}
const User = {
    name: 'ishika',
    class: 'MCA',
    age: 24
}
for ( let val in User ) {
    console.log(`${val} = ${User[val]}`);
}

const member = {
    name: 'ishika',
    class: 'MCA',
    age: 24
}
console.log(Object.keys(member))

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

Using Object.entries()

A useful method called Object.entries() returns an array of key-value pairs for every enumerable property of an object. We can access both the property and its related value during iteration by using distinct variables or array destructuring. When you need to work with both keys and values at once, this method is quite helpful.

const member = {
    name: 'ishika',
    class: 'MCA',
    age: 24
}
console.log(Object.entries(member)); 
Object.entries(member).forEach(([key, val]) => {
  console.log(`Key: ${key}= Value: ${val}`);
});

Output

Conclusion

In web development, iterating JavaScript objects' properties and values is a common practice. Object.keys(), Object. entries(), and the for...in loop all provide flexible solutions to this problem. The method you use will rely on the particular needs of your project. for...in and Object. keys() are practical choices if you only require property names or want to be sure you are accessing the object's own properties.

FAQs

Q. What is the purpose of iterating over JavaScript object properties and values?

Ans. Iterating over object properties and values allows you to access and work with the data contained within the object. It is useful for performing operations such as data manipulation, filtering, searching, or displaying information.

Q. How can I iterate over an object's properties and values using a for...in loop?

Ans. You can use a for...in loop to iterate over an object's properties. Within the loop, you can access each property's name and retrieve its corresponding value from the object.

Q. What does the hasOwnProperty() check to do in a for...in loop?

Ans. The hasOwnProperty() method checks if the property belongs directly to the object and not to its prototype. It helps ensure that only the object's own properties are iterated over, excluding inherited properties.

Q. Is it necessary to use the hasOwnProperty() check when iterating over object properties?

Ans. While the hasOwnProperty() check is recommended to exclude inherited properties, it is not mandatory. You can omit it if you are certain that you only want to iterate over the object's own properties.

Q. Can I use Object.keys() to iterate over an object's properties and values?

Ans. Yes, you can use Object. keys() to obtain an array of an object's own enumerable property names. You can then iterate over this array using forEach(), map(), or other array iteration methods to access the corresponding values.