❮ Previous Next ❯

Object Iteration

  • This lesson explains how to loop through object properties in JavaScript.

  • Introduction to Object Iteration

    In JavaScript, objects store data in the form of key–value pairs.

Object Iteration Basics

Stores data in key-value pairs that can be accessed and looped through. 

// Object example

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

  • Often, we need to:

    • Access all keys

    • Access all values

    • Perform operations on each property

    To do this efficiently, JavaScript provides object iteration techniques.

    What is Object Iteration ?

    Object iteration means:

    Repeating through the properties (keys) of an object one by one to access their values.

    Unlike arrays, objects do not support normal loops like for or forEach directly.

    So, special methods are used.

    Why Do We Need Object Iteration ?

    Object iteration is required when:

    • Displaying object data dynamically

    • Validating object values

    • Converting object data

    • Working with API responses

    • Performing calculations on object properties

      Topics Covered in This Lesson

      1. Looping Objects

      2. for...in loop

      3. Object.keys() method

      Looping Objects

      Can We Use Normal Loops on Objects ?

      Not directly.

    Looping Objects Limitation

    Regular loops do not work directly on objects like arrays. 

    // Invalid loop on object

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

for (let i = 0; i < student.length; i++) {
  console.log(student[i]); // undefined
}

    • Reason:

      • Objects do not have index numbers

      • Objects do not have length property

      So, JavaScript provides special ways to loop through objects.

      for...in Loop

      What is for...in Loop ?

      The for...in loop is used to iterate over the enumerable properties (keys) of an object.

      It loops through each key in the object.

      Syntax of for...in

      for (let key in object) {

        // code to execute

      }

      • key represents the property name

      • object[key] is used to access the value

    for...in Loop

    Iterates over object keys one by one using for...in loop. 

    // Loop through object keys

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

for (let key in student) {
  console.log(key);
}
    • Accessing Values Using for...in

    Accessing Object Values with for...in

    Retrieves each value from an object using its corresponding key. 

    // Accessing values using for...in

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

for (let key in student) {
  console.log(student[key]);
}
    • Accessing Both Key and Value

    Key and Value in for...in Loop

    Combines keys and values to display complete object data. 

    // Accessing key and value together

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

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

    • Important Points About for...in

      • Loops through keys, not values

      • Order is not guaranteed

      • Works only on objects

      • Also works on arrays (not recommended)

    Conditional Loop on Object

    Applies conditions while iterating over object properties. 

    // Checking failed subjects

let marks = {
  math: 80,
  science: 45,
  english: 60
};

for (let subject in marks) {
  if (marks[subject] < 50) {
    console.log(subject + " is failed");
  }
}

    • When to Use for...in ?

      • When working with plain objects

      • When keys are important

      • When structure is dynamic

      Object.keys() Method

      What is Object.keys() ?

      Object.keys() returns an array of all keys present in an object.

      Syntax of Object.keys()

      Object.keys(object);

    Object.keys Method

    Returns an array of all keys present in an object. 

    // Using Object.keys()

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

let keys = Object.keys(student);

console.log(keys); // ["name", "age", "course"]

    • Looping Object Using Object.keys()

      Since Object.keys() returns an array, we can use loops.

    Looping Object using Object.keys

    Uses keys array with a for loop to access both key and value. 

    // Looping object with Object.keys

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

let keys = Object.keys(student);

for (let i = 0; i < keys.length; i++) {
  console.log(keys[i] + " : " + student[keys[i]]);
}
    • Using forEach()

    Object Iteration using forEach

    Object Iteration using forEach 

    // Using forEach with Object.keys

let student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

Object.keys(student).forEach(function(key) {
  console.log(key + " : " + student[key]);
});

    • Why Use Object.keys() ?

      • More control over iteration

      • Returns array (easy to manipulate)

      • Can use array methods

      • Predictable behavior

        for...in vs Object.keys()

        Featurefor...inObject.keys()
        IteratesKeysKeys as array
        ReturnsOne key at a timeArray of keys
        OrderNot guaranteedMore predictable
        Use with array methodsNoYes
        Best forSimple object loopsControlled iteration

        Common Mistakes

        • Using dot notation instead of bracket notation

        • Expecting object order to be fixed

        • Using for...in on arrays

        • Forgetting object[key] syntax

        Best Practices for Object Iteration

        • Use for...in for simple object traversal

        • Use Object.keys() when array methods are needed

        • Always use bracket notation inside loops

        • Keep iteration logic simple and readable

      ❮ Previous Next ❯