JavaScript Conditionals: Complete Beginner Tutorial

What are conditionals in JavaScript?

JavaScript conditionals are simpler than I'm making them sound. Here's a basic JavaScript conditional:

if ("some string" === "another string") {
  console.log("the strings are equal"); // this will be skipped
} else {
  console.log("the strings are not equal"); // this is what will be printed
}

If you completed the previous lesson, you know that these strings are not equal, and therefore, our "code path" will result in the "else" statement and the strings are not equal will be printed to the console.

To better understand this, here is the basic structure of a "conditional".

if () {
  // do something here
} else {
  // do something here
}

In the previous lesson, we talked about JavaScript expressions, but we only looked at them in the context of variables. For example:

const myResult = 20 === 20 && "orange" === "orange";

In this case, we have to look at what is right of the = and by doing that, we can determine that (20 === 20) && ('orange' === 'orange') is the expression that we are evaluating. This expression equals true, and therefore, the myResult variable is assigned a value of true.

When we look at conditionals, our expressions will be placed between parentheses.

if (put your expression here) {
  // write some code here
}

Conditionals can be written in several different ways

Below are some examples of valid conditional statements in JavaScript.

const firstNumber = 20;
const secondNumber = 10;
const jsExpression = firstNumber > secondNumber; // true

// Only using an if statement (no "else" statement required here)
if (jsExpression) {
  console.log("this expression is true");
}

// An if-else statement
if (jsExpression) {
  console.log("this expression is true");
} else {
  console.log("this expression is false");
}

// Adding another "code path" with "else if"
// Hint: you can use as many "else if" statements as you want
if (jsExpression) {
  console.log("the expression is true");
} else if (firstNumber > 0) {
  console.log("the expression is false and the firstNumber is greater than 0");
} else {
  console.log("expression false, and firstNumber 0 or less");
}

// Works the same, just formatted differently
if (jsExpression) {
  console.log("just a different formatting");
}

What about "Switch Statements"?

Now listen up. If you're using lots of switch statements across your code, you're probably doing something inefficiently. But... There are some really good use cases for a switch statement and although I can't give you a definitive list of scenarios where you'll need to use this, I can explain why we have it in the first place.

Consider this:

// Index           0         1        2         3        4
const colors = ["orange", "green", "yellow", "purple", "blue"];

// Gets a random number between 0 and 4 and stores in a variable
const randomIndex = Math.floor(Math.random() * colors.length);

/*
  Remember, to get a value from an array, we use bracket notation
  For example, to get 'green', we use `colors[1]`

  Since randomIndex will be a random number between 0-4, we can 
  pass this in as our index to retrieve a random color from the array
*/
const randomColor = colors[randomIndex];

// Conditionals
if (randomColor === "orange") {
  console.log("the color is orange");
} else if (randomColor === "green") {
  console.log("the color is green");
} else if (randomColor === "yellow") {
  console.log("the color is yellow");
} else if (randomColor === "purple") {
  console.log("the color is purple");
} else if (randomColor === "blue") {
  console.log("the color is blue");
} else {
  console.log("no color found");
}

The conditional statement we have written at the bottom of the code works fine. You can use this with no problems, but most developers don't like the look of it. Here's a cleaner way to write the same thing using a switch/case statement.

// Index           0         1        2         3        4
const colors = ["orange", "green", "yellow", "purple", "blue"];

// Gets a random number between 0 and 4 and stores in a variable
const randomIndex = Math.floor(Math.random() * colors.length);

/*
  Remember, to get a value from an array, we use bracket notation
  For example, to get 'green', we use `colors[1]`

  Since randomIndex will be a random number between 0-4, we can 
  pass this in as our index to retrieve a random color from the array
*/
const randomColor = colors[randomIndex];

// Switch / Case statement
switch (randomColor) {
  case "orange":
    console.log("the color is orange");
    break;
  case "green":
    console.log("the color is green");
    break;
  case "yellow":
    console.log("the color is yellow");
    break;
  case "purple":
    console.log("the color is purple");
    break;
  case "blue":
    console.log("the color is blue");
    break;
  default:
    console.log("no color found");
}

To some, the switch statement looks better than a bunch of if-else statements. Let me explain what's going on here.

const variableToEvaluate = "some value to match";

switch (variableToEvaluate) {
  case "some value to match":
    // do something here
    break; // This ensures that if a match is found, no further code is run
  default:
  // If nothing matches above, this code is run
}

A switch statement works the same as an if-else statement. It looks at the value of variableToEvaluate, and then runs down the list of cases until it finds a "case" where the value matches the variable in question. If no "case" matches, then we reach the code stored in the default case.

Think of it like this–the case is similar to else if while the default is similar to else in our first example above.

Like I said, if the switch statement feels a bit uncomfortable right now, there is no need for you to use it. You can always use the good 'ole "if-else" conditional to filter through a list of potential values.