Loops

In programming we often want to repeat a block of code multiple times. To do this, we use loops. As an example, suppose we want to determine which numbers between 2 and 50 are prime. To do this, we would use a loop. In JavaScript there are many options for loops. We'll cover a couple of them on this page.

"While" Loops

One common type of loop is the "while" loop, which runs a block of code "while" a certain condition is true. A "while" loop is best described with an example. Consider the code below, which finds the sum of the first 10 numbers (numbers from 1 to 10).

var sum = 0, i = 1;

while (i <= 10) {
	sum = sum + i;
	i++; // DON'T FORGET TO DO THIS!!!
}

print(sum);

In the code above, we start be defining sum = 0 and i = 1. We will use sum to keep track of our addition, and i will be what we add to our sum. Line (3) shows the while keyword which is followed by a condition i <= 10. Whenever i <= 10, whatever is inside the curly braces of the while loop will execute. Line (4) adds the value of i to the current value of sum, and then Line (5) increments i by 1. Do NOT forget to add Line (5), otherwise i will constantly be equal to 1, which is always ≤10 and therefore the loop will run forever!

When looking at the code above, we can think about it as follows.

  • sum = 0 and i = 1
  • We enter the while loop when sum = 0 and i = 1 and so then Line (4) says sum = 0 + 1 so sum = 1. Then Line (5) makes i = 2.
  • Now, since i is still ≤10, we do the loop again. But now sum = 1 and i = 2 and so Line (4) says sum = 1 + 2 = 3. Then Line (5) makes i = 3.
  • We repeat the previous step until i > 10!

To give you a better feel for what is going on here, consider the following code. It's essentially the same code, but now we're printing the values of i and sum on each part of the loop.

var sum = 0, i = 1;

while (i <= 10) {
	sum = sum + i;
	i++; // DON'T FORGET TO DO THIS!!!
	print(`sum = ${sum} and i = ${i}`);
}

print(sum);

"For" Loops

Another type of loop is the "for" loop, which acts a lot like the "while" loop. The code from above can be rewritten in a for loop as follows.

var sum = 0, i;

for (i = 1; i <= 10; i++) {
	sum = sum + i;
	print(`sum = ${sum} and i = ${i}`);
}

print(sum);

In this code, Line (1) "initializes" the variables sum and i. Then in Line (3) we use the for keyword to start a loop. Notice that we have for (i = 1; i <= 10; i++). This is saying, "when we start the loop, set i = 1. Let's run the loop while i <= 10, and at the end of each iteration let's do i++ so that i is increased by 1.". This is the general form of a for loop.


Let's look at one last example of a for loop. Let's determine which numbers between 2 and 20 are prime! The code below shows this.

for (var i = 2; i <= 20; i++) {
	if (isPrime(i)) {
		print(`${i} is prime!`);
	}
}

Line (1) in the code above starts the for loop. Notice how the variable i is instantiated within the loop - that is, we defined the variable i within the for loop. We start at i = 2, and keep repeating while i <= 20, and after each repetition we increment i by 1. We're using the isPrime() function to check whether or not i is prime. If i is prime, then we print `${i} is prime!`.

Activities

Activity: Counting backwards

Use a while loop to print the numbers 5, 4, 3, 2, 1 in that order. When using the loop, make sure to increment or decrement your variable so that you don't create an infinite loop!

print("You're code here.");

Activity: Printing the elements of an array

A variable named a is defined in the background (you can see it printed below). We also defined a variable n to represent the length of the array a. Using a for-loop, print each element of the array a

print(a);

var n = a.length;

print("Your code here.");