Lesson 2: Conditionals

It's pretty rare that a computer program, like the one we wrote in the last lesson, simply runs from start to finish without some decisions to be made. After all, the main purpose of most computer code is to evaluate some input, make some decisions based on some business or scientific rules, and produce an output that an end-user can understand. That's where conditional logic comes in.

In JavaScript (and most other languages), the fundamental building block of conditional logic (aka control flow) is the if statement. The basic structure of the if statement is as follows:

      let test = true // or false
      
      if (test) {
        // do something that should only happen if test evaluates to true
      }
    

test, in this example, is known as a condition – an expression or variable that should evaluate to a Boolean – true or false. We can, of course, set the value of test to the hard-coded true or false values, but that doesn't usually happen – instead, we perform an actual test on the inputs/variables available within the context of our code:

Here is a basic example of how we can use the if statement to make our code move in different directions:

      let number = 13
      
      if (number == 0) {
        console.log(`zero!`)
      } else if (number < 0) {
        console.log(`negative number!`)
      } else {
        console.log(`positive number!`)
      }
    

The output of our program will change, based on the value that's set to number in line 1. We can see that JavaScript reads quite logically, but if we were to spell out this behavior:

• We are performing a series of "tests" here – the first test, on line 3, compares number to the number zero. If that "test passes", we perform the code that is given between the curly braces ({}) that immediately follows the test.
• The next test, on line 5, checks if number is less than zero.
• Finally, if neither of those tests pass, we revert to the fallback case that's described in the else clause.

Let's talk about the == and < that we're seeing here. These are known as comparison operators – that is, operators that are designed to return a Boolean value as a result. There are a few of these comparison operators in JavaScript, but the important ones (for now) are as follows:

Operator	Description
Equal (==)	Returns true if the operands are equal.
Not equal (!=)	Returns true if the operands are not equal.
Greater than (>)	Returns true if the left operand is greater than the right operand.
Greater than or equal (>=)	Returns true if the left operand is greater than or equal to the right operand.
Less than (<)	Returns true if the left operand is less than the right operand.
Less than or equal (<=)	Returns true if the left operand is less than or equal to the right operand.

We can also combine these comparison operators with logical operators, i.e. && (and) and || (or) to create more in-depth conditions; for instance:

      let dinner = `tacos`
      let dessert = `cupcakes`
      
      if (dinner == `tacos` && dessert == `cupcakes`) {     // if dinner is tacos AND dessert is cupcakes
        console.log(`could it get any better?`)
      } else if (dinner == `tacos` || dinner == `pizza`) {  // if dinner is tacos OR pizza
        console.log(`sweet!`)
      } else if (dinner == `kale`) {
        console.log(`ewwww!`)
      } else {
        console.log(`ok...`)
      }
    

The Thing You'll Get Wrong 99 Times Until You Finally Get It Right

The single equals sign = is used for variable assignment. The double equals sign == is the comparison operator used for comparing equality. Don't confuse the two! Consider the following code:

      let dinner = `kale`
      
      // incorrect - will cause unexpected results!
      if (dinner = `tacos`) {
        // This will always be true!
      }
      
      // correct
      if (dinner == `tacos`) {
        // This will properly perform the comparison
      }
    

The code on line 4 – dinner = `tacos` – will always be true. Why? Because we're not performing a comparison; instead we're assigning the value of `tacos` to the variable dinner – and this will always successfully complete.