”;
The for…in Loop
The for…in loop in JavaScript is used to loop through an object”s properties. The JavaScript for…in loop is a variant of the for loop. The for loop can”t be used to traverse through the object properties. So, the for…in loop is introduced to traverse through all object properties.
As we have not discussed Objects yet, you may not feel comfortable with this loop. But once you understand how objects behave in JavaScript, you will find this loop very useful.
The for…in loop in JavaScript can also be used to iterate through the elements of an array. However, it is not recommended to do this as this is less efficient than using a for…of loop.
Syntax
The syntax of for…in loop in JavaScript is as follows −
for (variableName in object) {
statement or block to execute
}
Parameters
-
variableName − It is a property name (key) of the object.
-
in − It is an ”in” operator in JavaScript.
-
object − It is the object to traverse.
In each iteration, one property from object is assigned to variableName and this loop continues till all the properties of the object are exhausted.
Examples
Try the following examples to implement ”for-in” loop.
Example: Iterate through object properties
In the example below, the car object contains various properties. We used the for…in loop to traverse through each key of the object.
In the output, we can see that it prints the key and its value. We use the ”[]” (member of) operator to access the value of the key from the object.
<html>
<head>
<title> JavaScript - for...in loop </title>
</head>
<body>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let car = {
brand: "OD",
model: "Q7",
color: "Black",
}
for (key in car) {
output.innerHTML += key + " -> " + car[key] + "<br>";
}
</script>
</body>
</html>
Output
brand -> OD model -> Q7 color -> Black
Example: Iterating over a string
In JavaScript, the string is an object. So, we can use the for…in loop to traverse through each character of the string. The index of the character is the key, and the character is a value.
The code prints the index and character in the output.
<html>
<head>
<title> JavaScript - for...in loop </title>
</head>
<body>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let str = "Hello";
for (key in str) {
output.innerHTML += key + " -> " + str[key] + "<br>";
}
</script>
</body>
</html>
Output
0 -> H 1 -> e 2 -> l 3 -> l 4 -> o
Exampl: Iterating over an array
In JavaScript, the array is also an object. So, the for…in loop can be used to traverse through array elements. Like a string, the index is a key, and the array element is a value for the key.
The below code prints the array index and its value in the output.
<html>
<head>
<title> JavaScript - for...in loop </title>
</head>
<body>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let array = ["Hi", "Hello", 900, 23, true, "JavaScript"];
for (key in array) {
output.innerHTML += key + " -> " + array[key] + "<br>";
}
</script>
</body>
</html>
Output
0 -> Hi 1 -> Hello 2 -> 900 3 -> 23 4 -> true 5 -> JavaScript
Example: Update value of each property of an object
In the example below, we traverse each key of the object and update its value to null. In the output, the code prints the object keys with null values.
So, the for…in loop can also be used to update all or particular property values of the object.
<html>
<head>
<title> JavaScript - for...in loop </title>
</head>
<body>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let car = {
brand: "OD",
model: "Q7",
color: "Black",
}
for (key in car) {
car[key] = null;
}
output.innerHTML += "The updated object is - " + JSON.stringify(car);
</script>
</body>
</html>
Output
The updated object is - {"brand":null,"model":null,"color":null}
Example: Iterating the Browser”s Navigator Object
Try the following example to implement ”for-in” loop. It prints the web browser’s Navigator object.
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
var aProperty;
output.innerHTML = "Navigator Object Properties<br> ";
for (aProperty in navigator) {
output.innerHTML += aProperty;
output.innerHTML += "<br>";
}
output.innerHTML += "Exiting from the loop!";
</script>
</body>
</html>
Output
Navigator Object Properties vendorSub productSub vendor maxTouchPoints userActivation doNotTrack geolocation connection plugins mimeTypes pdfViewerEnabled webkitTemporaryStorage webkitPersistentStorage hardwareConcurrency cookieEnabled appCodeName appName appVersion platform product userAgent language languages onLine webdriver getBattery getGamepads javaEnabled sendBeacon vibrate scheduling bluetooth clipboard credentials keyboard managed mediaDevices storage serviceWorker wakeLock deviceMemory ink hid locks mediaCapabilities mediaSession permissions presentation serial virtualKeyboard usb xr userAgentData canShare share clearAppBadge setAppBadge getInstalledRelatedApps getUserMedia requestMIDIAccess requestMediaKeySystemAccess webkitGetUserMedia registerProtocolHandler unregisterProtocolHandler Exiting from the loop!
”;