How to use for...in statement to loop through an Array in JavaScript?

Javascript Web Development Front End Technology

We use the for...in statement of JavaScript for looping over enumerable properties of an array or object. It is a variety of for loops. Unlike other loop constructs in JavaScript, the for...in loop doesn’t have to bother about the number of iterations. This is because the iteration size is fixed based on the enumerable properties of the object or the number of elements in the array.

The "for...in" statement in JavaScript

A for...in loop iterates over all the enumerable properties of an object. All the properties that are assigned using a simple assignment operator or by default initializer are considered enumerable properties.

Syntax

for(var num in numbers){
   // statement
}

This creates a variable num that iterates over all the elements in the array numbers. This num takes on the index of the elements stored in the numbers array one by one.

Let’s see the working of for...in loop with an example.

Example 1

Here we will create an array of strings and then iterate over it using for...in loop. Let’s look at the code for same.


<!DOCTYPE html>
<html>
<body>
   <h3> for...in loop in JavaScript</h3>
   <div id="result"></div>
   <script>
      var arr = ["xyz", "abc", "pqr"];
      var text = "";
      for(var str in arr){
         text += arr[str] + ",";
      }
      document.getElementById("result").innerHTML = text;
   </script>
</body>
</html>

In the above code, the str takes on values 0,1 and 2 respectively which is used for retrieving the elements of the array.

Note however that the index order is implementation dependant. This means that there is no guarantee that the indices are traversed in the correct order. Due to this reason the for...in loop is not advised to be used with arrays. A different loop constructs like a conventional for loop or for...of loop should be used.

The for...in loop though usable, works pretty well with objects rather than arrays. This is because the loop variable takes on the value of keys one by one making the iteration of the object pretty easy.

Syntax

for(var num of numbers){
   // statement
}

This creates a variable num that iterates over all the elements in the array numbers. This num takes on the value of the elements stored in the numbers array one by one.

Here’s an example of how to use for...of loop with objects in JavaScript.

Example 2

Here we will create an array of elements containing different data types. we will use the for...of loop to iterate over that array.


<!DOCTYPE html>
<html>
<body>
   <h3> for...of loop in JavaScript</h3>
   <div id="result"></div>
   <script>
      var arr = ["Jane Doe", 2 , 59.57];
      var text = "The elements of the array are <br><br>";
      for(var ele of arr){
         text += ele + "<br>";
      }
      document.getElementById("result").innerHTML = text;
   </script>
</body>
</html>

In the above code, as is visible in the output as well, the variable ele takes on the value of the elements present in the array.

We can also use the Array.prototype.forEach() method for traversing the array. The argument of forEach() is a function that is executed for all the elements of the array.

Syntax

const arr = ["Jane Doe", 2, 59.57]
arr.forEach(function fun(ele){
   // statement
}

Note that the "prototype" is replaced with the array’s name, which is arr in this case. The function fun has one argument ele which takes on the values of the elements stored in the array arr one by one.

Here’s an example of how to use the forEach() method with arrays in JavaScript.

Example 3

Here we will create an array of elements containing different data types. we will use the forEach() method to iterate over that array.

Let’s look at the code for the same.


<!DOCTYPE html>
<html>
<body>
   <h3> forEach() method in javascript</h3>
   <div id="result"></div>
   <script>
      var arr = ["Jane Doe", 2 , 59.57];
      var text = "The elements of the array are <br><br>";
      arr.forEach(function fun(ele){
      text += ele + "<br>";
   })
   document.getElementById("result").innerHTML = text;
</script>
</body>
</html>