We can use JavaScript loops to run a task repetitively. For example, if we have an array that holds a series of user input and if we are looking for a specific user input, then we can run in a loop and keep iterating until we find an input that matches the specific input.
Conceptually, a loop depends upon a specified condition to determine whether to continue further or to terminate/stop; the condition can be a simple variable or an expression. Typically, a loop would periodically check if the condition is still true and will run as long as it remains true.
Needless to say, for the above scheme to work, the loop variable or the loop expression that form the condition, must also change as the loop progresses. If they do not, then the loop would continue to run forever -- imagine running in a circle, forever! We can articulate the scheme of condition check into three stages: loop-initialization (where the loop variable or the expression is initialized), loop-increment (where the loop variable or the expression is changed), and loop-condition (where we check if the condition is still true).
JavaScript provides four different looping constructs: (1) while loop (2) do-while loop, (3) for loop, and (4) for/in loop. A while loop runs as long as the specified condition ("loop-condition") is true. During each round, we would (typically) also update the loop-condition so that the loop can terminate after some time. The do-while variant also has a similar format, except that the while sits at the very end of the loop block; we should remember to put a semicolon at the end of the while!. The next variant is the "for" loop. This variant cleanly tucks all the three tasks of looping in the beginning expression itself: loop-initialization, loop-increment, and loop-condition. The last variant, the "for/in" method traverses enumerable properties of objects.
Since this module focuses on jQuery, we should mention that in addition to these native JavaScript loops, jQuery provides two of its own looping constructs. First, it has a .each() method that we can use to iterate over each elements of the returned list. Second, it also provides a static method, $.each() that can iterate over any generic objects -- jQuery based or even native JavaScript based. We will revisit both of these jQuery-specific methods when we talk about jQuery lists.
Let us return back to our JavaScript loop overview and write a simple example that uses these four looping constructs (while, do-while, for, and for/in) to go over each element of an array, arrNobel.
<!doctype html>
<html>
<div id="idDiv"> </div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
// Define arrNobel with some initial values.
var arrNobel = ["Paul Samuelson", "John Forbes Nash", "Amartya Sen"];
// Let us print the elements using a while loop.
elem.innerHTML += "Printing array using a while loop: <br>";
var i = 0;
while (i < arrNobel.length) {
elem.innerHTML += "[index: " + i + "] value: " + arrNobel[i] + "<br>";
i++;
}
// Let us print the elements using a do-while loop.
elem.innerHTML += "<br>Printing array using a do-while loop: <br>";
i = 0;
do {
elem.innerHTML += "[index: " + i + "] value: " + arrNobel[i] + "<br>";
i++;
} while (i < arrNobel.length);
// Let us print the elements using a for loop.
elem.innerHTML += "<br>Printing array using a for loop: <br>";
for (i=0; i < arrNobel.length; i++) {
elem.innerHTML += "[index: " + i + "] value: " + arrNobel[i] + "<br>";
}
// Let us print the elements using a for-in loop.
elem.innerHTML += "<br>Printing array using a for-in loop: <br>";
for (var element in arrNobel) {
// With for-in loop, the elements of an array are its indexes!
elem.innerHTML += "[index: " + element + "] value: " + arrNobel[element] + "<br>";
}
</script>
</html>
When we run this program, the output is identical for all of the four methods:
Printing array using a while loop: [index: 0] value: Paul Samuelson [index: 1] value: John Forbes Nash [index: 2] value: Amartya Sen Printing array using a do-while loop: [index: 0] value: Paul Samuelson [index: 1] value: John Forbes Nash [index: 2] value: Amartya Sen Printing array using a for loop: [index: 0] value: Paul Samuelson [index: 1] value: John Forbes Nash [index: 2] value: Amartya Sen Printing array using a for-in loop: [index: 0] value: Paul Samuelson [index: 1] value: John Forbes Nash [index: 2] value: Amartya Sen
To handle selective loop cases, JavaScript also provides two loop-based keywords: continue and break. The keyword continue allows a program to skip the current record and continue with the next one. The keyword break allows a program to break out of the loop as soon as it finds a specified record. Thus, we can use "continue" to eliminate records and use "break" to select records the very first time we meet a criteria and exit the loop.