JAVASCRIPT - FOR IN LOOP

Let's say we want to Iterate an array or an Object. And For IN loop provides an easy way to achieve that.

Let us see in the below example.

For In Loop to Iterate through Arrays

Let's say, we have an Array that stores the Cities.

And as we know, square brackets [] are used to represent an Array.

cities = ["Mumbai", "Paris", "London"]

Now, if we want to Iterate through the above Array using for loop.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	cities = ["Mumbai", "Paris", "London"]
	for (i in cities) {
		document.write(cities[i], ", ")  
    }    
    
</script>      
</body>
</html>

Output :

Mumbai, Paris, London,

So, if we look at the above code, the for loop,

for (i in cities) {
	document.write(cities[i], ", ")
}

Gets the values from the cities Array.

And in each Iteration, prints the value of x.

Let us see the Iterations.

Below is the Array (i.e. cities).

cities = ["Mumbai", "Paris", "London"]

And the for loop starts,

for (i in cities)

1st Iteration

In the first Iteration, the index of the first element is taken from the Array cities and put into the variable i.

And the index of the first element, Mumbai is 0. So, 0 is put into i.

Then, in document.write statement, we take the first index(i.e. Stored in the variable i). And access the first element.

document.write(cities[i], ", ")

And the value of cities[0] i.e. Mumbai is printed.

Output :

Mumbai,

2nd Iteration

Similarly, in the second Iteration, the index of the second element is taken from the Array cities and put into the variable i.

And the second element in the cities Array is Paris.

And the document.write statement,

document.write(cities[i], ", ")

Prints the second element Paris.

Output :

Mumbai, Paris,

3rd Iteration

Similarly, in the third Iteration, the index of the third element is taken from the Array cities and put into the variable i.

And the third element in the cities Array is London.

And the value of cities[2] is printed.

Output :

Mumbai, Paris, London,

And in three Iterations, all the values of the Array are printed.

Similarly, the values of an object can be Iterated using the same way.

Let us see the example of a object student.

var student = {name : "John", roll : 38, age  : 12}

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var student = {name : "John", roll : 38, age  : 12}
	for (i in student) {
		document.write(i, "-->", student[i], ", ")  
    }    
    
</script>      
</body>
</html>

Output :

name-->John, roll-->38, age-->12,

So, if you look at the above code, we have created an object student that has the details of a student John whose roll is 38 and age is 12.

var student = {name : "John", roll : 38, age  : 12}

Then we have used the for in loop to Iterate through the object student.

for (i in student) {
	document.write(i, "-->", student[i], ", ")
}

Now, if we look at the for in loop closely, we can see that in each iteration the key is taken from the student object and put in the variable i.

And in the document.write statement, we take the key(i.e. in the variable i) and access the value for each key.

document.write(i, "-->", student[i], ", ")

Iterating through a String

The for loop also gives us the flexibility to Iterate through a string.

Let us see it in the below example.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript"> 
		
	var city = "London"
	for (x in city) {
		document.write(city[x], ", ")  
	}	  
    
</script>      
</body>
</html>

Output :

L, o, n, d, o, n,

So, if you see the above code, we have a declared a string type variable city.

var city = "London"

Then, we have used the for loop to Iterate through the string city.

for (x in city) {
	document.write(city[x], ", ")
}

In each Iteration, a letter/alphabet is taken from the string city and printed as output.

❮❮ PREV NEXT ❯❯