START HEREWhy loops
In Primer 1, every line ran once. That is fine for a vault with one screen. It is hopeless for a level with 24 floor tiles, or a game that checks every enemy sixty times a second.
A loop runs the same lines again and again, changing one thing each time. It is the difference between typing block(0, 0); twenty-four times and typing it once.
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);for (let i = 1; i <= 5; i++) {
console.log(i);
}Both print 1 to 5. Only one of them still works when you need 1 to 500.
Same rules as Primer 1. Predict before you run. Change the code when the page asks. Red lines tell you where JavaScript got confused.
New this time: if you write a loop that never stops, this page stops it for you after 100,000 rounds and marks the loop in red. In a normal web page, that loop would freeze the whole tab.
CONCEPT 1The for loop
A for loop has three parts inside its round brackets, separated by semicolons:
- Start:
let i = 1- make a counter and give it a first value. - Keep going while:
i <= 5- a true-or-false question asked before every round. When it is false, the loop ends. - Step:
i++- what happens after every round.i++is short fori = i + 1.
The code inside the curly braces is the body. It runs once per round.
Now change it: make it print 1 to 10. Then make it print Round 1, Round 2... by joining text onto i, as you did in Primer 1.
Read it as: "start i at 1; while i is 5 or less, print i, then add 1 to i". After 5 is printed, i becomes 6, the question 6 <= 5 is false, and the loop stops.
The same thing in C++
for (int i = 1; i <= 5; i++) {
cout << i;
}CONCEPT 2Counting from zero
Most loops you will read start at 0, not 1, and use < rather than <=. for (let i = 0; i < 3; i++) runs 3 times: with i as 0, 1 and 2.
The habit comes from lists, where the first item is number 0 (Primer 3). It is also handy: the number after < is exactly how many rounds you get.
Now change it: make it run 24 times - the width of the level you will build. What is the last number it prints?
Only one of you got this right on the Hand-Coding Check. A loop that starts at 0 and stops before 3 visits 0, 1, 2. Three numbers, but the biggest is 2.
CONCEPT 3Counting by twos, and counting down
The step doesn't have to be i++. i += 2 adds 2 each round (it is short for i = i + 2). i-- takes 1 away, so the loop counts down - then the "keep going" question has to flip too, to > or >=.
Now change it: make the first loop print 10, 20, 30, 40, 50. Then make the second print a countdown from 10 that ends with Liftoff! (that last line goes after the loop, not inside it).
In the first loop, x goes 1, 3, 5, 7 - then 9, and 9 < 8 is false. You will use exactly this loop to place coins in the game.
CONCEPT 4while: keep going as long as...
A while loop has only the question. You make the counter before it, and you move the counter yourself, inside the body.
Use for when you know how many rounds you want. Use while when you only know when to stop - "while the player has lives", "while the enemy is still alive".
Now change it: add console.log("done, n is " + n); after the loop. Predict what n is once the loop has finished.
When n reaches 0, the question 0 > 0 is false, so 0 is never printed. Nobody got this one on the Check - the only answer anyone gave was 3210.
The same thing in C++
int n = 3;
while (n > 0) {
cout << n;
n = n - 1;
}CONCEPT 5The loop that never ends
If nothing inside a loop moves it toward its end, the question never becomes false, and the loop runs forever. It is the classic loop bug, and every programmer writes one sooner or later.
Now fix it: add one line inside the loop so it prints 0 to 4 and stops.
count is 0, so count < 5 is true, every single time. This page stopped it after 100,000 rounds. In a normal web page, the tab would freeze until you closed it.
CONCEPT 6Running totals
To add up as you go, make a variable before the loop and add to it inside the loop. This is Primer 1's score = score + 2, done once per round.
Now change it: move console.log(total); inside the loop, and run it again. Then move let total = 0; inside the loop too, and see what breaks.
0 + 3 is 3, then 3 + 4 is 7, then 7 + 5 is 12. If let total = 0 goes inside the loop, the total is wiped back to 0 every round. If it goes after the loop, it doesn't exist yet when the loop needs it.
CONCEPT 7An if inside a loop
A loop goes through every value. An if inside it picks out the ones you care about. Each round asks the question again, with that round's value.
Now change it: print every number from 1 to 10 except 4 and 5. You will need || or && from Primer 1 - this is exactly how you will dig the pit in the game.
The loop still goes round five times. The if just skips the printing when i > 3 is false. Nobody got this one on the Check.
CONCEPT 8Off by one
The commonest loop mistake isn't a loop that never ends. It is a loop that runs one time too many, or one too few. It is almost always the difference between < and <=, or starting at 0 versus 1.
When a loop is nearly right, check the first round and the last round. The middle usually takes care of itself.
Now change it: make it print Tile 1 to Tile 5. There are two different one-character fixes. Find both.
It starts at 1 and stops before 5, so you get 1, 2, 3, 4. The fixes: change < to <=, or change the 5 to a 6.