JavaScript Loops

MMP 210 > Week 8

A loop defines a set of commands to execute repeatedly.

A loop is sort of like copying and pasting the same piece of code multiple times.

JavaScript uses do, while and for.

Loops look like other control statements.

if (condition) { 
	// condtional code 
}

while loop

A while statements executes as long as the conditional statement is true.

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

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

for loop

for (let i = 0; i < 5; i++) {
	console.log("This is the " + i + " loop.");
}

The for keyword indicates the beginning of the for loop.

Inside the parentheses there are three statements that control the duration of the loop.

The first statement is the initial condition, where we start counting.

let i = 0;

The second statement creates a condition.

i < 5;

As long as this condition evaluates to true, the loop will continue.

The third statement is the update. This is how the counting variable is changed after each loop.

i++

for (initialization; conditional; iteration) {
	loop body;
}

Loops are an efficient way to execute actions on a list or array of data.

let

let i = 0; probably doesn't look familiar so let's discuss it here.

let is a variable declaration keyword like var, there's just one difference, let is scoped, so it stops existing after the for loop.

This is good practice for loops, functions and other places where we don't want variables to exist outside of their current scope.

We can see the difference in the console:

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

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

Notice how i is undefined while j has a value? With let, i stops existing once the for loop is done.

Most of the time we start counting at 0:

let i = 0;

But our initial condition could be anything.

for (let i = 1; i < 6; i++) {
  console.log("This is the " + i + " loop.");
}

Likewise, we can change the conditional and iteration statements.

for (let i = 0; i < 100; i += 10) {
  console.log(i);
}

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

Drawing with loops

In p5, we can use a loop to draw a shape or collection of shapes more than once without having to repeat the code.

Patterns

Using a loop unlocks a lot new possiblities. The same code that we used to draw one self portrait can now be used to draw 10 self portraits, only adding a couple of lines of code.

Variation

We can repeat shapes and drawings but we can also add variations.

To start, let's just use the value of x for other things besides the size.