In our applications, we need to have the ability to do things based off of different conditions. This idea of doing things in our apps conditionally is a core topic that is glossed over too often. It's crucial to be able to write conditional logic within our applications effectively and clearly. It has the ability to make our code significantly clearer, more reliable and less bug prone and more succinct, all at the same time.

So we're going to start off with the most essential and familiar flow control in JS apps with the if statement.

If statements evaluate boolean values, meaning whether something is the value true or not. So a common trend now is to create a dark version of applications to our users. So let's say we're in the process of making this dark alternative to our app, and we want to store our users color preference in a variable, let's say prefersDarkMode. And this variable will hold a boolean value, that is either true, the user prefers dark mode, or false, they want the normal or light version.

So how do we write a basic condition to flip our app to dark mode if this value is true?

The basic syntax of if statements is to use the if keyword, then evaluate the boolean within a set of parentheses. And if JavaScript assesses this value to be the boolean true, we run some code within a set of curly braces, where we could simply console.log('dark mode set!'):

const prefersDarkMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
}

Or if we actually want to change the screen to dark, we could actually do so. Note, don't worry if you don't understand this line of code. You will later on in the DOM section:

const prefersDarkMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
}

And then alternatively, we can specify what should happen if the user doesn't prefer dark mode. If that value is false. So let's see if we could add this functionality to show the light mode if they don't prefer dark mode. We could try adding the code to do so underneath our if statement. We could log maybe light mode set in that case and we could set our app color to another valid css color, like ghostwhite.

const prefersDarkMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
}

console.log("light mode set!");
document.body.style.background = "ghostwhite";

So at the moment, the user prefers dark mode. And if we run this code, we see that it no longer works. Even though prefers dark mode is true, our app is now the light version. Why is this?

The reason for this is that we are running our if statement and setting the background to black, but our program doesn't stop there and the code afterwards is setting it to the light version. So how can we only set it to the light version when prefersDarkMode is false?

This is where the else keyword comes in. To make sure code runs only if a condition is not met, we pair an if statement with an else statement immediately afterwards. We just write the else keyword and then another set of curly braces for the code to run in any other case provided the if condition is not met:

const prefersDarkMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

So now, if we run our code again when the user prefers dark mode, we are only setting the app to the dark mode. But if it is set to false:

const prefersDarkMode = false;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

[Run code] Our else condition runs and our app is set to the light version.

Now what if we had multiple conditions? What if, for example, we had a solarized version of our app, which set the background color to a pale yellow color? Based off of what you know, this about this example and see how after the if conditional

If you can't come up with an answer, that's fine. Think this through and figure out what needs to happen.

What needs to happen is that we need to find a way to add another if condition after our if statement, but before our else statement. And we can do this by using the keyword else if. So else if is placed after the if condition but before the else. And it accepts another condition. And in this case, we have a solarized version of our app, so this condition may be based on a new variable called prefersSolarizedMode. Let's initialize that to true:

const prefersDarkMode = false;
const prefersSolarizedMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
} else if (prefersSolarizedMode) {
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

And now we can log the mode we are setting and set the actual background to a pale golden rod color:

const prefersDarkMode = false;
const prefersSolarizedMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
} else if (prefersSolarizedMode) {
  console.log("solarized mode set!");
  document.body.style.background = "palegoldenrod";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

And when we run this code [Run code] our app is set to the solarized version.

So why when we ran this code did the else condition not run? The reason for this is that else if is basically, behind the scenes, exactly the same as an if statement. So since our condition matched and ran the code to make our app solarized, the else part didn't run.

And finally, let me make one small change to our code here. Let's say that our user prefers both dark mode and solarized mode. What's going to happen when we run this code?

const prefersDarkMode = true;
const prefersSolarizedMode = true;

if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
} else if (prefersSolarizedMode) {
  console.log("solarized mode set!");
  document.body.style.background = "palegoldenrod";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

[Run code] We're going to see the dark mode displayed. Why? Because if else statements (and basically all conditionals in JavaScript with some exceptions we'll mention), work according to what condition is met first. Since the condition for prefersDarkMode being true was matched first, the condition ran the appropriate code for that condition and JS finished running the conditional.

Now based off of this bit of information, how could, without modifying our variables, get the app to display our solarized version? See if you can implement the solution yourself.

All we have to do is swap the order of the conditions. We can make else if appear earlier within our code as the if statement, so that it is matched first, and put the if condition as the else if.

const prefersDarkMode = true;
const prefersSolarizedMode = true;

