Control Flow In Javascript: Using IF And ELSE IF Statements

Let’s imagine that your girlfriend wants you to buy her a toothpaste and then she tells you “When you get to the mall, if Colgate is 2000 or less, buy it; but, if it is not, then buy Sensodyne.” What she is basically doing at the moment is laying down the conditions which have to be met (or a step-by-step guide which must be followed) before you would buy her the toothpaste. This is the basic concept of control flow.

Control flow refers to the order in which programs execute statements (instructions or commands) in a script. More often than not, when writing your code, there are times when you want different actions to be performed given different circumstances. This is where control flow comes into play. Control flow determines how the logic of your code would flow (or run), it is there to help you tackle uncertainty. This is achieved using conditionals. Conditionals are Booleans, meaning they operate on a true or false basis. There are different conditionals, and each evaluates conditions in its own way. For example, one way that conditional statements work is by using the keyword if to evaluate a statement. This is known as the if statement. The syntax for this is:

if ( // the condition to check for) {

                // The code to run

} else {

                // alternative code to run

}

For example, if you were to replicate the toothpaste example scenario above in your code, your code would have to run an evaluation to determine whether you should buy a toothpaste and, if yes, which one to buy. Let’s say, the code should first check if Colgate is 2000 or less and then, if it is, the code should output “Buy Colgate.”; if Colgate is more than 2000, then the code should output “Buy Sensodyne.” For this, you have to use the if conditional to control the flow of your code.

if ( colgate <= 2000) {

                alert (“Buy Colgate.”);

} else {

                alert (“Buy Sensodyne.”);

}

This, in programming, is what is known as control flow. We are essentially controlling the flow of our code depending on the current conditions. 

There is also the else if conditional. This operates just like the if conditional but the striking difference between this and the simple if conditional is that, using the if conditional, you could only have one alternative code to run, while, using the else if conditional, you could have as many alternatives as you wish to run. This is the syntax for the else if conditional:

if ( // the first condition to check for ) {

                // the code to run

} else if ( // the second condition to check for if the first condition fails ) {

                // alternative code to run

} else {

                // alternative code to run if both conditions above are false

}

Following the toothpaste scenario, let’s take it a step further. Now, your girlfriend says “When you get to the mall, if Colgate is 2000 or less, buy it; if it is not, check if Sensodyne 2000 or less as well; if it is, buy Sensodyne but, if it it not as well, then don’t buy toothpaste at all.” We are assuming that colgate and sensodyne are variables that have already been declared and initialized. If we were to represent that instruction in code using the else if conditional, this is how we would do that:

if ( colgate <= 2000) {

                alert (“Buy Colgate.”);

} else if ( sensodyne <= 2000 ) {

                alert (“Buy Sensodyne”);

} else {

                alert ( “Don’t buy toothpaste!” );

}

Now, it is also possible to test for multiple conditions at the same time. So, following the above example, your girlfriend could just have easily said “If Colgate is 2000 or less and Sensodyne is 1500 or less, then buy both; otherwise just buy only Colgate” To achieve that in our code, we would have to combine the conditions to evaluate in the parenthesis. This is how our code would look:

if ( colgate <= 2000 && sensodyne <= 1500 ) {

                alert (“Buy both Colgate and Sensodyne.”);

} else {

                alert (“Buy only Colgate.”);

}

In the above example, we used the and operator (&&) to combine the conditions to evaluate for. So, in this case, both conditions have to evaluate to true in order for the code following to run. If one or both conditions evaluate to false, then the alternative code (which is the else code) would run. Using a combination of conditions, you could basically evaluate for anything provided you get the syntax right. You should know that it is possible to nest if statements within another if statement. By the way, I assume you are familiar with javascript operators.

When working with conditionals, it is advisable to first set up a flow chart. A flow chart translates written directional logic into pictorial form. This helps to visually simplify the logic process (how the code should flow). draw.io is a website that helps with understanding and drawing up your own flow chart. At the end of the day, the code is easy but the logic is the part you’ve got to get right first. There are other ways to control the flow of your code but I guess we would talk about that some other time. Consider this an introductory note.

P.S: If you have any feedback on this piece, I'd love to hear it.