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
  • for...of

while Loop Syntax

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

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

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.

for...in Loop Syntax

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.

Syntax

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.

for...of Loop Syntax

Syntax

for (variable of iterable) {
	statement;
}

for...of loops are a recent addition to JavaScipt, allowing us to loop through any interable object - objects of classes like Array, Map, Set, and other similar classes - rather than just arrays. (An interable object is an object of a class that is enumerable, where the elements are in a definite order.) As for...of loops aren't supported by all browsers, you might avoid this loop type for now - but a good construct for you to recognize should you see it in the code.

Code Sample:

ConditionalsAndLoops/Demos/Loops.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Loops</title>
<script>
	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>
index = 0;
while (index < 5) {
   document.write(index);
   index++;
}
</script>

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

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

<h2>for Loop with Arrays</h2>
<ol>
<script>
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>
for (var prop in beatles) {
		document.write("<li>" + prop + " : " + beatles[prop] + "</li>");
}
</script>
</ol>

<h2>for...of Loop</h2>
<ol>
<script>
for (var bandMember of ramones) {
		document.write("<li>" + bandMember + "</li>");
}
</script>
</ol>
</body>
</html>

Code Explanation

The sample above shows demos of all the aforementioned loops.

Next