JavaScript if else statements for when all else fails

Life is full of conditional statements. If your homework is done you can go out and play, else you’re in trouble young man! If its good weather we’re going to the beach today, else if it’s raining we’re staying home. In fact, we based most of our choices on if then else statements. So it’s no wonder programmers rely on conditional statement to write logical useful code. Actually, I would say that conditional statements like if then else, for and while loops form the backbone of most programming, irrespective of which language you choose as your programming language.

JavaScript is no different. The if else conditional statement in JavaScript allows the programmer to write code that performs different functions based on various possibilities, in the same way that we perform actions based on different conditions.

This tutorial will explain how the “if” and “if else” statements are used in JavaScript to make web applications more functional and useful. This is a basic tutorial but to understand the tutorial and to apply the concepts, a basic understanding of JavaScript is required. For a basic course on the principle of JavaScript and how to apply them as well as how to implement JavaScript on your website, udemy offers a JavaScript prep course.

How the JavaScript if statement works

The if statement is the foundation for the if else statement as well as the “if, else if” statement. The “if” statement allows the programmer to execute a set of instructions if a condition is true. If the condition is false, then the code will not be executed.

The syntax of the statement can be expressed as follows:

When the program reaches the if statement, it evaluates whether the condition is true. If the condition is true the program moves onto the code block within the brackets. If not, the program moves onto the next set of code within the program.

If we use our original example of homework we could write a program to reward our young boy, if he’d completed his homework.

To write the code we would first need to define a variable. If you don’t know how to define a variable in JavaScript, then a course like JavaScript made easy from udemy will teach you how to define variables as well as how to can use them. Once we have defined the variable we can implement the if statement to reward our boy if his homework is done. The pseudo code to do this would look a lot like this:

The “confirm” code in the above creates a popup box which asks the boy to confirm if his homework is done. If he answers ok, then the answer is recorded as true and he gets the reward. But what happens if he says no? This is where the else part of the “if else” statement comes into play.

The Syntax of the if else statement

The syntax of the “if else” statement builds on the above syntax and can be expressed as follows:

So to set up a system of both reward and punishment for homework done or not done the code would like something like this:

The above code would ask for confirmation that homework was done. If it was then it would have the following output:

If not the output would be

The above code also contains no conditions for the else statement. This means that the program will perform either the statement which is contained within the if statement or the code contained within the else statement. But you could add a condition to the else statement in which case the program will use that condition to determine whether it should perform the else statement code or move on.

The above code was also based on using the true and false Boolean values for the if statement. But the if statement can be expressed using other operators as well. Not only can it be expressed using all of the other logical program operators, but it can also be expressed as a compound statement.

Let us say for example, that not only must our boy have his homework done, but that his playtime will depend on the grade he got for the test he did as well. If he got an “A” for his test and his homework is complete then he can go out and play for the rest of the afternoon. If he got a “B” for the test and his homework is done then he can only go and play for two hours.

To write this set of code we need to write a compound if else statement using Boolean logic to test if both conditions are true.

How to use AND, OR in the JavaScript IF statement

As mentioned above, the condition for the if statement need not be a single variable but can consist of a compound condition. To write a compound condition you need to decide how the condition would operate to determine whether you use the AND or the OR operators in the condition.

To allow our boy to play the rest of the afternoon if his homework is done AND he got an “A” on his test we would use the AND operator. The AND operator is expressed as && so to write the above as code, the if statement would look like this:

But && is not the only operator you could use to set up the compound statement. Let us assume that instead of requiring that our boy has done his homework AND that he got an “A” grade, that he needs an “A” OR if his homework is done then he can go play. In this case we want either condition to be true for him to go out and play. The operator used to check if this statement is true is the OR operator and is expressed as ||.

Using NOT in the if statement

JavaScript also has another logical operator which can be used in the if statement. So far we have tested a condition to see if it is true. But JavaScript has a really simple way of toggling between true and false. By adding an ! to any condition you change the condition from being true to false.

Once again instead of having both his homework done AND an “A” or his homework done OR and “A”, let’s say he had his homework done and that he had NOT received a “E” on the test. To test whether a condition is true for one value but NOT true for another you can use the !

This statement will test whether our boy has his homework done or whether he got any grade other than an “E” for his test. To toggle the condition, it needs to be placed in its own set of brackets. For more programming syntax and advanced JavaScript programming udemy offer a JavaScript fundamentals course that will teach you how to define variables and use JavaScript syntax correctly.

By toggling the value from true to false and creating compound conditions, the if statement becomes a powerful way to create extremely complex conditions and code segments.

The code would then check both conditions before it executed the statement. So it would ask for confirmation that the homework was done and also check the grade before it gave the output. But what if our boy’s homework wasn’t done? The above code would just skip past the instructions and move on to the next set of code. To add another if statement to the above code we need to use the else if statement.

Creating the else if statement

The else if statement is used between the if and final else statements to allow an almost unlimited number of conditions to the if else statement. I say almost unlimited because it would be limited to the number of conditions you actually have the time and imagination to define.

Most choices in programming, and in fact most choices in life, are not based on either or type situations but rather on a number of possibilities. Using the example above, it is possible that our boy’s homework is done and that he got one of five possible grades for his test. But it is also possible that his homework is not done at all. As programmers we can create instructions for all of these possibilities using the if, else if, else statements.

The syntax of the if, else if, else statement is builds on the above statements and can be expressed as follows:

Now we can write code that includes a number of options that we can test for in our “boy” example. We can write an option for whether his homework is done or not as well as assigning play time based on the grades he received for his test.

The conditions we can create based on the if, else if, else statement become almost limitless in application. Take a look at the code below:

The above scenario would test for various conditions and allow our boy different play times or no play time at all, depending on the conditions. If the boy got an “A” on his test he could go out and play whether his homework was done or not. If he got a “B” he could only go out and play for two hours assuming his homework was also done of course. If his homework was done and he got a “C” then he could play for an hour. For a “D” he would get half an hour of playtime but the last statement would check and if he got less than a “D” for his test he would not be allowed to play at all!

It is important to note that the statement begins with the “if” statement followed by a number of “else if” statements and is concluded using the “else” statement.

The if statement is based on a predefined variable which makes the if statement even more powerful since the variable itself can be defined as a number of different things too. Let us take a look at a final example.

Suppose you have a website and you have customers paying you to display a link to their website. If you have one customer then hard coding the address into the HTML is no problem, but if you had three customers for example, then you would want the program to randomly display one of the banners each time the page was loaded. This would ensure that each customer would receive the same amount of advertising on your site. Take a look at the following code which you could use to achieve that:

The above code would randomly display one of three banners, depending on a random number created by the program itself. The advanced syntax and concepts in the code above are not the scope of this tutorial, but if you are excited about learning to program in JavaScript then udemy offer a number of excellent advanced JavaScript programming courses like JavaScript with BackboneJS and Bootstrap CSS – Advanced which will teach you how to program powerful applications based on JavaScript.

I hope you are excited about how powerful the JavaScript if statement can be. The if statement is used in most code and can even be used as a way to catch errors before they occur or check user input to ensure the input or data makes sense before it is sent or uploaded.