Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to use for...in statement to loop through an Array in JavaScript?
The for...in statement in JavaScript iterates over all enumerable properties of an object or array. While it can be used with arrays, it's primarily designed for objects since it iterates over property names (indices for arrays) rather than values.
Syntax
for (variable in object) {
// code block to be executed
}
The loop variable receives the property names (or array indices), not the actual values.
Using for...in with Arrays
Here's how for...in works with arrays:
<!DOCTYPE html>
<html>
<body>
<h3>for...in loop with Arrays</h3>
<div id="result"></div>
<script>
var fruits = ["apple", "banana", "orange"];
var text = "Array elements using for...in:<br>";
for (var index in fruits) {
text += "Index " + index + ": " + fruits[index] + "<br>";
}
document.getElementById("result").innerHTML = text;
</script>
</body>
</html>
Index 0: apple Index 1: banana Index 2: orange
Why for...in is Not Recommended for Arrays
The for...in loop has several drawbacks when used with arrays:
- Index order is not guaranteed: The iteration order may not follow the numeric sequence
- Iterates over all enumerable properties: Including inherited properties and custom properties
- Returns indices as strings: Not numbers, which can cause issues
<!DOCTYPE html>
<html>
<body>
<h3>Problems with for...in and Arrays</h3>
<div id="demo"></div>
<script>
var numbers = [10, 20, 30];
numbers.customProperty = "custom value";
var output = "Using for...in (includes custom properties):<br>";
for (var key in numbers) {
output += key + " (" + typeof key + "): " + numbers[key] + "<br>";
}
document.getElementById("demo").innerHTML = output;
</script>
</body>
</html>
0 (string): 10 1 (string): 20 2 (string): 30 customProperty (string): custom value
Better Alternatives for Arrays
Using for...of Loop
<!DOCTYPE html>
<html>
<body>
<h3>for...of loop (Recommended)</h3>
<div id="output"></div>
<script>
var colors = ["red", "green", "blue"];
var result = "Using for...of:<br>";
for (var color of colors) {
result += color + "<br>";
}
document.getElementById("output").innerHTML = result;
</script>
</body>
</html>
red green blue
Using forEach() Method
<!DOCTYPE html>
<html>
<body>
<h3>forEach() method</h3>
<div id="display"></div>
<script>
var numbers = [5, 10, 15, 20];
var text = "Using forEach():<br>";
numbers.forEach(function(element, index) {
text += "Index " + index + ": " + element + "<br>";
});
document.getElementById("display").innerHTML = text;
</script>
</body>
</html>
Index 0: 5 Index 1: 10 Index 2: 15 Index 3: 20
When to Use for...in
The for...in loop is best suited for iterating over object properties:
<!DOCTYPE html>
<html>
<body>
<h3>for...in with Objects</h3>
<div id="object-demo"></div>
<script>
var person = {
name: "John",
age: 30,
city: "New York"
};
var info = "Person details:<br>";
for (var property in person) {
info += property + ": " + person[property] + "<br>";
}
document.getElementById("object-demo").innerHTML = info;
</script>
</body>
</html>
name: John age: 30 city: New York
Conclusion
While for...in can iterate over arrays, it's better suited for objects. For arrays, use for...of or forEach() to avoid potential issues with property enumeration and maintain predictable iteration order.
Updated on: 2026-03-15T22:01:03+05:30
312 Views
Advertisements