Open In App
Related Articles

JavaScript for in Loop

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

JavaScript for in loop is used to iterate over the properties of an object. JavaScript 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).

It can be a great debugging tool if we want to show the contents of an object.

Note: 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

//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] + " ";
}
console.log(value);

                    

Output
JavaScript React Angular 

Here in the above example what happened is:

  • JavaScript for in loop iterates on the object of the course.
  • 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

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]);
}

                    

Output
id -> 123
firstName -> Prakhar
showEnrolledCourses -> function () {
    console.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

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]);
    }
}

                    

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

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

Supported Browsers:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 31 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials