Submodule 7.2: Loops

for loop

For loops are the most common looping in JavaScript. Typically, we use it when we know the number of iterations we need: a fixed number (count to ten) or the length of a data structure.

The for loop has the following syntax:

for (initial expression; test to run; increment) {
    code block to be executed
}

Example 1

/*let's count from 1 to 5*/
for (var index = 1; index <= 5; index++){
 console.log(index); 
}

In this example, we set our three expressions in the for loop.

• the initial expression: this is executed once before the loop runs, and typically sets the initial condition for the counter: in this case, setting index equal to 1
• the test to run before each iteration over the loop: if this evaluates to true, the loop will continue
• executed after each iteration through the loop. In this case, we use it to increment index to the next value.

Tip: Copy the above piece of code and paste it directly into the console, to see how it works.

Example 2

In this example, we create an array of colors and use the loop to iterate over the array and output its contents to the console.

/* remember that arrays start at zero
so we will loop from 0 to the length of the array*/
var color = ["red", "green", "blue"];
for (var i = 0; i < color.length; i++){
  console.log(color[i]);
}

Tip: Copy the above piece of code and paste it directly into the console, to see how it works.

For more information: https://www.w3schools.com/js/js_loop_for.asp

Exercise

Loop through the integers from 1 to 100 and write each to the console only if it is odd (check if the remainder - % - after the division of the integer by 2, is 1). Work directly in your console.

Solution:

for(var j = 0; j < 100; j++ ){
  if (j % 2 == 1){ 
      console.log(j)
  };
};

while loop

We use while loops when we don’t know how many times we want it to run.

The while loop has the following syntax:

while (condition) {
 code block to be executed
}

The while loop, loops through a block of code as long as a specified condition is true.

Example 1

/* add consectuive integers until we get to 100*/
var i = 0, sum = 0;
while(sum <= 100){
    /*here we increment i, then add it to sum*/
    i = i + 1; 
    sum = sum + i;
}
/*the loop exits when sum reaches or exceeds 100*/
console.log("We added up to "+i+" to get to 100");

This example uses a while loop to add consecutive integers until the sum equals or exceeds 100. The while condition tests if this is true, and at each loop it increments i and adds it to sum. The while loop works well here since we don't know how many times the loop will have to run.

Tip: Copy the above piece of code and paste it directly into the console, to see how it works.

In this spreadsheet, you can see the values of the variables

For more information:
https://www.w3schools.com/js/js_loop_while.asp

JavaScript while loop
JavaScript for loop

Exercise

Add odd consecutive integers until the sum equals or exceeds 1000.What is the last number you added up?

Solution:

var j = 0;
var sum = 0;
while (sum < 1000) {
  j = j + 1;
  if (j % 2 == 1){ 
      sum = sum + j;
  };
};
console.log(j)