Controlling Program Flow - Advanced JavaScript - JavaScript, 20 Lessons to Successful Web Development (2015)

JavaScript, 20 Lessons to Successful Web Development (2015)

PART II Advanced JavaScript

LESSON 10 Controlling Program Flow

image

To view the accompanying video for this lesson, please visit mhprofessional.com/nixonjavascript/.

Having reached this point in the book, you’ve actually already learned the vast majority of JavaScript. You should understand how to incorporate it into a web page; the syntax to use; handling numeric variables, strings, and arrays; using operators in expressions according to their associativity; and you’ve even learned the basics of handling program flow control using the if() and else keywords.

In this lesson you consolidate your knowledge of the latter so that you can precisely control the flow of program execution.

The if() Statement

You’ve already seen this statement in use a few times, but only with single-line statements, so here’s the full syntax of an if() statement:

image

In this example expression can be any expression at all created using numbers, strings, variables, objects, and operators. The result of the expression must be a Boolean value that can be either true or false, such as if (MyVar > 7), and so on.

The curly braces encapsulate the code that must be executed upon the expression evaluating to true, and there can be none, one, or many statements.

Omitting the Braces

To enable you to create short and simple if() statements without having to use braces, they can be omitted if only one statement is to be executed upon the expression being true, like this:

if (Time < 12) document.write(′Good morning′)

If the code to execute is quite long (so that it might wrap to the following line), you may wish to start it on the following line, but if you do so, because no curly braces are being used to encapsulate the statement, it’s best to indent the statement by a few spaces or a tab, so that it clearly belongs to the if() statement, like this:

image

Indeed, if you have a really long statement to execute, it can also be a good idea to split it over several lines at suitable points, like this:

image

Here I have split the output into three parts by breaking it into three strings, which are displayed one after the other using + operators. I also further indented the follow-on lines to clearly indicate that they belong to the document.write() call.

However, in my view this has become a borderline case where you might be better advised to encapsulate the statement within curly braces, because they will ensure there is no ambiguity, and you won’t have to worry about the wrapping of long lines diminishing the code readability, like this:

image

Some program editors will automatically indent wrapped-around lines for you (based on the indent at the start of the line), making the code even more readable, and looking like this:

image

image

In this latter case, the program editor will treat all three lines of the statement as a single line, which they are. Don’t try to format your code like this using newlines, though, as it will split it into multiple lines and cause errors—unless you also break the statement into parts, as detailed earlier.

Positioning of Braces

The reason you can lay out your code in a variety of ways is that JavaScript supports the use of tabs, spaces, and newlines as whitespace, which is ignored (other than newlines placed within a statement, which indicate a statement end and can be avoided only by splitting statements into parts).

Because of this, programmers can choose to place the curly braces wherever they like. As you have seen, when I use them, I generally place the opening and closing brace directly under the if() statement’s first character and then indent the encapsulated statements, like this:

image

Other programmers, however, choose to place the opening curly brace immediately after the if(), like this:

image

Both of these (and other) types of layout (such as placing the closing curly brace at the end of the final statement) are perfectly acceptable.

image

There are also some less-used layouts used by other programmers, but the preceding tend to be the main two. I advocate the first type because (even though it requires an extra line of code for each opening brace) it makes the opening braces indent to the level of the closing ones, so that if you have several nested statements, you can more clearly determine that you have the right number of opening and closing braces and that they are all in the right places. It also places more vertical whitespace between the expression and the statements that follow, which I find helpful. However, which system you use is entirely up to you.

The else Statement

To accompany the if() statement, there’s also an else keyword, which follows the same rules as if(), except the code following an else is executed only if the expression following the if() evaluates to false.

If the code comprises a single statement, it doesn’t require encapsulating in curly braces, but if it has two or more statements, braces are required. You use the else keyword in conjunction with if(), like this:

image

Because both of these keywords only include a single statement, you can safely omit the braces if you wish, like this:

image

Or, if there’s room, you can even move the statements up to directly follow the keywords, like this:

image

image

In this instance I opted to indent the second statement until it lined up underneath the first one. This helps make it clear what’s going on at a glance if I were to come back to this code some months later. However, how you lay out your whitespace is entirely up to you.

There is another convention regarding braces that I recommend you consider using, which is that if one of the statements in an if() … else construct uses braces, then so should the other, even if the other one only has a single statement. You can see the difference in the following (all valid) examples, in which I think you’ll find that Example 3 (with both sets of statements in braces) is the easiest to follow:

image

image

You don’t have to follow this advice, but it will certainly make your debugging a lot easier if you do, and any other programmers who have to maintain your code will thank you for it.

The else if() statement

You can extend the power of if() … else even further by also incorporating else if() statements, which provide a third option to the original if() statement, and which you place before the final else statement (if there is one). The following example illustrates how you might use this keyword:

image

image

As with other examples, I have used whitespace liberally in the preceding code to line the statements up and make them easier to follow.

The else if() statement follows the same rules as the if() and else statements with regard to using curly braces to encapsulate multiple statements (but not requiring them for single statements). However, I give the same recommendation as I did earlier that if even one of the parts of anif() … else if() … else structure uses braces, then I advise you to use braces for all parts.

Of course, you don’t have to use a concluding else after an if() … else if() construct if you don’t want it. For example, if you don’t need to deal with the case of a zero value (perhaps because one is not possible in the code you have written), you might simply use the following:

image

image

