For Loops

Counting

Let’s write a program that prints out the number 0 through 5 to the JavaScript Console. →

//start out with the surrounding html
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)

Let’s Spruce That Up a Bit

How can we change this so that we print out a single variable that is incremented after each print. →

// what if we just want to make multiple calls to the following line...
console.log(n);

// what's the missing code to make this count from 0 through 5?

Let’s Spruce That Up a Bit Continued

var n = 0;
var increment = 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);

A Closer Look…

Is there a pattern here? →

var n = 0;
var increment = 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);
n = n + 1;
console.log(n);

A Closer Look Continued

The following two lines were repeated 5 times! →

console.log(n);
n = n + 1;

That’s a bit tedious, right?

Some Motivation

Wouldn’t it be great if we could just tell the computer to repeat this block of code for us? →

console.log(n);
n = n + 1;

Iteration and Loops

Some formal definitions:

• iteration - repeated execution of a set of programming statements.
• loop - the construct that allows allows us to repeatedly execute a statement or a group of statements until a terminating condition is satisfied.
• sometimes these words are used interchangeably

Loops

JavaScript has a couple of structures that allow us to repeat blocks of code!

• for loops - count controlled (repeats code for a specific number of times)
• while loops - condition controlled (repeats code as long as a condition is true)

Today, We’re Using For Loops

For now, we’ll use for loops to repeat a block of code a specific number of times. The following code counts from 0 through 5. →

for(var i = 0; i <= 5; i = i + 1) {
	console.log(i);
}

For Loop Dissected

for(var i = 0; i <= 5; i = i + 1) {
  console.log(i);
}

Consists of the keyword, for, and three parts, separated by a semicolon, contained in parentheses:

• initialization - declares a variable and value to start with
• condition - a condition for the loop to stop
• afterthought - a way to increment/decrement or change the variable on each iteration so that the condition is eventually met

You can use the variable that you declare in the initialization within your for loop!

For Loop Parts

//    initialization
//    |        condition
//    |        |       afterthought/increment
//    |        |       |
for(var i = 0; i <= 5; i = i + 1) {
	console.log(i);
}

For Loop Notes

//    initialization
//    |        condition
//    |        |       afterthought/increment
//    |        |       |
for(var i = 0; i <= 5; i = i + 1) {
	console.log(i);
}

Notice that:

• we can use the variable created in the initialization
• the afterthought (3rd part) adds 1 to the variable on each iteration

Counting By 2’s

for(var i = 0; i <= 5; i = i + 1) {
  console.log(i);
}

How can we change our loop to count from 5 to 10 instead? →

for(var i = 5; i <= 10; i = i + 1) {
	console.log(i);
}

Counting By 2’s

for(var i = 0; i <= 5; i = i + 1) {
  console.log(i);
}

How can we change our loop to count by 2’s from 0 to 10? →

for(var i = 0; i <= 10; i = i + 2) {
	console.log(i);
}

Backwards

for(var i = 0; i <= 5; i = i + 1) {
  console.log(i);
}

How can we change our loop to count backwards from 10 to 0? →

for(var i = 10; i >= 0; i = i - 1) {
	console.log(i);
}

Using Variables Outside of the Loop

Write a program that adds the numbers 1 through 100 together. Try creating a variable outside of the for loop… and change that variable on each iteration. →

var total = 0;

for(var num = 1; num <= 100; num = num + 1) {
	total = total + num;
}
console.log(total)

Controlling the Condition of a For Loop With a Variable

Ask the user for a number… and use a for loop to count from 1 up to that number.

var answer = prompt("Give me a number to count up to");
var end = parseInt(answer);

for(var num = 1; num <= end; num = num + 1) {
	console.log(num);
}