Javascript - Conditionals

Just like we make countless decisions in our everyday lives, programs also need to make decisions in order to achieve the desired outcomes. But unlike us emotional beings, computer programs make their decisions based on one or more logical rules or conditions that are defined by the programmer. Each time the program encounters a condition, it has to make a logical decision to determine if that condition is true and then execute a specific block of code. There are several different ways to do this in Javascript.

if statements

The if statement is the most common way to control the program flow. In its most basic form, it goes like this —  If a condition is true, do this.

if

This is a plain if statement where you only specify what to do if the given condition is true.

if (condition) {
  // code to run if condition is TRUE
}

// EXAMPLE
if (weather == 'rain') {
  console.log("It's raining. Carry an umbrella!")
}

if else

In an if else statement, you also specify what to do if the condition is false.

if (condition) {
  // code to run if condition is TRUE
} else {
  // code to run if condition is FALSE
}

// EXAMPLE
var weather = 'snow'
if (weather == 'rain') {
  console.log("It's raining. Carry an umbrella!")
} else {
  console.log("Step outside to know the weather.")
}

else if

The else if statement checks against a new condition if the previous one is false.

if (condition1) {
  // code to run if condition1 is TRUE
} else if (condition2) {
  // code to run if condition1 is FALSE
  // and condition2 is TRUE
} else if (condition3) {
  // code to run if condition1 & condition2 are FALSE
  // and condition3 is TRUE
} else {
  // code to run if all 3 conditions are FALSE
}

// EXAMPLE
var weather = 'hot'
if (weather == 'rain') {
  console.log("It's raining. Carry an umbrella!")
} else if (weather == 'snow') {
  console.log("It's snowing. Wear your snow boots and gloves!")
} else if (weather == 'hot') {
  console.log("It's hot. Wear a hat!")
} else {
  console.log("Step outside to know the weather!")
}

nested ifs

If else statements can be nested inside each other which allows for more complex use cases where multiple conditions need to be checked.

if (condition1) {
  // code will run if condition1 is TRUE
  if (condition2) {
    // code will run if condition1 and condition2 are TRUE
    if (condition3) {
      // code will run if condition1, condition2 and condition3 are TRUE
    } else {
      // code will run if condition1 and condition2 are TRUE
      // but condition3 is FALSE
    } 
    else {
    // code will run if condition1 is TRUE
    // but condition2 is FALSE
  } else {
  // code will run if condition1 is FALSE
}

// EXAMPLE
var weather = 'rainy',
  ridingMotorcycle = true,
  racing = false
if (weather == 'rainy') {
    console.log('It is raining outside.')
    if (ridingMotorcycle) {
        console.log('You are riding your motorcycle! 🌧️🏍️')
        if (racing) {
            console.log('And you are racing! Are you crazy?🤪')
        } else {
            console.log('And you are driving slowly. Ride safe!')
        }
    } else {
        console.log('You decide to wait till it clears up.')
    }
} else {
    console.log('Step outside to know the weather.')
}

switch

The switch statement allows you to execute code conditionally for different values of an expression. In case none of the values match, you can provide a default case to be executed.

switch (expression) {
  case value1:
    // code to run if expression results in value1
    break;
  case value2:
    // code to run if expression is value2
    break;  
  case value3:
   // code to run if expression is value3
    break;
  default:
   // code to run if none of the above cases match the expression
}

// EXAMPLE
var weather = 'hot'
switch (weather) {
  case 'rain':
    console.log("It's raining. Carry an umbrella!")
    break;
  case 'snow':
    console.log("It's snowing. Wear your snow boots and gloves!")
    break;  
  case 'hot':
    console.log("It's hot. Wear a hat!")
    break;
  default:
   console.log("Step outside to know the weather!")
}

ternary operator (conditional operator)

The ternary or conditional operator provides a simple way to write if else conditions in a single line of code.

condition ? expressionIfTrue : expressionIfFalse

// EXAMPLE
var weather = 'rain'
var ridingMotorcycle
weather == 'rain' ? ridingMotorcycle = false; ridingMotorcycle = true