Looping Constructs
“Here we go loop de loop, on a Saturday night”
– Johnny Thunder
“First I'm up, and then I'm down.
Then my heart goes around and around.”
– Yo-Yo, The Osmonds
© Copyright 2016, Fred McClurg All Rights Reserved
“while” Loop Flow Chart
Description:
 As long as the
condition is true,
the “while” loop
executes the block
of code.
 When the
condition is false,
the loop exits.
false
WHILE
true
Code
Block
 Notice that the
condition is at the
top of the loop.
2
What is a “while” loop?
Description:
The “while” loop executes a block of code zero or more
times.
Syntax:
while ( condition ) {
// block of code;
}
// true
Best used when ...
This looping construct is used when you don’t know the
number of iterations. Also ideal for when the end
condition is not well defined or you may wish to protect
the block from execution.
3
Simple “while” Loop
Discussion:
The condition is at the top of the loop and the
increment is inside the body of the loop.
Example:
var i = 0;
// initialize index
while ( i < 10 ) { // if true
console.log( i );
i++; // increment
}
while.html
4
Complex “while” Loop
var ingalls = [ "Charles", "Caroline",
"Mary", "Laura",
"Carrie" ];
while ( ingalls.length != 0 ) {
console.log( "Array: " + ingalls +
" Length: " + ingalls.length );
person = ingalls.pop();
console.log( "Popped: " + person );
}
whilePop.html
5
“do while” Loop Flow Chart
Description:
 As long as the
condition is true,
the “do while” loop
executes the block
of code.
 When the
condition is false,
the loop exits.
Code
Block
false
DO
WHILE
true
 Notice that the
condition is at the
bottom of the loop.
6
What is a “do while” loop?
Description:
The “do while” loop executes a block of code one or more times.
Syntax:
do { // while
// block of code;
} while ( condition );
// notice semi-colon
Best used when ...
Looping construct is used in those situations when you don’t know
the number of iterations. Ideal for when the end condition is not
defined and you need to execute the block at least one time,
perhaps more. Also called a “Repeat Until” false loop.
7
“do while” Student Exercise
Description:
Create a script that uses a “do while” loop
to print the numbers 0 to 9 to the console.
Hint:
To get started, look at the “do while”
syntax. Also look at the first “while”
example code. The solution for this
exercise will be similar to the example.
8
Simple “do while” Loop
Discussion:
The condition is at the bottom of the loop and the
increment is inside the body of the loop.
Example:
var i = 0;
// initialize counter
do { // while
console.log( i );
i++; // increment
} while ( i < 10 ); // semi-colon
doWhile.html
9
Complex “do while” and
“random()”
// count number of times to draw a queen (using a do while)
var guess = 0; // number of guesses
var cards = [ "Ace", "King", "Queen", "Jack" ]; // face cards
var min = 0; // first array index
var max = cards.length - 1; // largest index
do { // while ()
guess++;
// pick random number between 0 and 3
var pick = Math.floor( (Math.random() * max) + min );
if ( cards[pick] != "Queen" ) // wrong guess
console.log( guess + ". Wrong: " + cards[pick] );
} while( cards[pick] != "Queen" );
// remember semi-colon!
console.log( guess + ". Right: " + cards[pick] );
console.log( "Guesses: " + guess ); // total tries
doWhile.html
10
What is a “for” loop?
Description:
A looping construct that is ideal when the exact
number (or the max number) of iterations is known.
Syntax:
for ( initialization; // semi-colon
condition; // semi-colon
increment|decrement ) {
// block of code;
}
11
Simple “for” Loop
Description:
Display a count from 0 to 9.
Example:
var min = 0;
var max = 10;
for ( var i = min; i < max; i++ ) {
console.log( i );
}
for.html
12
“for” Student Exercise
Description:
Create a script that uses a “for” loop to count by
fives from 0 to 25 and print the results to the
console.
Hint:
To get started, look at the Simple “for” Loop
example (previous slide). There are two ways to
solve this exercise:
1.
2.
Use a modulo inside an “if” statement.
Or use a short cut operator.
13
Multiples via “for”, “if”, and “%”
Discussion:
Use the modulo operator within an “if” statement to determine if a
number is an even multiple.
Example:
var min = 0;
var max = 25;
for ( var i = min; i <= max; i++ ) {
// if ( i % 5 ) { // would this work also?
if ( ( i % 5 ) == 0 ) { // even multiple
console.log( i );
}
forIfModulo.html
}
14
Multiples via “for” and “+=”
Discussion:
Use the “+=“ short-cut operator to count by fives. This
solution would execute faster because the loop has to
perform fewer iterations. In addition, it is simpler because
it contains less lines of code.
Example:
var min = 0;
var max = 25;
for ( var i = min; i <= max; i += 5 ) {
console.log( i );
}
15
forPlusEqual.html
Array Iteration with “for”
Description:
Iterate through an array and determine if there is a match to the current
document title.
Example:
var pageTitles = [ 'Home', 'About', 'Contact',
'Array Iteration with \"for\"' ];
for ( var i = 0; i < pageTitles.length; i++ ) {
// title of current page in document.title
if ( document.title == pageTitles[i] )
console.log( "Current page: " +
pageTitles[i] );
else
console.log( "Not current page: " +
pageTitles[i] );
}
whereAmI.html
16
What is a “for in” loop?
Description:
A looping construct designed to iterate over
the elements of an array.
Syntax:
for ( var index in arrayName ) {
statement;
...;
}
17
A “for in” Loop Example
Description:
Looping construct designed to iterate over the elements
of an array.
Example:
var ohMy = [ "Lions", "Tigers", "Bears" ];
for ( var i in ohMy ) {
console.log( "ohMy[" + i + "] = "
+ ohMy[i] );
}
forIn.html
18