JavaScript Object Iterables

❮ Prev Next ❯

Iterating over arrays is a common task, but what about iterating over objects?

While objects are not inherently iterable in the same way as arrays, there are several methods available in modern JavaScript to iterate over the properties of an object.

In this chapter we'll explore object iterables in JavaScript, including how to make objects iterable and various techniques for iterating over their properties.

Making Objects Iterable

To make an object iterable, we can implement the Iterable protocol.

This involves defining a special iterator method, Symbol.iterator on the object.

This method should return an iterator object with a next() method that provides the next value in the iteration sequence. 


let myObject = {
  property1:"Value1",
  property2:"Value2",
  [Symbol.iterator](){ 
    const properties = Object.keys(this)
    let index = 0;
    return {
      next:() => { 
        return {
          value:this[properties[index++]],
          done:index > properties.length
        };
      }
    };
  }
};

for(const value of myObject){ 
  console.log(value);
}

Example 


let myObject = {
  property1:"Value1",
  property2:"Value2",
  [Symbol.iterator](){ 
    const properties = Object.keys(this)
    let index = 0;
    return {
      next:() => { 
        return {
          value:this[properties[index++]],
          done:index > properties.length
        };
      }
    };
  }
};

for(const value of myObject){ 
  console.log(value);
}

Using for...in Loop

One of the simplest ways to iterate over the properties of an object is by using a for...inloop.

This loop iterates over all enumerable properties of an object, including properties inherited from its prototype chain. 


let myObject = {
  property1:"Value1",
  property2:"Value2"
}

for(const key in myObject){ 
  console.log(key + ":" + myObject[key]);
};

Example 


let myObject = {
  property1:"Value1",
  property2:"Value2"
}

for(const key in myObject){ 
  console.log(key + ":" + myObject[key]);
};

Using Object.keys()

The Object.keys() method returns an array of a given object's own enumerable property names.

It's often used to iterate over the properties of an object when the order of iteration is important or when only own properties (not inherited ones) are desired. 


let myObject = {
  property1:"Value1",
  property2:"Value2"
};

const keys = Object.keys(myObject)

keys.forEach(key => { 
  console.log(key + ":" + myObject[key]);
})

Example 


let myObject = {
  property1:"Value1",
  property2:"Value2"
};

const keys = Object.keys(myObject)

keys.forEach(key => { 
  console.log(key + ":" + myObject[key]);
})

Using Object.entries()

The Object.entries()method returns an array containing all enumerable property [key, value]pairs of an object.

This method is particularly useful when you need both the property name and its corresponding value during iteration. 


let myObject = {
  property1:"Value1",
  property2:"Value2"
};

const entries = Object.entries(myObject)

entries.forEach(([key, value]) => { 
  console.log(key + ":" + myObject[key]);
})

Example 


let myObject = {
  property1:"Value1",
  property2:"Value2"
};

const entries = Object.entries(myObject)

entries.forEach(([key, value]) => { 
  console.log(key + ":" + myObject[key]);
})

Whether you need to iterate over own properties, inherited properties, or both, JavaScript provides convenient methods like for...inloops, Object.keys()and Object.entries().

Additionally, you can make objects iterable by implementing the Iterable protocol, allowing you to use constructs like for...ofloops for more complex iteration scenarios.

Understanding these methods empowers you to efficiently work with object data in your JavaScript applications.

❮ Prev Next ❯