Why is using “for…in” loop in JavaScript array iteration a bad idea?

Front End Technology Javascript Web Development

The ability to execute a collection of instructions or functions repeatedly while a certain condition holds true is known as looping in programming languages.

The for-in statement is used to iterate through the properties of an object. This sentence will move up the prototype chain and display all inherited properties, which is usually undesirable.

When it comes to iterating through array elements, there are few reasons why you shouldn't use for..in:

For example, if someone changes Array.prototype, which is absolutely bad practise in code that is meant to operate well with the other scripts, for..in will cycle over all own and inherited attributes of the array object that aren't DontEnum. Additionally, these attributes will undergo iteration; You can ignore inherited properties by selecting hasOwnProperty(), but that won't work for properties that are set in the array object itself.
It is not guaranteed that for..in will maintain element ordering.
It takes a long time since you have to loop through every property of the array object and its entire prototype chain to obtain the value of a property; instead, you will just obtain the property's name with this method.

Syntax

Array.prototype.myCustomProp = "Hello World";

JavaScript disadvantages of the for..in loop

If you use the prototype to add a property toward an object or array, and to any other array arr that doesn't relate towards that property whenever you iterate array x, you obtain this property.

Example 1

In this example let us understand that you modified Array.prototype by adding the property myCustomProp. Next, create an array called myArray, give it a value, and then go through the for loop.


<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // written to add property using myCustomProp
      Array.prototype.myCustomProp = "Visit Tutorialspoint!";
      let myArray = [1, 2, 3, 4, 5, 6];

      // written to iterate using for..in loop
      for (var index in myArray) {
         document.write(myArray[index] +'<br>');
      }
   </script>
</body>
</html>

Example 2

In this example let us understand how this issue can be resolved by utilising the function hasOwnProperty() method.


<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // written to add property using myCustomProp
      Array.prototype.myCustomProp = "Visit Tutorialspoint!";
      let myArray = [1, 2, 3, 4, 5, 6];

      // written to iterate using for..in loop
      for (var index in myArray) {

         // written to check the myArray has the item in it or not
         if (myArray.hasOwnProperty(index)) {
            document.write(myArray[index]);
         }
      }
   </script>
</body>
</html>

The array's undefined values are neglected by the for..in loop. For example, if you generated the empty array myArray and added certain items to myArray[0], myArray[2], and myArray [4], the undefined values for myArray[1], myArray[3], and myArray[5] are ignored by the for..in loop.

Example 3

In this example let us understand how the array's undefined values are neglected by the for..in loop.


<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
  <script>
      let myArray = [];
      myArray[0] = "Bajaj";
      myArray[2] = "Honda";
      myArray[4] = "Suzuki";
      document.write("Used for loop" +">br>");
      for (let i = 0; i < myArray.length; i++) {

         // "Bajaj", undefined, Honda, "undefined", "Suzuki"
         document.write(myArray[i] +">br>");
      }
      document.write(">br>",">br>", "Used for..in loop" +">br>");
      for (let index in myArray) {
         
         // "Bajaj", "Honda", "Suzuki"
         document.write(myArray[index] +">br>");
      }
   </script>
</body>
</html>

Example 4

In this example let us understand how For..in loops ignores all undefined values while a basic for loop prints every entry of the array, including undefined. The for..in loop does not dismiss the undefined values when they are specifically included in the array, but this is only true for the arrays whose values are undefined.


<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let myArray = [undefined, undefined, undefined, "Welcome to tutorialspoint!"];
      for (let index in myArray) {
         document.write(myArray[index] +"<br>");
      }
   </script>
</body>
</html>