How to use for...in loop in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
The for…in loop iterates over enumerable properties of objects, providing access to property names for object inspection and manipulation. With over 25 years of experience in software development and as the creator of CoreUI, I’ve used for…in loops extensively for configuration processing, object validation, and dynamic property access. From my expertise, the most reliable approach is using for…in specifically for object property iteration while being aware of prototype chain inheritance. This loop type is essential for working with dynamic objects and configuration data where property names aren’t known in advance.
Use the for…in loop to iterate over enumerable object properties and access property names.
const user = {
name: 'John',
age: 30,
email: '[email protected]'
}
for (const key in user) {
if (user.hasOwnProperty(key)) {
console.log(`${key}: ${user[key]}`)
}
}
Here for (const key in user) iterates over all enumerable properties of the object, providing the property name as key. The hasOwnProperty() check ensures you only process properties that belong to the object itself, not inherited from the prototype chain. Access the property value using bracket notation user[key] since the key is a variable. This pattern is perfect for processing configuration objects and dynamic data structures.
Best Practice Note:
This is the same approach we use in CoreUI components for processing theme configurations, component options, and dynamic styling properties. Always use hasOwnProperty() or Object.keys() when iterating objects to avoid inherited properties, and prefer Object.entries() for modern JavaScript applications.
