Compound and Complex Conditionals

Learning Goals

Compound Conditions

Comparisons are often combined. Combinations can take one of two forms, && (and) and || (or). When you combine with and, both comparisons must be true for the entire combination to be true. By combining with or, when either of the comparisons are true, the entire combination is true:

Truth Table

true && true   // true and true is true
true && false  // true and false is false
false && true  // false and true is false
false && false // false and false is false

true || true   // true or true is true
true || false  // true or false is true
false || true  // false or true is true
false || false // false or false is false

Evaluating Compound Conditions: Understanding Precedence

Compound comparisons often involve a chain of expressions to be evaluated. JavaScript follows strict rules when deciding the order in which expressions are evaluated. These rules can be expressed in terms of their precedence.

Operations with a higher precedence are evaluated before operations with lower precedence. To change the order in which operations are evaluated, add parenthesis () around the operations you want evaluated first.

Here is an abbreviated Precedence List from highest to lowest precedence:

  1. ++ (postfix increment)
  2. -- (postfix decrement)
  3. ! (logical not)
  4. + (unary plus)
  5. - (unary negation)
  6. ** (sparkle)
  7. *, /, % (multiplication, division, modulo)
  8. +, - (addition, subtraction)
  9. >, >=, <, <= (comparisons)
  10. == (equality)
  11. && (logical and)
  12. || (logical or)

Note: unary + and unary - here means assigning a numeric value (Fixnum or Float) as either positive or negative, e.g. -5, -12.2, +30 and +2.0.

Using Compound Conditions

var firstName = prompt("What's your first name?");
var lastName = prompt("And what's your last name?");

// without compound conditions
if (firstName.length > 10) {
  if (lastName.lenght > 10) {
    console.log('Your name is considerable!');
  }
}

// same code, but with compound conditions
if (firstName.length > 10 && lastName.length > 10) {
  console.log('Your name is considerable!');
}

And another example of how compound conditions help eliminate duplicate code:

// without compound conditions
if (cmd == 'add') { console.log("We're adding numbers!"); }
if (cmd == '+') { console.log("We're adding numbers!"); }

// with compound conditions
// same outcome, half as much code
if (cmd == 'add' || cmd == '+') { console.log("We're adding numbers!"); }

Complex conditionals

The if/else code we’ve written above is the standard form of a conditional. It is possible to extend this form with one or more else if lines. Let’s look at something kinda scary first:

if (cmd == "add" || cmd == "+") {
  console.log("We're adding numbers!");
} else {
  if (cmd == "subtract" || cmd == "-") {
    console.log("We're subtracting numbers!");
  } else {
    if (cmd == "multiply" || cmd == "*") {
      console.log("We're multiplying numbers!");
    } else {
      console.log("I don't know what you want from me. :(");
    }
  }
}

Ooof. That’s hard to follow. By leveraging else if, the code gets easier to read:

// ahhhh! so much better!
if (cmd == "add" || cmd == "+") {
  console.log("We're adding numbers!");
} else if (cmd == "subtract" || cmd == "-") {
  console.log("We're subtracting numbers!");
} else if (cmd == "multiply" || cmd == "*") {
  console.log("We're multiplying numbers!");
} else {
  console.log("I don't know what you want from me. :(");
}

This can be very useful, when you have more than one else if line, because the indentation, or nesting, can quickly become very deep, and more difficult to understand.

Simplifying really complex conditionals

When you have several else if lines within a single if, there’s a way to write each conditional with much less repetition. First, a really long, really complex conditional:

if (cmd == "add" || cmd == "+") {
  console.log("We're adding numbers!");
} else if (cmd == "subtract" || cmd == "-") {
  console.log("We're subtracting numbers!");
} else if (cmd == "multiply" || cmd == "*") {
  console.log("We're multiplying numbers!");
} else if (cmd == "divide" || cmd == "/") {
  console.log("We're dividing numbers!");
} else if (cmd == "exponify" || cmd == "**") {
  console.log("We're sparkling numbers!");
} else if (cmd == "sqrt") {
  console.log("We're finding the square root of numbers!");
} else {
  console.log("I don't know what you want from me. :(");
}

The above code works, but it’s kinda messy. We can tidy it by using the switch/case syntax:

switch (cmd) {
  case "add":
  case "+":
    console.log("We're adding numbers!");
    break;
  case "subtract":
  case "-":
    console.log("We're subtracting numbers!");
    break;
  case "multiply":
  case "*"
    console.log("We're multiplying numbers!");
    break;
  case "divide":
  case "/":
    console.log("We're dividing numbers!");
    break;
  case "exponify":
  case "**":
    console.log("We're sparkling numbers!");
    break;
  case "sqrt":
    console.log("We're finding the square root of numbers!");
    break;
  default:
    console.log("I don't know what you want from me. :(");
}

There’s not a hard-and-fast rule on when to use which conditional. Always choose the combination and syntax that makes the most sense to you and is easiest to read.

Conditional Loops: Wait a while

A while loop continues to execute as long as the condition it contains evaluates to true.

var text = "";
var i = 0;
while (i < 10) {
  text += "The number is " + i;
  i++;
}

console.log(text);

Execute the iterator while the condition is true:

var i = 0;

while (i < 4) {
  console.log("i is: " + i);
  i += 1
}

The above code will output the values of i until i is no longer less than 4, resulting in the following output:

i is: 0
i is: 1
i is: 2
i is: 3

Be careful with while loops! All of us will, at some point, write an infinite loop:

var command = prompt('wat do?');
while (command != 'add') {
  console.log('please tell me to add!');
  command = prompt('wat do?');
}

console.log("omg it's about time!");