6.2: Loops
By the end of this lesson, you should be able to:
- Explain how loops are used in the control flow of a program.
- Use a
while
loop to run a code block for a fixed number of times. - Use loops within loops.
- Be familiar with both the
for
-loop andwhile
-loop syntax.
We've defined an array, added values to it, and inspected those values individually, but haven't yet learned how to systematically manipulate each element in the array, no matter how long the array is. To do this we will learn 1 more control structure: "loops".
In SWE Fundamentals we will mostly use loops to iterate over array elements. Loops can also be used without arrays, for example to perform an action until a condition is no longer
true
, but we will not see this often in SWE Fundamentals.A loop defines a code block (with curly braces) that runs until the loop condition is no longer met. We'll look at loops in isolation first, then see them in the context of arrays.
While loops are the most fundamental type of loop in programming, and the concept exists in many programming languages. The following is a "while loop" that runs 10 times, i.e. until its condition is no longer met. Notice how we define a counter before the loop, and increment the counter at the end of the loop. The loop finishes when the counter reaches 10.
// Initialise a counter to 0.
var counter = 0;
// Set the while loop condition to continue when counter is less than 10.
while (counter < 10) {
// Log hello with each iteration of the loop.
console.log('hello');
// Increment the counter by 1 at the end of each loop iteration.
counter = counter + 1;
}
Let's create a program that outputs values in a loop, where the loop condition depends on user input.
var main = function (input) {
var myOutputValue = '';
var counter = 0;
// Continue the loop while counter is less than the input value
while (counter < input) {
// Add 1 "yes" to the output for every loop iteration.
myOutputValue = myOutputValue + 'yes';
counter = counter + 1;
}
return myOutputValue;
};
Note that except for rare exceptions, the incrementation of the counter (
counter = counter + 1
) should be the last statement in the loop block. If you find yourself writing any statements below that, it may not be what you intended.Let's create a program that outputs values in a loop, where loop condition depends on user input, with additional conditional statements inside the loop. In the following example, the conditionals inside the loop help the program combine 2 different strings into program output.
var main = function (input) {
var myOutputValue = '';
var counter = 0;
// Continue the loop while counter is less than the input value
while (counter < input) {
// If counter is less than 5, add "yes" to output
if (counter < 5) {
myOutputValue = myOutputValue + 'yes';
// Otherwise, add "no" to output
} else {
myOutputValue = myOutputValue + 'no';
}
counter = counter + 1;
}
return myOutputValue;
};
Loops and conditionals alone are powerful tools to create output patterns. One of the main tricks with loops is identifying the pattern we want and working backward to construct the logic within the loop. The following example uses the modulus (
%
) operator in a conditional in a loop to alternate strings in output.var main = function (input) {
var myOutputValue = '';
var counter = 0;
while (counter < input) {
// If counter is even, add "yes" to output
// The modulus (%) operator returns the remainder after division
// If a number divided by 2 equals 0, we consider it even.
if (counter % 2 == 0) {
myOutputValue = myOutputValue + 'yes';
// Otherwise, add "no" to output
} else {
myOutputValue = myOutputValue + 'no';
}
counter = counter + 1;
}
return myOutputValue;
};
We can also combine loops and functions. Functions in loops allow us to move code blocks (i.e. complex logic) outside loop definitions, breaking down our code into smaller components, helping simplify our code logic.
In the following example, we define
rollDice
as a standalone function, and call rollDice
from inside our loop. This helps keep our loop logic clean by separating the details of rollDice
out from the loop.var main = function (input) {
var myOutputValue = '';
var counter = 0;
while (counter < input) {
// Roll dice inside the loop, generating a random dice roll each iteration
var diceRoll = rollDice();
// Add each dice roll to output
myOutputValue = myOutputValue + ' ' + diceRoll + ' ';
// Increment counter at end of each iteration
counter = counter + 1;
}
return myOutputValue;
};
If we put a loop inside a loop we can represent 2 dimensions of output. Note we use
<br>
to create new rows. <br>
is a newline HTML tag that can help us format our output.var main = function (input) {
var myOutputValue = '';
// Initialise the outer counter, rowCounter
var rowCounter = 0;
while (rowCounter < input) {
// Inside the outer loop, initialise the inner counter, columnCounter
var columnCounter = 0;
// Every time the outer loop runs, the inner loop runs repeatedly until
// the inner loop condition is met.
while (columnCounter < input) {
// Each time the inner loop runs, it adds "x" to output
myOutputValue = myOutputValue + 'x';
columnCounter = columnCounter + 1;
}
// At the end of each outer loop, add a <br> tag to begin a new row
myOutputValue = myOutputValue + '<br>';
rowCounter = rowCounter + 1;
}
// After the outer loop has run to completion, return the output compiled
// by the above loops.
return myOutputValue;
};
Most languages have variations on the while loop above that behave similarly. One common variation is the "for loop". For loops are a more concise syntax for looping over a fixed number of iterations. Whenever we have a fixed number of iterations we should use a for loop if possible. The 2 following examples behave the same, but the for loop syntax is more concise.
// Initialise counter
var counter = 0;
// Declare loop condition
while (counter < 10) {
console.log('hello');
// Increment counter
counter += 1;
}
// Initialise counter, declare loop condition, and increment counter in 1 line
for (var counter = 0; counter < 10; counter += 1) {
console.log('hello');
}
The key difference in for loop syntax is that all loop management code is consolidated in the top parenthesis group. However, when the code runs, each step actually happens in the same order as in the while loop example. These steps are the following.
- 1.Declare and initialise counter variable
- 2.Evaluate condition
- 3.Increment counter
To solidify understanding of loops, we suggest using while loops until you are comfortable with loop mechanics.
In other code examples you may see the incrementation step replaced by
counter++
. This adds 1 to counter
. At Rocket we prefer ESLint's recommendation of counter += 1
syntax. See ESLint's reasons against ++
syntax here.Implement the above code.
- 1.Create a loop in the
main
function. Make the loop run 6 times, adding"hello"
tomyOutputValue
with each loop iteration. - 2.What happens if
counter
starts as a number other than zero? - 3.What happens if, inside the loop, you alter the
counter
by adding a number other than one? - 4.What happens if you change the condition inside the loop from
counter < 6
tocounter <= 6
?
- 1.Create nested loops in the
main
function, where the outer loop runs 3 times and the inner loop runs 3 times per outer loop. Concatenate"hello"
tomyOutputValue
in the inner loop. How many times do we see"hello"
? - 2.Add
"<br>"
tomyOutputValue
in the outer loop so that the program makes a new line for each outer loop. - 3.What happens if
outerCounter
starts as a number other than zero? - 4.What happens if
innerCounter
starts as a number other than zero? - 5.What happens if, inside the loop, you alter
outerCounter
by adding a number other than one? - 6.What happens if, inside the loop, you alter
innerCounter
by adding a number other than one? - 7.What happens if you change the outer loop condition from
outerCounter < 3
toouterCounter <= 3
? - 8.What happens if you change the inner loop condition from
innerCounter < 3
toinnerCounter <= 3
? - 9.Update loop conditions to use
input
to control how many times the loops run. - 10.Update our code such that the inner loop runs twice the number of times as the outer loop. How many more times do we see
"hello"
?
Make a loop that never stops running. Be prepared to stop / kill this Chrome tab, because it will freeze. We should be able to observe this tab's performance in Windows Task Manager or MacOS Activity Monitor.