Conditional Statements

• Conditional Statements use operators to test different expressions, and execute code according to the outcome of the expressions.
• There are four types of conditional statements in JavaScript: If statements, Else statements, Else if statements, and switch statements.

• Conditional statements can be nested within each other, so that another expression can be tested after one has been proven true or false, to determine the next course of action for the program.

  1. If statements

• If statements are pretty self explanatory. The statement tests “if” a condition within the parentheses is true. If the condition is true, the code is executed. Like so:

  if (5 < 6) {
  document.write("Our first if statement!");
  }
  

• The expression within the parenthesis is the condition being tested. Since the expression is true, the code executes.

• All of the conventions for using conditional and logical operators remain true when we use them in if statements.

• Examples:

let name = "Bob";
if (name === "Bob") {
  console.log("Hi Bob!");
}

x = 20;
y = 30;
if (x > 10 && y < 50) {
  console.log("True!");
}

• Q : Will these if statements execute or not? —

2. Else statements

• Else statements follow if statements and/or else-if statements(covered next).
• Else statements are literally saying “if that condition was not true, execute this code”
• Example: let secondName = "Todd"; if (secondName === "John") { console.log("Hello, John!"); } else { console.log("Hi, " + secondName); }
• Running this code will print “Hii, Todd” to the console because the else statement was executed since the variable ‘name’ was not equal to “John”. —
• More examples:

  See the Pen 3.1 Examples by LSU DDEM (@lsuddem) on CodePen.

  —

3. Else-if statements

• Else-if statements are used in between if statements and else statements to test for an extra condition before running the “else code”.
• In other words, if the if statement proves false, the next expression evaluated will be the else if, which will test for a new condition.
• If the else if is also false, the next else if expression is evaluated, or the else code is executed.
• We can have multiple else if statements before the final else statement —
• Example: let name1 = "Todd"; let name2 = "Katy"; let name3 = "Max"; if (name1 == "Katy") { console.log("Hi, Katy!"); } else if (name1 == "Max") { console.log("Hi, Max!"); } else { console.log("Hi, " + name1); }
• “Hi, Todd” is printed to the console because the first if statement and else if statement proved false, so the else statement was executed. —
• Further Examples:

See the Pen 3.1 Examples_1 by LSU DDEM (@lsuddem) on CodePen.

• As mentioned, conditional statements can be nested within each other. For example:

let color = "purple";
if (color == "red") {
  console.log(color);
} else if (color == "purple") {
  if (5 > 6) {
    console.log("First nested if-statement was true");
  } else {
    console.log("First nested if-statement was false");
  }
}

• Q : What will be printed to the console when this code runs?

  Exercise 3.1

See the Pen Exercise 3.1 by LSU DDEM (@lsuddem) on CodePen.