• Unit 4: Conditional Statements and Control Flow

    In this unit, we explore JavaScript conditional statements. Conditions allow you to write code that performs actions based on different decisions. All day, we make decisions in every facet of life, and conditions allow our code to return a result based on the input of a situation, the decision, and the correct output. For example, you might create a tip calculator, and if (condition) the service was excellent, you would want to calculate a higher percentage tip. We will explore many conditional statements, including loops that repeat a condition until some parameter occurs. For example, while (condition) it is raining, I will wait to plant flowers in the garden, and then when it is not raining, I will plant flowers. 

    Completing this unit should take you approximately 2 hours.

    • Upon successful completion of this unit, you will be able to:

      • explain the types of conditional statements in JavaScript;
      • use conditional statements in JavaScript such as if,  if/else, and switch;
      • use looping statements in JavaScript such as while, do while, and for loops, 
      • use "relational and Boolean operators" with conditional statements; and
      • write code that implements interactive choices based on conditions.

    • 4.1: Introduction to Conditional Statements

      • What is Control Flow? Book

        A fundamental skill in programming is controlling how a program executes. The control of program execution is categorized using three control structures. They are "sequential", "selection", and "repetition". So far, you've written straightforward code that uses sequential JavaScript statements that execute one after another. More complex decision-making programs use selection and repetition. Programs also implement different types of looping structures, such as looping until some condition is met (sentinel) or looping a specific number of times (counter control). As you read through this section, you should notice that control structures in JavaScript use "reserved keywords" (if, else, switch).

    • 4.2: Selection Control Statements

      • "if...else" Statements Page

        This section will focus on the syntax (rules) for the "if...else" statement and provide some examples. The "if...else" statement is often used to test if something has happened. We can use it with the "Boolean" and "equality" operators we learned in Unit 3. Notice that an open and closed curly bracket { } is used if there is an "else" statement or more than one line.

      • Example in Action: "switch" Statement with a "break" Page

        Watch this video on the "switch...case" statement that is used to obtain the current day. This statement is a variant of the "if... else" statement. However, the "switch" statement does not use "Boolean" or "equality" operators.

        Remember, when using the "switch" statement, the "break" statement must be at the end of each condition, and case labels must be unique.

    • 4.3: Looping Statements

      • "while" Statements Page

        First, we'll look at the "while" statement. This statement creates a loop that executes as long as the test condition evaluates to "true". For example: while x is less than 7, execute the loop.

        Remember, when using the "while" statement, you must always increase the value of the condition, and the loop will not execute if the condition is false in the beginning.

      • Example in Action: "for" Statement Page

        There are also times when you want a program to execute the same code many times. Looping statements are analogous to running laps around a track until some condition is met. Watch this video to see how the "for loop" runs a series of statements multiple times based on a condition.

        Remember when using "for loop" statements:

        • make sure to use the correct relational operators in a "for loop";
        • never change the value of the control variable inside the loop; and
        • loops will not execute if the test condition starts as false.

      • "do...while" Statement Page

        Now we'll look at the syntax for the "do...while" statement. We discussed the "while" statement in a previous section. How do these statements differ? The "do...while" statement is executed until the test condition is false. 

        Remember, when using the "do...while" statement, you must always use brackets in a "do...while" statement, and the body of the loop will always be executed at least once.

      • Practice Review: Fix the Switch Statement URL

        Let's see how well you understand the syntax for the "switch" statement in this practice exercise. In Unit 2, we described validating code using linters. First, copy the following code into the left pane of the JSHint window. Then, examine the errors and fix the code. This exercise does not count towards your grade. It is just for practice!


        switch (fruittype) {
         case 'Oranges':
         console.log('Oranges are $0.59 a pound.');
         break;
         case 'Apples':
         console.log('Apples are $0.32 a pound.')
         break;
         case 'Bananas':
         console.log('Bananas are $0.48 a pound.');
         break;
         case 'Cherries':
         console.log('Cherries are $3.00 a pound.');
         
         default:
         console.log(`Sorry, we are out of ${fruittype}.`);
        }
        console.log("Is there anything else you'd like?");
        ;

    • Study Session Review Video

    • Unit 4 Assessment

      • Unit 4 Assessment Quiz
        Receive a grade

        Take this assessment to see how well you understood this unit.

        • This assessment does not count towards your grade. It is just for practice!
        • You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
        • You can take this assessment as many times as you want, whenever you want.