Efficiently Coding with JavaScript: Understanding else if Statements

JavaScript: else if and coding efficiently

Learning Objectives By the end of this lecture, you should be able to: Describe how the JavaScript flow operates with if and else if statements Understand with examples the concept of being efficient in your coding

Cascading if statements: if, and else if The if / else examples we have been using so far have involved only two possible scenarios, that is, a situation that has only one of two possible results. For example: Pay the meter or not? Pay overtime or not? Qualified to vote or not? In the real world, we frequently have multiple possible scenarios we want to evaluate for. Example Assigning a grade: if the percent grade is 90 or above, assign A if grade is 80 or above, and less than 90, assign B if grade is 70 or above, and less than 80, assign C if grade is 60 or above, and less than 70, assign D if < 60 assign F 3

var percent, letterGrade; percent = document.getElementById('txtPctg').value; percent = parseFloat(percent); How it works: As soon as any one of the conditionals is evaluated as being TRUE, the JavaScript interpreter will execute the block that follows. if (percent>= 90) { letterGrade = "A"; } else if (percent>=80 && percent<90) { letterGrade = "B"; } else if (percent>=70 && percent<80) { letterGrade = "C"; } else if (percent>=60 && percent<70) { letterGrade = "D"; } else if (percent>=0 && percent<60) { letterGrade = "F"; } Once any of block has been executed, the program will skip ALL of the remaining else if statements. If there is an else statement at the end, that block will also be skipped. Note that there is a space between the word else and the word if : else if Remainder of the program continues .

Is an else block necessary? if (percent>=90) { letterGrade = "A"; } else if (percent>=80 && percent<90) { letterGrade = "B"; } else if (percent>=70 && percent<80) { letterGrade = "C"; } else if (percent>=60 && percent<70) { letterGrade = "D"; } else if (percent>=0 && percent<60) { letterGrade = "F"; } else { alert("Percent grade must be greater than 0."); } Sometimes we need or want an else block, and sometimes we do not. It depends on the situation. The else block gets executed ONLY if all of the prior logical expressions are false. However, the moment any block gets executed, flow will jump to the end of the entire block of if / else if / else statements (as discussed previously). Again, this includes the else block.

POP QUIZ: Is the second conditional necessary? if (percent>=90) { letterGrade = "A"; } else if (percent>=80 && percent<90) { letterGrade = "B"; } else if (percent>= 70 && percent<80) { letterGrade = "C"; } else if (percent>=60 && percent<70) { letterGrade = "D"; } else if (percent>=0 && percent<60) { letterGrade = "F"; } else { alert("Percent grade must be greater than 0."); } Look closely at the second conditional in each of the logical expressions. It turns out that they are not necessary. Can you figure out why? Consider the first else if block: The ONLY way we will have skipped the first logical expression at the top i.e. the one that says: if percent>=90 is if the percent is less than 90. Therefore, in the second block, we have no need to check to see if percent<90 we already know that it is less than 90 or we would have never reached this point! Similarly, in the third block, we do not need to check to see if percent<80. We know the percent must be less than 80 or we would not have reached this point.

More Efficient Version: if (percent>=90) { letterGrade = "A"; } else if (percent>=80) { letterGrade = "B"; } else if (percent>=70) { letterGrade = "C"; } else if (percent>=60) { letterGrade = "D"; } else if (percent>=0) { letterGrade = "F"; } else { alert("Percent grade must be greater than 0."). } As we have seen, the second conditional is not necessary. It is a waste both of the programmer s time, and the computer s resources. While the computer s time and memory to do the second conditional in each of these cases is very, very, very small, writing inefficient code is considered sloppy, and can add up quickly in large-scale applications. The version shown here is more efficient.

POP QUIZ: Who needs else if ??? if (percent>=90) { letterGrade = "A"; } Take a look at the code in this example. In this version, we have removed the else if statements, and have replaced all of them with individual if statements. if (percent>=80) { letterGrade = "B"; } if (percent>=70) { letterGrade = "C"; } Will the code work as expected? 1. If it does work, why or why not should the code be written in this manner? if (percent>=60) { letterGrade = "D"; } 1. if (percent>=0) { letterGrade = "F"; } if (percent<0) { alert("Percent grade must be greater than 0."). }

POP QUIZ: Who needs else if??? if (percent>=90) { letterGrade = "A"; } ANSWER: This version has a bug in it. if (percent>=80) { letterGrade = "B"; } Suppose that percent was 92. In this case, letterGradewould be assigned A . if (percent>=70) { letterGrade = "C"; } However, because the following blocks are not else if blocks, the computer (or, to put it more accurately, the JavaScript interpreter) will not skip them! if (percent>=60) { letterGrade = "D"; } if (percent>=0) { letterGrade = "F"; } In other words, the interpreter will execute the second if block and since percent (which was 92) is also greater than 80, letterGrade will be assigned a B . if (percent<0) { alert("Percent grade must be greater than 0."). } The same thing will happen for the remaining blocks. If you trace the code (as you could WELL be asked to do, say, on a final exam ..) you will see that at the end, letterGrade will be assigned a value of F .

POP QUIZ: How about now? Can we convert all of the else if statements, to individual if statements? if (percent>=90) { letterGrade = "A"; } if (percent>=80 && percent<90) { letterGrade = "B"; } ANSWER: In this case, the code will work properly. However, you should not do it! The reason is the very important concept of efficiency discussed earlier. Suppose as before, percent is holding a value of 92. In this case, letterGrade would be assigned a value of A. So far so good . However, the interpreter must now continue through and evaluate the logical expressions of ALL of the remaining if blocks even though we know that none of them will be True! This is a waste both of the programmer s time, and the computer s resources. Inefficient coding is, well, inefficient! (Plus you aren t as marketable!) if (percent>=70 && percent<80) { letterGrade = "C"; } if (percent>=60 && percent<70) { letterGrade = "D"; } if (percent>=0 && percent<60) { letterGrade = "F"; } if (percent<0) { alert("Percent grade must be greater than 0."); }

Whoa How Can I Keep Track of All of This? if (percent>=90) { letterGrade = "A"; } else if (percent>=80) { letterGrade = "B"; } else if (percent>=70) { letterGrade = "C"; } else if (percent>=60) { letterGrade = "D"; } else if (percent>=0) { letterGrade = "F"; } else { alert("Percent grade must be greater than 0."). } Don t worry. With time, you will start becoming more and more skilled at finding ways of making your code run faster and more efficiently. For purposes of this class, there is really only one requirement that I will ask of you: When you have a single block of related conditionals such as in our letterGrade example, do not use multiple if blocks as demonstrated previously. Instead group them together into an if and else if sequence as shown here.