Course
For...in Loop
JavaScript Tutorial
This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.
For...in Loop
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 -> ODmodel -> Q7color -> BlackExample: 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 -> H1 -> e2 -> l3 -> l4 -> oExampl: 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 -> Hi1 -> Hello2 -> 9003 -> 234 -> true5 -> JavaScriptExample: 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 PropertiesvendorSubproductSubvendormaxTouchPointsuserActivationdoNotTrackgeolocationconnectionpluginsmimeTypespdfViewerEnabledwebkitTemporaryStoragewebkitPersistentStoragehardwareConcurrencycookieEnabledappCodeNameappNameappVersionplatformproductuserAgentlanguagelanguagesonLinewebdrivergetBatterygetGamepadsjavaEnabledsendBeaconvibrateschedulingbluetoothclipboardcredentialskeyboardmanagedmediaDevicesstorageserviceWorkerwakeLockdeviceMemoryinkhidlocksmediaCapabilitiesmediaSessionpermissionspresentationserialvirtualKeyboardusbxruserAgentDatacanShareshareclearAppBadgesetAppBadgegetInstalledRelatedAppsgetUserMediarequestMIDIAccessrequestMediaKeySystemAccesswebkitGetUserMediaregisterProtocolHandlerunregisterProtocolHandlerExiting from the loop!