Break and continue loops

- [Instructor] Working with loops, you'll find situations where it's necessary to perform special operations, like stopping the loop early and moving on if a certain condition is met, or stopping the current iteration of a loop, and move on to the next iteration, if a certain condition is met. For these situations, we have the break and continue keywords. Break, terminates the current loop and jumps to the next statement in the script, continue, terminates the current iteration of a loop, jumps back up, and runs the next iteration. To understand these key words, we need to see them in practical examples.

So in the Exercise Files for this movie, 09_03, you have two script files, chanceScript, which demonstrates break, and primeScript, which demonstrates continue. Let's look at chanceScript and break first. Here we have the beginnings of a game of chance. The premise is we set a min and max value, then have the script find a random number between these two values, and tell us how many rounds it has to run through the loop before hitting a specific number, test number. From the top, this is all pretty straight forward.

We define the min and max values and the test number we want to find. Then we setup var i = 1, this is just used to count how many rounds we're using. Then we setup an infinite while loop. You can see the condition here is just a max number which will always be true, and that means, unless we do something inside this while loop, it'll just run until the browser is closed. Inside the while loop, we set up a let named randomValue, and here we used a Math object and the two methods floor() and random() to generate a random number between zero and 36.

Then, we console.log out the word Round, i, + randomValue, that gives us, Round 89, is 23, Round 90, is 18, and so on and so on and so on, before we increment i. This loop will run indefinitely until we hit this if statement. If randomValue is the same as testNumber, which is defined up here, then we encounter the break keyword. The break keyword immediately terminates the while loop and takes us down to the next statement, which is this one, console.log("The script went " + i + " rounds before finding " + testNumber + "."); That's what you see here at the bottom.

If we go to the browser and reload this, you'll see it's different every time, two rounds, 53 rounds, 40 rounds, 22 rounds, 16 rounds, 81 rounds, and so on and so on. There are two important things worth noting about the script. First, it demonstrates how loops run in the script. When the browser encounters a loop, it'll just run the loop until the condition is met, before it runs the next statement, so that means if we create a loop that has no endpoint we need to provide some way for the browser to get out of the loop, otherwise, we'll just get stuck here until we shut the browser down.

So in this case, the break keyword is absolutely necessary. The second thing is, once we encounter the break keyword, it doesn't matter what comes after. The break keyword, breaks the code exactly where it's placed and then skips directly to the next statement in the code. That means, once the browser hits break, it doesn't console.log out "Round " + i +": " + randomValue, and increment i, it just skips straight out of the loop down to console.log("The script went " + i + " rounds before finding " + testNumber + "."). This is important because it allows you to place additional statements underneath break and then we can skip them, once break happens.

To see the second example, we first have to go to index.html and change the call to the JavaScript file from chanceScript, to primeScript. PrimeScript helps us find what numbers between one and 100 are prime numbers, meaning they can only be divided by themselves or 100. The actual functionality here of detecting whether a number is a prime number or not is handled by this function up here, called primeTest. It takes a value from one to 100, then sets up a let called isPrime, that's set to true by default, that means we're assuming every number is a prime number.

Then, we create a for loop inside the function, that starts at the number two, this is the first number we want to test to see if we can divide by, then increments up until we meet the number, which is defined in the test value. So for instance, if we're testing the number five, we'll increment up to number five, and then we run a standard incrementation, and then inside the for loop we say, if the testValue can be divided by i, which is the current increment, and that equals zero, it means this is not a prime number, because it means we can divide the number by something other than itself.

If on the other hand, this condition never happens, it means we have a prime number. Regardless of the outcome, isPrime is returned, so when we call primeTest, with a value, we get either true or false in return. Then we get to the actual for loop, that loops us through the numbers from one to 100. Here, we start by setting up a let i = 2, that's the first number we want to test, then we keep iterating the for loop until we hit the CEILING number, which is defined up here as a constant, that is the number 100, that means this loop will run from one to 100.

Then inside the loop, we first setup a new let with a named result that calls out primeTest and passes a current increment number up to the primeTest function. The function will return either true or false, and then we console.log out i, the current iteration is a prime number:, and then the result, either true or false. The output of this code is seen over here in the browser. Right now, we are counting from two, all the way to 100, and we can see for each number, whether they are true or false.

That's great, but it gives us way more information than we need. So I'm going to use the continue keyword, to only output statements that are true, meaning we only get the prime numbers. I'll do that in between let result and the console logs, so here I'll say if, and I want to find all situations where the number is not a prime number, so I'll say result == false, then continue, and over in the browser, you see the numbers changed.

Now, when we run this for loop here, anytime we encounter a number that is not a prime number, we continue, meaning we skip straight up to the top of the for loop again, without console logging out anything. It also means we can change the output here to just say, number is a prime number, because all the numbers that get console logged out will be prime numbers. Just like with break, once the browser hits continue, it skips straight up, ignoring the rest of the code block inside the loop.

The break and continue keywords provide simple syntax for complex operations within loops and become useful when you start working with advanced loops that have complex conditions. The rule of thumb here is, anytime you need to terminate a loop if something specific happens, use break. Anytime you need to avoid a certain condition within a loop, use continue.