Hi, everybody. Today, we're going to be talking about Flow of Control. Flow of control is just a fancy term for the fact that sometimes we want to be able to control which code our computer actually executes, instead of doing everything we're going to be putting decision points into our code. When your computer comes across them, it can kinda decide at the fly whether or not you should run it. This is a great way to add a little bit of variety and interactivity to your program. It's also a way that you can respond to what we call good or bad user input. And I'll show you some examples today, in the lecture. Finally, it also helps us avoid potential errors that the user might be putting in. This isn't even something always that they do but that we've coded ourselves. So let's talk about flow-of-control in a little bit more of a technical term. When you design your code, it's very important that you break your program down into blocks. Blocks are just another fancy word of saying, here are some statements we want to always put together. That way, when your program runs, really efficient algorithms, which is another word for the steps your programs take, can execute only those blocks that they need to execute. And again, the execution of these blocks is where we come up with the term flow-of-control. So, we've actually had decision points before in our program where we might not have realized it. So, we've actually written decision points in before when we wrote for loops. You might not have realized it because it wasn't very specific. But we basically had the idea that hey, have we each reached the end of the array? If we have we should stop adding numbers to figure out the average. If we haven't reached the end of the array, then the computer should keep going and add that next number. So there are many different ways for changing the flow of control. Some were kinda hidden and we didn't even know they were happening. And some are very explicit, and these are the ones we're gonna talk about now. One of the most common control structures in any programming language is the if statement. With an if statement, it evaluates a boolean expression and then says, hm, is it true? Or is it false? If it's true, then we want to go ahead and execute the code that comes next. If it's false, then we should skip it. So how we would write this code is the actual word if, inside parenthesis we would put in a boolean-expression. And again, those are the expressions that are always going to return true or false. So is A greater than B? Does C equal D? After the computer checks that expression, we give it a list of steps to perform. So let's talk about the syntax and logic of the if statement. One of the things I said, is that you need to realize, that the word if is a reserved word. And reserved words and programming have a very specific meaning and you're not allowed to use them for variables and different things like that. The next part that's very important is that you have to put in these parentheses. If you don't pt in the parentheses, your program won't work. Inside the parentheses you're going to put your boolean expression. Something that's going to evaluate to either true or false. So we're going to see a lot of greater than or equal to or equal equal, different things we've talked about earlier. Finally, after the if statement, we're going to see the actual statement that we want to perform all by itself. Now in this example I didn't include those kinda curly brackets that you might often see. So something along the lines of here. These curly brackets say, don't execute just one statement, execute a whole bunch of them. Each one is a statement followed by semicolon. So we'll talk about variations on this simple syntax and logic as we go on. Those curly blocks I added in the previous slide. These curly blocks are what tell JavaScript that these statements should be considered a block, or a single entity. It's really kind of cool, because when you do this, other programmers can look at your code and realize, hey. That's not really a single statement. It's something that needs to be done together. Now, when you do blocks of code, it's very common to indent them together or move them all over a little bit so they all line up. It's not required, but you're going to see most people do it, because it makes your code a lot easier to read. It's a lot easier to see that there are six or seven lines of code that are all along the same line, then to necessarily always be looking for these curly blocks. So, let's look at this with a little bit of action and animation added to it. The first thing we're going to do, is evaluate that condition. If it's true, go ahead and execute either a single statement, or an entire block of statements. But if that condition is false, I don't want you to do all this. This should not be done. Instead, jump all the way down, and continue on with the rest of the program. So, make sure that makes sense to you, that an if statement doesn't make you skip everything that comes afterwards, it only skips certain blocks if it's true. Now, let's go ahead and do two examples with real code. So let's look at this example, over here. In the code that I have, I've declared a variable called name, right here. And I've decided that if somebody enters their name, I'm going to say hello to them. But if they don't enter anything, I don't want to say hello at all. So let's see what happens when I enter in Colleen. [SOUND] Look down here. I have, Hello Colleen shows up, all right. How that happened is that I went in here and I added my if statement, I said if that name, if the length of that name doesn't equal zero which means someone actually types something in, go ahead and write my name and that worked great. But let's see what happens if I put in nothing. We have the same prompt but I'm gonna just hit OK. In this case the program didn't crash or anything along that line, it just doesn't have any output at all. So that was a very simple example. Let's move on to another that we've seen before. In the example where we figured out the average in an array of numbers, we were very straight forward. We went in and we said here's all of our numbers. Go ahead and find out the average first. Here's where we didn't really think about every possible situation, right here. At the very end we say find out the average by adding up all the numbers and then dividing by the numbers there were. However, in computer science, it's very important that you check and make sure that you never divide by zero. So if I were to change my code right here and get rid of all the numbers so that we have an empty array, let's see what happens. Down here, I've got instead of 83 or something like that, I have something called NaN, or not a number. That would really freak people out if they were on your website and they saw something like that. It would be much better if instead we gave them some sort of idea that oh, it's okay, we're just not gonna do the average. At the very least, we should get rid of this kind of weird not a number. How are we going to do that? We need to write an if statement. In the code I have here, called array average with zero, I took the same code we had before, but I added an if statement. And that if statement says, oh, you know what, before you bother finding the average, before you do any of that, I want you to check the length of that array and make sure that it's greater than zero. So my code still works right now, when I have these four simple numbers. But, it's also going to work when I delete the ones that are in there. So in this case, now you can see that instead of having not a number, we have just a blank screen. Now, it might be, you might be thinking, I''m not sure blank screen is such a great idea. Don't worry, we're gonna handle that as well when we talk about the else that can go along with the if. So how do we do that? How do we add a second option to your code? Well an else can be added to an if statement to make we calling, an if-else statement. And in this case it looks very similar, the only difference is that we have to include the word else and there are no parentheses, all right. You never want the parentheses after the else portion of the statement. When you have this if else statement how it works is, if the condition is true then statement one is executed. If the condition is false then statement two is executed. One or the other will be executed, but not both. Again, let's kind of at this in an animated version. Were going to evaluate the condition first. If its true go to statement one, if its false do statement or statements two and then you know what just keep going. So lets look back at our examples really quick with an added else. So I've gone back to our JavaScript if statement with the name and I've added an else. And all it does is say, hey. That person didn't enter their name. Let's go ahead and send them a little message. So now, if I put in my name, it still works as we expected. Hello Colleen. But, if I leave it blank, instead of doing nothing, it just sends out a little message called, feeling shy? We can do the same thing with our average. Where here instead of just doing nothing, instead of reading in those numbers and acting like nothing happened, if it's an empty array. We're going to go ahead and add a little message that says, you know what, there is an empty array. So I didn't do anything. Let's make sure I didn't break my code. Put in a 0 array. And you can see that instead of getting not a number, instead of getting nothing, we get the message Empty Array. I can't stress how important it is for you to play with this code. Make sure that you use the if to specify that single line of code, or that block of code, that you want to be executed. Run this over and over again, find out where you tend to make your different little errors, either forgetting the parentheses, forgetting the curling blocks, doing things like that. Next, then add your else statement to specify what you want to do if the condition is false. It's really easy to watch these videos and nod along and think, yeah, I've got it, I've got it. I can't stress how important it is for you to stop, go in, play with the code, break the code, see what happened. I rarely write code correctly the first time, so I don't want you to feel bad if as you start adding these more dynamic and advanced things to your code, if you run into a few problems. That just means you're learning. So good luck.
