Counting with Loops explainer


#1

The aim of this puzzle: Create code that counts from 0 to 9.
Walkthrough of the solution: This puzzle use a for loop that needs three elements to control how it loops (this is different than other for loops you may have seen that will simply iterate through an array or string of letters). The left side of the loop controls the starting point; in this case, you’ll want to start at 0. The middle (between the two semi-colons ; ) controls when the looping should stop. If True, it keeps looping, if False it stops. For this puzzle we want it to count to 9 so the looping should keep going while i is less than 10. The right side of the for loop controls how much to increase the loop by each time; since we are counting we want this to increase by 1. The final element you need to adjust is to print out i, rather than hello, so that you’re printing out the loop’s counting.
Sample code solution:
(Tap below to reveal)

for (var i = 0; i < 10; i = i + 1) {
  print(i);
}

JavaScript Concepts: Binary Expression (+), Code Block (for loop), Calling Functions, Identifiers, Loops, Variable Declaration
Grasshopper Concepts: print()


#2

I need a more detailed help. This lesson has had me stuck for days.


#3

Hi @DARKANON,

Sorry you’ve been stuck on this lesson — loops like this can be a bit tricky. Perhaps it will help if I explain what each section of the for loop is doing. Let’s use the example for (var i = 0; i < 10; i = i + 1) {print(i)}, we can divide how this for loop works into three parts:

  1. The first part is var i = 0. This declares the variable i and sets its initial value to 0.
  2. The second part is i < 10. This is the test; the code inside the curly brackets will keep repeating itself until this statement is no longer true. In this case, the check will be false when i is greater than or equal to 10.
  3. The third part is i = i + 1. This adds to the i value by one after each time the code inside the curly brackets runs.

So, the code for (var i = 0; i < 10; i = i + 1) {print(i)} will first print 0, since i is initially set to 0. i is then increased by 1, and since 1 is less than 10 the code inside the curly brackets runs again printing out 1. This keeps happening until i is 10, which is not less than 10, so the loop stops and 10 is never printed out (but 0 through 9 is).

Hopefully this helps!
–Heather


#4

Hi, Im actually typing it right and it doesn’t seem to work… Maybe I’m missing something very small.


#5

Hi
I am putting the equation in exactly as it is shown here but I just keep getting a notification saying that the loop is over 500. Am I missing somethin


#6

Hi @Daniel_Velazquez,

Could you take a screenshot of your code and share it here (or via our support alias grasshopper-support@google.com)? It’s really easy to miss a small element in this puzzle, so if I can have a look I might be able to identify the issue.

Thanks!
Heather


#7

Hi @laLa,

Mmm — when you see that message it means there is something in your loop that is probably telling the computer to make it run forever (or a very long time). Could you take a screenshot of your code and share it here? (or send it to our support alias grasshopper-support@google.com). That way I can take a look to see if I can spot the issue.

Thanks!
Heather


#8

This Level was incredibly difficult for me. For some reason I couldn’t figure out what I was doing wrong. Thankfully this support forum exists or I believe I’d still be stuck there.


#9

Thank you so much for replying. I actually got it already, and since I have
you here just wanted to say that I have been enjoying the app and learning
what I can about coding.


#10


#11

Oh my!!! Just realized I was missing the =


#12

Here’s another in-depth explanation if anyone is looking for one:

Counting with Loops is the first puzzle to use this kind of for loop which is a little different from the for...of loop. Inside the parentheses of the for loop are three statements separated by semicolons, just like you see at the end of a normal line of code (;). Let’s look at the starter code and see what each part means – to get back to the starter code, press the refresh/circular arrows at the top of the keyboard. The starter code should look like this:

for (var i = 0; i < 3; i = i + 1) {
  print('hello');
}

The three parts in the parentheses control how many times the code in the curly brackets will run. In this case print('hello') will run every time through loop.

Part 1: Initialization
var i = 0;
The very first time the for loop runs, it will run this first part of code. This creates a new variable just for the loop. That variable’s job is to keep track of how many times the loop has run. Since we haven’t run the code inside the curly brackets yet, we start with i = 0. Then, this section is done – it only runs one time – right when you start the for loop.

Part 2: Test
i < 3;
This second part is run every time, right before the you enter the loop. This piece is used to check if you should run the code inside the curly brackets. It’s just like the check you see inside of an if statement. If the check is true, then you run the inside of the loop – print(‘hello’); if it’s false, then the for loop is done and you move on to the next block of code if there is any. This check looks at the value of the variable i which is the variable that is keeping track of how many loops we’ve run. If i is less than 3, then we enter the loop, otherwise, the loop is complete.

