JavaScript Loops
The JavaScript
for inloop is used to loop through the properties of an object.
The for in loop gives you one property name at a time from an object.
You can then use that name to read the matching value.
Example
javascript
let person = {
name: "John",
age: 30,
city: "London"
};
for (let key in person) {
console.log(key);
}In this example, the loop prints the property names.
The output is name, age and city.
The for in loop repeats once for every property in an object.
On each turn, the variable holds the property name as a string.
It is the easiest way to look at everything inside an object without knowing the property names in advance.
Syntax
javascript
for (let key in object) {
// code to run
}The word key is just a variable name. You can call it anything you like.
The loop gives you the property name. To get the value, use square brackets.
Example
javascript
let person = {
name: "John",
age: 30,
city: "London"
};
for (let key in person) {
console.log(key + ": " + person[key]);
}Here, person[key] reads the value for the current property.
Square brackets are used because the property name is stored in a variable.
You can use for in with an array, but the variable holds the index as a string.
Example
javascript
let fruits = ["Apple", "Banana", "Mango"];
for (let index in fruits) {
console.log(index + " = " + fruits[index]);
}Here, the indexes 0, 1 and 2 are printed with their values.
For arrays, the for of loop is usually a better choice.
A string also has an index for every character.
Example
javascript
let name = "John";
for (let index in name) {
console.log(index + " = " + name[index]);
}Here, each character is printed with its index.
The for in loop can be used to count how many properties an object has.
Example
javascript
let car = {
brand: "Toyota",
model: "Corolla",
year: 2021
};
let count = 0;
for (let key in car) {
count++;
}
console.log("Properties: " + count);Here, the loop counts three properties.
You can put one for in loop inside another.
Example
javascript
let students = {
john: { age: 20, city: "London" },
mary: { age: 22, city: "Paris" }
};
for (let name in students) {
console.log(name);
for (let detail in students[name]) {
console.log(detail + ": " + students[name][detail]);
}
}Here, the outer loop reads each student and the inner loop reads their details.
A for in loop also reads properties that an object inherits.
To read only the object's own properties, use hasOwnProperty.
Example
javascript
let person = {
name: "John",
age: 30
};
for (let key in person) {
if (!person.hasOwnProperty(key)) {
continue;
}
console.log(key + ": " + person[key]);
}This is a safe habit when you are looping through objects from other code.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript for in Loop</title>
</head>
<body>
<h1>JavaScript for in Loop</h1>
<p id="result"></p>
<script>
let person = {
name: "John",
age: 30,
city: "London"
};
let result = "";
for (let key in person) {
result += key + ": " + person[key] + "<br>";
}
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try adding a new property to the object:
Add country: "UK" and run it again to see the new line appear.
for in loop repeats once for every property in an object.object[key] to read the value.hasOwnProperty when you want only the object's own properties.The JavaScript for in loop is used to go through the properties of an object.
It is useful when you do not know the property names in advance.
Understanding for in helps you work with objects and write cleaner JavaScript code.