Iterating JavaScript Objects with Arrays & Nested Objects

JavaScript objects often contain arrays and nested objects to represent complex data. Iterating over them allows developers to access and manage this data efficiently using built-in looping methods.

• JavaScript offers multiple ways to iterate objects, such as for...in and Object.entries().
• These methods help handle complex structures in a clean and readable way.

[Approach 1]: 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' }

[Approach 2]: 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' }

[Approach 3]: 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' }

[Approach 4]: 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);
});