In continuation of last post, this is about the other two useful loops in JavaScript. JavaScript for.. of and for.. in loops allows you to iterate over iterable objects. These iterable objects can be in Strings, Arrays, Sets or user-defined object collections.
Both these loops use a variable that stores the current item in the collection. The loops iterate through the elements automatically. The loop terminates automatically when the elements of the collection are exhausted.
for..of Statement
This loop can be used to access the elements of a collection. The collection can of HTML elements, Strings, Arrays, Sets or other user defined objects.
Syntax
for (const/set/var variable-name of iterable)
{
statement(s);
}
variable-name is the name of thevariable that will store the current element of the iterable object. It can be declared with keywords const, set or var. This loop will execute till the elements are available in the iterable collection. You don’t need to define any condition for termination of the loop.
Read about JavaScript for..of here.
Example
<HTML>
<head>
<style>
input{padding:10px; margin:10px}
</style>
<script>
function checkVal()
{
var msg="";
var i=0;
var colArray=["#66ff66","#ccccff","#b3ffec","#fff0b3","#d9b3ff","#ff99c2","#ffff4d"];
var x=document.getElementsByName("para");
for (var element of x)
{
element.style.backgroundColor = colArray[i];
i++;
}
</script>
</head>
<body>
<div style="border-style:solid; border-color:yellow; margin-left:20%; width:50%; padding:20px; font-family:verdana">
<p name="para">Let's </p>
<p name="para">Change </p>
<p name="para">Colors </p>
<p name="para">Of All </p>
<p name="para"> Paragraphs</p>
<p name="para"> with a</p>
<p name="para"> Click</p>
<input type="submit" onclick="checkVal()">
</div>
</body>
</HTML>for..in Statement
This loop can be used to access the properties of an object available as string. You can access the key-value pairs of the properties of an object.
Syntax
for (const/set/var variable-name in iterable)
{
statement(s);
}
variable-name is the name of thevariable that will store the accessible property of the iterator object. It can be declared with keywords const, set or var. This loop will execute till the enumerable properties of the object are available as iterable collection. You don’t need to define any condition for termination of the loop.
In each iteration a property is assigned to the variable-name. This assigned property is an enumerable and non-Symbol. The property name and its value can be used to manipulate the object properties using a for..in loop.
Read about JavaScript for..in here.
Example
<HTML>
<head>
<style>
input{padding:10px; margin:10px}
</style>
<script>
function checkVal()
{
var msg="";
var x=document.getElementsByName("para");
for (var p in x)
{
msg=msg.concat(`x.${p} = ${x[p]}`);
msg=msg.concat("<br>");
}
document.getElementById("display").innerHTML=msg
}
</script>
</head>
<body>
<div style="border-style:solid; border-color:yellow; margin-left:20%; width:50%; padding:20px; font-family:verdana">
<p name="para" style="background-color:#66ff66;font-family:verdana; font-size:12px">Repulsive questions contented him few extensive supported. Of remarkably thoroughly he appearance in. Supposing tolerably applauded or of be. Suffering unfeeling so objection agreeable allowance me of. Ask within entire season sex common far who family. As be valley warmth assure on. Park girl they rich hour new well way you. Face ye be me been room we sons fond.Is education residence conveying so so. Suppose shyness say ten behaved morning had. Any unsatiable assistance compliment occasional too reasonably advantages. Unpleasing has ask acceptance partiality alteration understood two. Worth no tiled my at house added. Married he hearing am it totally removal. Remove but suffer wanted his lively length. Moonlight two applauded conveying end direction old principle but. Are expenses distance weddings perceive strongly who age domestic. </p>
<input type="submit" onclick="checkVal()">
<p id="display">Display</p>
</div>
</body>
</HTML>
Be First to Comment