JavaScript for...in Loop

The JavaScript for-in loop is used to cycle through an object's properties. If we want to display the contents of an object during debugging, it can be a fantastic tool.

The for-in loop only iterates across keys that have their enumerable property set to "true" for an object. An object's primary values consist of four characteristics such as avalue, enumerable,writable, and configurable.

When "true" is set for Enumerable, we can enumerate over that property. The property elements subsection of Objects in JavaScript contains this information on the four important attributes.

Syntax

The following syntax is used to operate the loop with an object in JavaScript.

for(Let num be in objects1) {
// Displays each key in object value
console.log(num);
}

Important Information

To iterate through non-array items, use the for-in loop. Although a for-in loop can be used with an array, it is typically not advised. Instead of iterating through an array, use a for a loop.
The characteristics of the objects farther down the Prototype chain are likewise iterated with the for-in loop.
It's possible that the order in which the attributes are iterated will differ from how they are specified in the object.

Examples

The given examples show the JavaScript "for…in" loop for the multiple types of data.

Example 1: The given an example shows basic for…in a loop with values. We can see the console output using the console.log() function to display output.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var tutorial = [81, 31, 15, 41, 52, 75, 69, 67];
let i = 1;
for(var tut in tutorial) {	
   console.log("values[" +i+ "]: " +tutorial[tut]);
    i++;
}
</script>
</body>
</html>

Output

The given image shows data or object value as an output.

Example 2: The given an example shows basic for…in a loop with values. We can see the string value as an output array data using the console.log() function.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p>
<b id="displayval"> </b> 
</p>
<script>
var tutorial = 'Javatpoint';
let result = '';
for(var tut in tutorial) {	
   result += tut + ' : ' + tutorial[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

Output

The given image shows data or object value as an output.

Example 3: The given example shows basic for…in loop with values. We can see the console output using the console.log() function to display output.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p>
<b id="displayval"> </b> 
</p>
<script>
var tutorial = [23, 'JavaScript', 12.43, 'javatpoint.com', -12];
let result = '';
for(var tut in tutorial) {	
   result += tut + ' : ' + tutorial[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

Output

The given image shows data or object value as an output.

Example 4: The given an example shows basic for…in loop with values. We can see the console output using the console.log() function to display output. We can display the key and value on the console log.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var tutorial = {
    website:  'Javatpoint',
    language:  'JavaScript',
    learn: 'online',
    user: 'Student'
};
for(var tut in tutorial) {
    console.log(tut + ':' + tutorial[tut]);
}
</script>
</body>
</html>

Output

The console shows data or object value as an output.

Example 5: The given an example shows basic for…in loop with values. We can see the innerHtml method to display the output value and key. The "tut" is the key of the object data and "tutorial[tut]" shows the value of the object.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p id="displayval"></p>
<script>
var tutorial = {
    website: 'javatpoint.com',
    language: 'JavaScript programming language',
    learn: 'online mode',
    user: 'Student and developer'
};
let result = '';
for(var tut in tutorial) {
    result += tut + ':' + tutorial[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

Output

The given image shows data or object value as an output.

Example 6: The "for...in" statement moves up the prototype chain and iterates through inherited properties when looping over an object's properties that are descended from another object.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript "for...in" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<p id="displayval"></p>
<script>
var tutorial = {
    website: 'javatpoint.com',
    language: 'JavaScript programming language',
    learn: 'online mode',
    user: 'Student'
};
let result = '';
var learning = Object.create(tutorial);
learning.rate = 5;
learning.work = 'developer';
for(var tut in learning) {
    result += tut + ':' + learning[tut] + '<br>';
}
 document.getElementById("displayval").innerHTML = result;
</script>
</body>
</html>

Output

The given image shows data or object value as an output.