Part 3: Update
i = i + 1;
The third part of the for loop controller is used to update the value of the counter variable (i). This code gets run at the very end of the loop – after the code in the curly brackets, and right before going back to the beginning of the loop to run another check. This update happens after every time you finish the code in the brackets. Since we want i to go up by one each time we run the loop, we take i + 1 and store that as the new value for i.

Instead of printing ‘hello’ in the loop, we can print out the value of the counter variable like this: print(i);
Now your code should look like this:

for (var i = 0; i < 3; i = i + 1) {
  print(i);
}

This code will print out:

0
1
2

This is because the counter variable starts at 0 and the update runs after the insides of the loop. Right after the loop prints out “2”, the update code runs which makes i = 3. Then the loop runs the check (i < 3) to see if it should run the code in the brackets again. But since 3 < 3 isn’t true, the loop is done.

In this puzzle, you want to make the code output:

0
1
2
3
4
5
6
7
8
9

The way to do this is to change the controls of the loop. We already know to have the code in the curly brackets print out i instead of ‘hello’. Now we just need to think of what else to change.
for (var i = 0; i < 3; i = i + 1) {

We were able to print out the first three numbers (0, 1, 2) by just changing print('hello') to print(i). But we need the loop to keep going all the way to 9. When we have i < 3, we stop one number before 3. Since we want to print up to 9, we should make our test be one number bigger than 9, which is i < 10.

Notice, we only need a single for loop to solve this puzzle.

–Frankie


#13

I’m confused. From what I can tell, I’m coding this properly, but it’s only printing “i” 10 times instead of counting up. Can anyone point out what I’m doing wrong?


#14

Hey @Kikay,

That is a great question and an easy mistake to make!

TL;DR: print('i') is different than print(i).

The quote marks around the 'i' tell the computer “this is a string of letter(s), please print out exactly what this string of letter(s) contains”. Thats how you end up with the letter 'i' printed multiple times: each time the loop repeats an 'i' is printed.

print(i) doesn’t have quotes around the letter i, so the computer instead looks for an variable called i. In the for loop you define a new variable called i which is holding an initial value of 0. Each time the loop repeats, the value for i is increased by one (i = i + 1). So, when the computer sees print(i), instead of printing out the letter 'i', it recognizes that i is variable and prints out the number that i is holding.

Try replacing the string 'i' with the identifier/key i on your keyboard, and you should be able to solve this puzzle.

Thanks for flagging this easy to make mistake — we’ll be adding in feedback to help out when other Grasshopper users encounter this same problem!

Heather :slight_smile:


#15

The instructions are that we should stop when the letter ‘i’ is 10 and print ‘i’. My solution, which prints correctly, was to check for ‘i < 11’. This stops the loop when i = 10 but it was not recognized as a correct answer. Why?


#16

Hi @Charlie_Brent,

Great question, and something even experienced programmers often trip up on!

For loops check the value of i (or whatever the looping variable is called) before running the code inside the curly brackets.

So, if the test is i < 10, the loop checks that i is less than 10 before running the code. The looping variable is updated after the code in the curly brackets runs. This means if i is 9, print(i) will print out 9, then be added to by one, making it 10.

The check to keep looping starts at the beginning of the next loop. i is now 10, but since 10 is not less than 10 (i.e. i < 10 is not longer true), the loop stops before it gets to print out 10.

Hope this helps your understanding,
H :slight_smile:


#17

I got the lesson but I’m confused about something.

A for loop goes down the list and executes each line of code, correct?

So on this problem, it sets the variable to =0, then establishes a true false scenario to cut the loop, then gives it an action to execute, var+1, then print variable…

But shouldn’t it loop back around and reset the variable to 0 again, making it a non stop loop of 1’s? What is it about the code that makes it ignore the initial x=0 after the first time, and not eternally reset it? Is it just a thing in java that (set var);(if);(action that’s looped)?


#18

This is a really good question, @Johnson41996!

The answer may not be very satisfying; that’s just how classic for loops work. It only looks at the variable declaration at the very beginning. Once it knows the looping variable’s name and it’s initial value it doesn’t look at it again. The test (the middle part) is checked at the start of each loop, and the update (the right-side) happens at the end of each loop.

Hoping this helps with your understanding!
H :slight_smile:


#19

It happened to me, instead of typing i that is print (i), I’ve created A string and placed ‘i’ as print (‘i’). Such a stupid mistake.


#20

@Sathish_Reddy — not a stupid mistake! Little elements like this trip up the best programmers, so don’t feel bad about missing it initially.

H :slight_smile: