Programming in Dart: Control Flow & Collections

So far, you’ve learned how to control the flow of execution in your apps using the decision-making powers of if statements and the while loop.

In this episode, you’ll continue learning about flow control in Dart, using another loop known as the For Loop. A for loop is a little different than a while loop. A for loop requires that you provide three things. An iterator. An expression. And a changer. Here’s it works.

We first define a iterator - that is a variable that will change throughout the loop.

After the iterator, we provide a condition. Like the while loop. the condition will run only when it is true.

Finally, we change the value of the iterator. Typically, this is used to increment the value of the variable but you can do whatever operation you want to it with the idea being at some certain point, the loop’s expression will evaluate to false, allowing the loop to end.

Just don’t get to tricky with your changer value. You may run into a condition called an infinite loop. This is a case where your loop will never exit. Your program will seemingly be frozen since there’s no way exit the loop outside of stopping your program. Let’s play around with loops.

To get started, open up a browser and head on over to dartpad.dev. We’ll start by defining a loop to add all the numbers between one and ten. Let’s first start by defining our initial values.

var sum = 0;
const min = 1;
const max = 10;

We set up a sum variable as well as a min and a max. The min and max are constants because we won’t be changing them. Now lets write our loop. We start with the for keywords. Everything else goes inside of parenthesis.

for () 

The code we want to run goes in an a pair of exterior braces.

for () {

}

Now to define our loop. We’ll start by defining our iterator. In this case, we’ll use a variable called i. This is just a convention you’ll see all the time. The i just means iterator. We will set this to 1. You can really set it to anything you want. Typically, this is set to zero as you’ll discover in your upcoming challenge.

for (var i=1;) {

}

Now we define how long this loop will run for. Remember, like the while loop, when the expression evaluates to true, the loop will run. When it evaluates to false, it will end. In our case, we only want the loop to run when the iterator is greater or equal to the min value and less than an equal to the max value.

for (var i=1;i >= min && i <= max) {

}

Finally, we increment the iterator at the end of the loop.

for (var i=1;i >= min && i <= max; i += 1) {

}

That’s our loop! Now lets write the code that will numbers together.

sum += i;

In this case, we just added the iterator to our sum value. Okay, finally, let’s print out the result after the loop.

print('The total sum is $sum');

Now run the program. You’ll see we get the sum. Okay, what if we made a mistake and instead of incrementing the iterator, we decremented it? What do you think will happen? Let’s try it.

for (var i=1;i >= min && i <= max; i -= 1) {

You’ll notice that the loop runs only once - just like the while loop. When the condition proves to be negative, it exits the loop. What if we only checked the max condition?

for (var i=1;i <= max; i -= 1) {

What do you think will happen? Run the program. You’ll notice that nothing happens but also, the whole webpage is frozen. You can’t interact with anything. We’ve created an infinite loop. Some browsers will notice the hangup and allow you to terminate the loop, but others will be stuck looping forever. In such a case, you’ll need to close the tab.