The purpose of the else keyword is as a catch-all, to trap all possible values that remain and execute the statement(s) attached to it if none of the preceding statements in the clause are true.

The switch() Statement

The if(), else if(), and else statements are very powerful and comprise much of JavaScript programming. But they are not the most efficient method of controlling program flow when there are more than three options to consider. For example, imagine there’s an input field on the web page with the following string values from which the user must select their age range:

• 0–1

• 2–3

• 4–6

• 7–12

• 13–17

• 18+

Now here’s some code you might use to process the value returned by the input, as shown in Figure 10-1, in which a value of 13-17 has been preselected for the string variable Age (using the if_else.htm file from the companion archive):

image

image

image

FIGURE 10-1 Using multiple else if() statements

Don’t you think all those repeated else if() statements are rather cumbersome, and the code feels somewhat heavier than it could be?

Well, the answer is to restructure code such as this using a switch() statement in conjunction with the case and break keywords, like this (as shown in Figure 10-2, created using the switch.htm file from the companion archive, and in which the string Age is preassigned the value 4-6):

image

image

image

FIGURE 10-2 Using a switch() statement

I’m sure you’ll agree that using switch() statements is a lot clearer than a set of sprawling else if()s. To use one, simply place the expression or variable to be tested in the parentheses following the switch keyword, then within a pair of curly braces (which are required), provide a number of case statements and an optional default statement.

Following each case keyword, place one possible value that the switch variable or expression might have. In this example, Age can only have string values, but you can equally test for digits or floating point numbers too. After the possible value, place a colon followed by the statements to execute if the value matches the switch variable or expression. In this example, it’s one or more document.write() statements.

image

Note how no curly braces are required to contain multiple statements. This is because once the code following the colon starts executing, it will keep on going, executing statement after statement (ignoring the following case tests), until break or the closing curly brace at the end of the switch() statement is encountered.

Using the break Keyword

Because program flow will continue to the end of a switch() statement (executing all the remaining statements regardless of any following case keywords), you must mark the end of a sequence of statements to be executed with a break keyword. This causes program flow to jump to just after the closing brace of the switch() statement.

image

You will also encounter the break keyword in Lesson 11 where it is used to break to the end of looping structures of code.

Using the default Keyword

In the same way that the else keyword is a catch-all device for dealing with any other values not caught by if() or else if() statements, you can use the default keyword within a switch() statement to catch any values not matched by the case statements.

In the previous example, because all possible values for Age are tested for except for 18+, then if none of the case statements match, Age must contain the value 18+. Therefore, the default statement is triggered and the statement following it writes the string You are an adult. to the browser.

image

There is no break keyword after the default option in the preceding example because it is the last statement in the switch() statement, and therefore a break keyword is superfluous in this position, as it would only add extra, unnecessary code. There is, however, nothing stopping you from placing the default statement anywhere within a switch() statement (even at the start), but if you do so, you must add a break keyword after the statements it executes, or program flow will fall through to the following statements, rather than to the end of the switch() statement. However, I recommend that you stick with convention and make default the last clause.

Allowing Fall-Through

Sometimes you may not want to use the break keyword because you wish to allow cases to fall through to other cases. For example, consider the case of wanting to choose the correct language to display on a multinational website. Using a simple input field (or even a geolocation program if you want to be really smart), you could return a string containing the user’s country name, for example, perhaps out of the following:

• Australia

• Brazil

• France

• Germany

• Portugal

• Spain

• UK

• USA

Then code to process the country name in the variable Country to a language to use in the variable Language might look like this:

image

image

Only after the variable Language has been assigned its value is the break keyword used. Therefore, if any of the countries Australia, UK, or USA are selected, Language is set to English, which is also selected (because the default keyword is included within the fall-through group of cases) for any other value not tested for by the cases in the switch() statement.

A fall-through also occurs for Brazil and Portugal, both of which countries speak Portuguese, but the remaining countries have different languages and don’t use any case fall-throughs. Note that there is no break keyword after the final statement, as it is not needed because the end of the switch() has already been reached.

image

Yes, I know that many people in the United States speak Spanish, but this is simply an example to explain fall-through. If you wanted to cater for that option, though, you could have two country names for the United States: USA English and USA Spanish, and then simply add a fall-through to the ′Spain′ case—while you are at it, you could also add Canada English and Canada French in a similar fashion to cater for its two languages, and so on.

Summary

This lesson concludes everything you need to know to write basic JavaScript programs. You can now handle data in various ways, including variables and arrays; you are able to use complex operators and expressions; and now you can direct the flow of your programs. In the next lesson, therefore, we start to look at more advanced aspects of JavaScript, beginning with putting together various types of looping constructs.

Self-Test Questions

Using these questions, test how much you have learned in this lesson. If you don’t know an answer, go back and reread the relevant section until your knowledge is complete. You can find the answers in Appendix A.

1. With which statement can you have JavaScript do something if an expression is true?

2. When are curly braces not required in an if() statement?

3. How can you provide a second option to an if() statement when an expression is false?

4. How can you extend if() statements to make further tests?

5. When you wish to test an expression or variable for a range of values and act differently on each, what would be the best statement to use?

6. What keyword is used in switch() statements to test a value?

7. What character must follow the value for a case being tested in a switch() statement?

8. In a switch() statement, which keyword processes all remaining values not specifically handled?

9. In a switch() statement, what keyword is used to jump out of the switch() to the following statement?

10. Are braces required to enclose the instructions for each case of a switch() statement?