1.3 Loops and Variables

In my opinion, loops are one of the most powerful concepts of computer science, thanks to how much work they can save us. Before we learn about loops, let’s first introduce the new terminology for this lesson, starting with abstraction. Abstraction is the concept of removing details from a process in order to focus on the more important components. One way that we apply abstraction to code is by using variables. Variables are values in our code that can change. For example, I could write code to say hello to the user like so:

alert("Hello Pete!");

But that is only useful for people named “Pete”. Would you want to code a different version of your program for every name in the world? I don’t think so. If we can abstract their name into a variable, then prompt the user to enter their name, our program becomes useful for anyone!

var name = input("What is your name?");
alert("Hello " + name + "!");

This is JavaScript code that will prompt the user to enter their name, then respond with an alert box saying “Hello {your name}!”, where “{your name}” is replaced with whatever the user entered. Now we have abstracted the detail of the user’s name into a variable which allows it to be different each time our program runs, depending on the user’s input.

If you think back to 1.2 Introduction to Snap, you’ll recall that our code became pretty repetitive. Let’s take a look at how we can use loops to improve this.

For loops

A loop is a block of code that can be executed multiple times. The first type of loop that we’ll learn about is the ‘for loop’, which has the following structure:

for 1 to 10
... execute this code

A for loop uses a variable, often called a ‘counter’, that increases by 1 each time the loop executes. It will keep executing until the end condition is reached. For example, if the loop is for 1 to 10, the counter starts at 1 and increases by 1 each time the loop runs, and the for loop will end after the loop has run 10 times. After the loop ends, your program will move on to the next block of code.

While loops

Another type of loop is the ‘while loop’, which executes a block of code while a condition remains true. We’ll discuss this further when we explain conditionals in a future lesson.

Code exercise

Now we’ll apply what we’ve learned about loops to improve our code from the previous lesson.

  1. Select the Control category of blocks.
  2. From the list of yellow blocks, drag the block into the script pane that says “for i = 1 to 10”. This is a for loop, but right now the inside of the loop is an empty block of code, so it won’t do anything. Let’s fix that!
  3. Select the Motion category of blocks.
  4. From the blue blocks that are displayed, drag the “Move 10 steps” block inside the ‘for loop’ block.
  5. Click your script in the script pane to run your code. You should see your sprite on the stage move forward. It will appear to have only moved once, but what happened is the for loop executed 10 times, each time doing a “Move 10 steps”. It just happened so quickly that it looked like one move. Let’s add another block of code so the loop will wait each time it moves, giving us more time to observe.
  6. In the Control category of blocks, find the “wait 1 secs” block and drag it inside your for loop, but after the “Move 10 steps” block.
  7. Click your script in the script pane to run your code again. You should see your sprite on the stage move forward 10 steps, wait for 1 second, move again, wait again and so on until it has done this 10 times. Congratulations, you just coded your first ‘for loop’!
  8. Feel free to experiment with the code further before moving on. Remember that ‘i’ is a variable, in this case it’s used as a counter in a ‘for loop’. It’s common for a loop’s counter to start at 1, but as you see, you could change it to loop from 5 to 10, or 10 to 100, etc.
  9. If you like, you can Save this project to your Cloud account and name it “1.3 Loops”.