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 2014, Fred McClurg All Rights Reserved

2

“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.

Notice that the condition is at the top of the loop.

WHILE

Code Block

true

false

3

What is a “while” loop?

Description:The “while” loop executes a block of code zero or more times.

Syntax:while ( condition ) { // true // block of code;}

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.

4

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

5

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

6

“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.

Notice that the condition is at the bottom of the loop.

DOWHILE

Code Block

true

false

7

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.

8

“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.

9

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-colondoWhile.html

10

Complex “do while” and “random()”

// count number of times to draw a queen (using a do while)var guess = 0; // number of guessesvar cards = [ "Ace", "King", "Queen", "Jack" ]; // face cardsvar min = 0; // first array indexvar 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

11

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;}

12

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

13

“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. Use a modulo inside an “if” statement.2. Or use a short cut operator.

14

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

15

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 );} forPlusEqual.html

16

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

17

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; ...;}

18

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