if (prefersSolarizedMode) {
  console.log("solarized mode set!");
  document.body.style.background = "palegoldenrod";
} else if (prefersDarkMode) {
  console.log("dark mode set!");
  document.body.style.background = "black";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

[Run code] So now the prefersSolarizedMode is being satisfied first.

On top of the if else, there another pattern for flow control in JavaScript. To see it's benefits, let's modify our if else statement a bit. Let's say that instead of having these variables prefersDarkMode or prefersSolarizedMode which hold boolean values, we had a single variable which held a string value, called colorMode. So instead of having it store a boolean, it would hold the value 'dark', 'solarized' or 'light'. How would be rewrite our conditional now to dynamically change the colors?

We would have to provide comparisons to each of these values. We would have to use the triple equals within each condition to see if the mode was the string solarized or dark, like so:

const colorMode = "solarized";

if (colorMode === "solarized") {
  console.log("solarized mode set!");
  document.body.style.background = "palegoldenrod";
} else if (prefersDarkMode) {
  console.log(colorMode === "dark");
  document.body.style.background = "black";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

So try to imagine we had a lot of different color modes, think of how tedious it would be to write these comparisons to a given string. It's hard to write it all out with a lot of repetition, plus it's not very easy to read.

A better way to write this logic is with a switch statement. Why? Because our conditions don't have to use boolean values. And it performs such comparisons for us automatically. It's really ideal for lots of different conditions.

So to rewrite an if statement to a switch, we replace the first if with switch:

const colorMode = 'solarized';

switch (colorMode === 'solarized') {
  console.log("solarized mode set!");
  document.body.style.background = "palegoldenrod";
} else if (prefersDarkMode) {
  console.log(colorMode === 'dark');
  document.body.style.background = "black";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

And we don't have to write the comparison, we can just pass in the value to the rest of the conditional:

const colorMode = 'solarized';

switch (colorMode) {
  console.log("solarized mode set!");
  document.body.style.background = "palegoldenrod";
} else if (prefersDarkMode) {
  console.log(colorMode === 'dark');
  document.body.style.background = "black";
} else {
  console.log("light mode set!");
  document.body.style.background = "ghostwhite";
}

And now to run some code based on colorMode being a certain value, we don't have to write else if, parentheses and curly braces and a comparison. We just have to turn it into a case, colon symbol, the value that colorMode should be equal to, and if that is true, we run the appropriate code:

const colorMode = "solarized";

switch (colorMode) {
  case "solarized":
    console.log("solarized mode set!");
    document.body.style.background = "palegoldenrod";
  //   console.log("solarized mode set!");
  //   document.body.style.background = "palegoldenrod";
  // } else if (prefersDarkMode) {
  //   console.log(colorMode === 'dark');
  //   document.body.style.background = "black";
  // } else {
  //   console.log("light mode set!");
  //   document.body.style.background = "ghostwhite";
}

And note that the code that we want to run for a certain case should be indented slightly. And that all of the cases for our switch statement are between two curly braces, as if it was a single if statement. So now that we see how to turn an else if into a case, see if you can take our previous conditions and turn them into cases in our switch statement.

So we can easily copy the first case and apply it to the dark color mode

const colorMode = "solarized";

switch (colorMode) {
  case "solarized":
    console.log("solarized mode set!");
    document.body.style.background = "palegoldenrod";
  case "dark":
    console.log("solarized mode set!");
    document.body.style.background = "black";
  //   document.body.style.background = "palegoldenrod";
  // } else if (prefersDarkMode) {
  //   console.log(colorMode === 'dark');
  //   document.body.style.background = "black";
  // } else {
  //   console.log("light mode set!");
  //   document.body.style.background = "ghostwhite";
}

But how do we rewrite the else condition? Using the default keyword. So if no cases match, the default case is run, which looks like the following:

const colorMode = "solarized";

switch (colorMode) {
  case "solarized":
    console.log("solarized mode set!");
    document.body.style.background = "palegoldenrod";
  case "dark":
    console.log("dark mode set!");
    document.body.style.background = "black";
  default:
    console.log("light mode set!");
    document.body.style.background = "ghostwhite";
}

And if we run this code, finally [Run code] We see that it works just like before.

Now before we close out this lesson, make note of a couple of other neat things about switch statements. We can have multiple cases run the same code if we just add a colon after a case and nothing else. For example, if we wanted both the solarized and dark cases to run the code that make our app dark:

const colorMode = "solarized";

switch (colorMode) {
  case "solarized":
  // console.log("solarized mode set!");
  // document.body.style.background = "palegoldenrod";
  case "dark":
    console.log("dark mode set!");
    document.body.style.background = "black";
  default:
    console.log("light mode set!");
    document.body.style.background = "ghostwhite";
}

And last of all, know that we can exit early from a conditional, either a switch statement or an if else by using the break keyword. So if we wanted to break right before we actually set the background to black we could do so by putting break right before that code:

const colorMode = "solarized";

switch (colorMode) {
  case "solarized":
  // console.log("solarized mode set!");
  // document.body.style.background = "palegoldenrod";
  case "dark":
    console.log("dark mode set!");
    break;
    document.body.style.background = "black";
  default:
    console.log("light mode set!");
    document.body.style.background = "ghostwhite";
}

[Run code] So our conditional exits and our background isn't set. We won't be using break within this course for much, because later on in the course, we will see that the return keyword can do something similar for our functions.

So in this video, we got a taste of the two most essential flow control structures in JavaScript, when they should be used, what they offer as compared to one another, and we're going to become very adept at using them throughout this course.