How to Iterate JavaScript Object Containing Array and Nested Objects ?

JavaScript provides us with several built-in methods through which one can iterate over the array and nested objects using the for...in loop, Object.keys(), Object.entries(), and Object.values(). Each method serves a distinct purpose in iterating over object properties, keys, and values which are explained as follows:

Using For...in the loop

The for...in loop iterates over the enumerable properties of an object, including those inherited from its prototype chain. It's commonly used for iterating over object properties and performing operations based on each property's value or key.

Example: Iterating through a JavaScript object with arrays and nested objects using built-in methods.

let course = {
  title: "Java",
  price: 30000,
  Instructors: ["Kamal Sir", "Anuv Sir"],
  Materials: {
    book1: "Effective Java",
    book2: "Head First Java",
  },
};

for (let key in course) {
  if (course.hasOwnProperty(key)) {
    console.log(key, course[key]);
  }
}

title Java
price 30000
Instructors [ 'Kamal Sir', 'Anuv Sir' ]
Materials { book1: 'Effective Java', book2: 'Head First Java' }

Using Object.keys() method

The Object.keys() method returns an array of a given object's enumerable property names. This method provides a way to access the keys of an object, which can be useful for iterating over its properties or performing operations based on its keys. It returns an array containing the strings that represent the names of the object's enumerable properties.

Example: Logging Key-Value Pairs of a JavaScript Object 'course' and its Nested Objects Using Object.keys() and forEach() Loop.

let course = {
  title: "Java",
  price: 30000,
  Instructors: ["Kamal Sir", "Anuv Sir"],
  Materials: {
    book1: "Effective Java",
    book2: "Head First Java",
  },
};

Object.keys(course).forEach((key) => {
  console.log(key, course[key]);
});

title Java
price 30000
Instructors [ 'Kamal Sir', 'Anuv Sir' ]
Materials { book1: 'Effective Java', book2: 'Head First Java' }

Using Object.entries() method

The Object.entries() method returns an array of a given object's enumerable string-keyed property [key, value] pairs. This method is useful for tasks such as logging key-value pairs, transforming object data, or performing operations on object properties.

It takes an object as input and returns an array of key-value pairs, where each pair is represented as a two-element array [key, value].

Example: Logging of Key-Value Pairs in a JavaScript Object 'course' and its Nested Objects Using Object.entries() and forEach() Loop.

let course = {
  title: "Java",
  price: 30000,
  Instructors: ["Kamal Sir", "Anuv Sir"],
  Materials: {
    book1: "Effective Java",
    book2: "Head First Java",
  },
};

Object.entries(course).forEach(([key, value]) => {
  console.log(key, value);
});

title Java
price 30000
Instructors [ 'Kamal Sir', 'Anuv Sir' ]
Materials { book1: 'Effective Java', book2: 'Head First Java' }

Using Object.values() method

The Object.values() method returns an array of the property values of an object. This method provides a simple way to access and work with an object's values without needing to iterate over its keys. It only includes properties that are directly defined on the object itself, not those inherited from its prototype chain.

Example: Displaying Values of a JavaScript Object 'course' and its Nested Objects Using Object.values() and forEach() Loop.

let course = {
  title: "Java",
  price: 30000,
  Instructors: ["Kamal Sir", "Anuv Sir"],
  Materials: {
    book1: "Effective Java",
    book2: "Head First Java",
  },
};

Object.values(course).forEach((value) => {
  console.log(value);
});

Java
30000
[ 'Kamal Sir', 'Anuv Sir' ]
{ book1: 'Effective Java', book2: 'Head First Java' }