This post will discuss how to iterate over the properties of an object in JavaScript.

To iterate through an object in JavaScript means to access each of its properties and values in a loop. There are several ways to do this, which are discussed below in detail:

1. Using for…in statement

The for…in statement loops through the enumerable properties of an object and assigns each property name to a variable. We can then use the variable to access the property value using bracket notation. This function is simple and fast, but it has some limitations. It also iterates over the inherited properties from the prototype chain, which may not be desirable. To avoid this, we can use the hasOwnProperty() function to check if the property belongs to the object itself. The following example demonstrates this usage of the for…in loop using the hasOwnProperty() function to check if the property is attached to the object itself and not its prototypes.

Download  Run Code

Output:

name: Anne
age: 24
sex: Female

2. Using Object.entries() function

The Object.entries() function returns an array of arrays, each containing a property name and value pair of an object. We can then use any array looping function, such as forEach() or for…of, to iterate over the array and access the name and value using index or destructuring syntax. The following code example demonstrates its usage:

Download  Run Code

Output:

name: Anne
age: 24
sex: Female

 
We can also use the ES6 for…of loop to iterate over an object. It differs from for…in loop as for…in iterates over the property names, while for…of iterates over the property values. The following code example demonstrates its usage using the destructuring assignment to unpack values from object properties into distinct variables:

Download  Run Code

Output:

name: Anne
age: 24
sex: Female

 
This is the most comprehensive and versatile approach, but it may be more complex and verbose than the other discussed functions. It also does not include the inherited properties from the prototype chain.

3. Using Object.keys() function

The Object.keys() function returns an array of the own property names of an object. We can then use any array looping function to iterate over the array and access the property values using bracket notation. The following code example demonstrates its usage:

Download  Run Code

Output:

name: Anne
age: 24
sex: Female

 
This function is more flexible and reliable, but it may be slower than the for…in loop. It also does not include the inherited properties from the prototype chain, which may be desirable.

4. Using Object.getOwnPropertyNames() function

The Object.getOwnPropertyNames() function returns an array of all property names of an object, including non-enumerable ones. We can then use any array looping function to iterate over the array and access the property values using bracket notation. The following code example demonstrates its usage:

Download  Run Code

Output:

name: Anne
age: 24
sex: Female

 
This function is more comprehensive than Object.keys(), but it may include some unwanted properties that are not enumerable. It also does not include the inherited properties from the prototype chain.

That’s all about iterating over the properties of an object in JavaScript.