Home / Questions / An example of using the for...of loop to iterate over Object:
Explanatory Question

An example of using the for...of loop to iterate over Object:

👁 114 Views
📘 Detailed Answer
🕒 Easy to Read
Read the answer carefully and go through the related questions on the right side to improve your understanding of this topic.

Answer with Explanation

The for...of loop in JavaScript is primarily designed for iterating over iterable objects like arrays or strings. It doesn't work directly with regular objects (objects created with {} syntax). However, you can use the Object.entries() method to get an array of key-value pairs from an object and then use for...of on that array. Here's an example:


let myObject = {
    name: 'Rumman',
    age: 25,
    isStudent: true
};

// Using Object.entries to get an array of key-value pairs
let entriesArray = Object.entries(myObject);

// Iterating over the array using for...of
for (let [key, value] of entriesArray) {
    console.log(`${key}: ${value}`);
}

In this example, Object.entries(myObject) returns an array of arrays, where each inner array contains a key-value pair. The for...of loop is then used to iterate over these key-value pairs.

Keep in mind that the order of iteration is based on the order in which the properties were added to the object. However, note that the order of object properties is not guaranteed to be consistent across JavaScript engines, so relying on order may not be ideal in all cases.

If the order is important and you are working with environments that support ECMAScript 2015 (ES6) and later, you might want to consider using Map instead of a regular object, as Map maintains the order of key-value pairs.

Another way

Another way to iterate over the properties of an object is by using a for...in loop. The for...in loop iterates over all enumerable properties of an object, including properties in the prototype chain. Here's an example:


let myObject = {
    name: 'Rumman',
    age: 25,
    isStudent: true
};

// Iterating over object properties using for...in
for (let key in myObject) {
    if (myObject.hasOwnProperty(key)) {
        // Checking if the property belongs to the object itself, not its prototype chain
        console.log(`${key}: ${myObject[key]}`);
    }
}

In this example, the for...in loop iterates over all properties of myObject, and the hasOwnProperty method is used to check if the property belongs to the object itself (and not to its prototype chain).

However, it's important to note that for...in has some caveats:

  1. It iterates over all enumerable properties, including those in the prototype chain.
  2. The order of iteration is not guaranteed to be in the order in which properties were added.
  3. It may iterate over properties that are not explicitly set on the object.

For iterating over the own properties of an object in a specific order, using Object.entries() as shown in the previous response is a more modern and reliable approach. If order is not important and you want to include inherited properties, for...in may be suitable.