Loops

Contact Us or call 1-877-932-8228
Loops

Loops

There are several types of loops in JavaScript.

  • while
  • do...while
  • for
  • for...in

while Loop Syntax

while (conditions) {
	statements;
}

Something, usually a statement within the while block, must cause the condition to change so that it eventually becomes false and causes the loop to end. Otherwise, you get stuck in an infinite loop, which can bring down the browser.

do...while Loop Syntax

do {
	statements;
} while (conditions);

Again something, usually a statement within the do block, must cause the condition to change so that it eventually becomes false and causes the loop to end.

Unlike with while loops, the statements in do...while loops will always execute at least one time because the conditions are not checked until the end of each iteration.

for Loop Syntax

for (initialization; conditions; change) {
	statements;
}

In for loops, the initialization, conditions, and change are all placed up front and separated by semi-colons. This makes it easy to remember to include a change statement that will eventually cause the loop to end.

for loops are often used to iterate through arrays. The length property of an array can be used to check how many elements the array contains. We'll take a look at using the for loop in the upcoming presentation.

for...in Loop Syntax

for (var item in array) {
	statements;
}

for...in loops are specifically designed for looping through arrays. For reasons that will be better understood when we look at object augmentation, the above syntax has a slight flaw. If the Array class is changed, it is possible that the for...in loop includes more items than what you anticipated.

To be on the safe side, we suggest that you use a more verbose syntax as seen below.

for (var item in array) if (array.hasOwnProperty(item)) {
	statements;
}

The hasOwnProperty() call will ensure that the item is indeed an element that you added to the array, not something that was inherited because of object augmentation.

Code Sample:

ConditionalsAndLoops/Demos/Loops.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Loops</title>
<script type="text/javascript">
	var index;
	var beatles = [];
	beatles["Guitar1"] = "John";
	beatles["Bass"] = "Paul";
	beatles["Guitar2"] = "George";
	beatles["Drums"] = "Ringo";
	var ramones = ["Joey", "Johnny", "Dee Dee", "Mark"];
</script>
</head>
<body>
<h1>JavaScript Loops</h1>
<h2>while Loop</h2>
<script type="text/javascript">
index = 0;
while (index < 5) {
   document.write(index);
   index++;
}
</script>

<h2>do...while Loop</h2>
<script type="text/javascript">
index = 1;
do {
   document.write(index);
   index++;
} while (index < 5);
</script>

<h2>for Loop</h2>
<script type="text/javascript">
for (index=0; index<=5; index++) {
	document.write(index);
}
</script>

<h2>for Loop with Arrays</h2>
<ol>
<script type="text/javascript">
var len = ramones.length;
for (var index=0; index<len; index++) {
	document.write("<li>" + ramones[index] + "</li>");
}
</script>
</ol>

<h2>for...in Loop</h2>
<ol>
<script type="text/javascript">
for (var prop in beatles) {
		document.write("<li>" + prop + " : " + beatles[prop] + "</li>");
}
</script>
</ol>
</body>
</html>

The sample above shows demos of all the aforementioned loops.

Next