JavaScript for-in Loop

For-in loop in JavaScript is used to iterate over the properties of an object. It can be a great debugging tool if we want to show the contents of an object. The for-in loop iterates only over those keys of an object which have their enumerable property set to “true”. The key values in an object have four attributes (value, writable, enumerable, and configurable). Enumerable when set to “true” means that we can iterate over that property. You can read about the four key attributes in the property attributes section of Objects in JavaScript. Read more on enumerable Enumerable Properties in JavaScript.

Syntax:

for (let i in obj1) {
    // Prints all the keys in
    // obj1 on the console
    console.log(i);
    }

Important Points:

• Use the for-in loop to iterate over non-array objects. Even though we can use a for-in loop for an array, it is generally not recommended. Instead, use a for loop for looping over an array.
• The properties iterated with the for-in loop also include the properties of the objects higher in the Prototype chain.
• The order in which properties are iterated may not match the properties that are defined in the object.

Example: A simple example to illustrate the for-in loop.

Javascript

<p id="val"></p>
<script>
    //declaring a object employee
    const courses = {firstCourse:'JavaScript',
                     secondCourse:'React',
                     thirdCourse:'Angular'};
    let value = '';

    //using for in loop
    for (let item in courses) {
        value += courses[item] + '<br>';
    }
    document.getElementById("val").innerHTML = value;
</script>

Output:

JavaScript
React
Angular

Here in the above example what happened is:

• JavaScript for-in loop iterates on the courses object.
• The for every iteration, a key is returned (item)
• The item can now be used to access the value of the object
• The value of the key is given by courses[item]

Example: For-in loop iterates over the properties of an object and its prototype chain’s properties. If we want to display both properties of the “student1” object which belongs to that object only and the prototype chain, then we can perform it by for in loop.

javascript

<script>
    const courses = {

        // Declaring a courses object
        firstCourse: "C++ STL",
        secondCourse: "DSA Self Paced",
        thirdCourse: "CS Core Subjects"
    };

    // Creating a new empty object with
    // prototype set to courses object
    const student1 = Object.create(courses);

    // Defining student1 properties and methods
    student1.id = 123;
    student1.firstName = "Prakhar";
    student1.showEnrolledCourses = function(){
        console.log(courses);
    }

    // Iterating over all properties of
    // student1 object
    for (let prop in student1) {
        console.log(prop + " -> "
            + student1[prop]);
    }
</script>

Output:

"id -> 123"
"firstName -> Prakhar"
"showEnrolledCourses -> function(){
      window.runnerWindow.proxyConsole.log(courses);
    }"
"firstCourse -> C++ STL"
"secondCourse -> DSA Self Paced"
"thirdCourse -> CS Core Subjects"

Example: For-in loop iterates over the properties of an object and its prototype chain’s properties. If we want to display only properties of the “student1” object which belongs to that object only and not on the prototype chain, then we can perform an “if” check with the hasOwnProperty() method.

javascript

<script>
    const courses = {

            // Declaring a courses object
            firstCourse: "C++ STL",
            secondCourse: "DSA Self Paced",
            thirdCourse: "CS Core Subjects"
        };

        // Creating a new empty object with
        // prototype set to courses object
        const student1 = Object.create(courses);

        // Defining student1 properties and methods
        student1.id = 123;
        student1.firstName = "Prakhar";
        student1.showEnrolledCourses = function () {
            console.log(courses);
        }
        // Iterating over only those properties
        // of student 1 object which is not on
        // its prototype chain
        for (let prop in student1) {
            if (student1.hasOwnProperty(prop)) {
                console.log(prop + " -> "
                        + student1[prop]);
            }
        }
</script>

Output:

id -> 123
firstName -> Prakhar
showEnrolledCourses -> function () {
        console.log(courses);
}

For-in loop with hasOwnProperty() check iterates over properties of the object.