Back to Basics: Conditional Statements in JavaScript
Tags: javascript, beginners, technicalinterviews, conditionals
Published: 2021-01-14 15:15:03

This series discusses the building blocks of JavaScript. Whether you're new to the language, you're preparing for a technical interview, or you're hoping to brush up on some key JS concepts, this series is for you.

Today's post is about conditional statements:
- [What are conditional statements?](#what-are-conditional-statements)
- [If...else statements](#ifelse-statements)
- [Switch statements](#switch-statements)
- [The ternary operator](#the-ternary-operator)
- [Resources](#resources)

## What are conditional statements?

Conditional statements tell your program to do a certain set of commands if a certain condition is true. In JavaScript, there are `if...else` statements and `switch` statements.

Conditional statements are used all the time in the non-programming world. Let's say your friend asks you to pick them up some ice cream from the grocery store. They tell you, "If the store has mint chocolate chip ice cream, please get it. If the store doesn't have that, please get cookies and cream. If the store doesn't have that either, just get me chocolate ice cream." Written another way, your friend is saying:

 - If the store has mint chocolate chip ice cream: buy that.
 - Otherwise, if it has cookies and cream ice cream: buy that.
 - Otherwise: buy chocolate ice cream.

Each one of these statements has a condition ("the store has mint chocolate chip ice cream") and a statement to execute if that condition is true ("buy that"). It's also important to note that the **order** matters in these statements. Your friend doesn't want you to buy chocolate ice cream if cookies and cream is an option.

When working with conditional statements, it's important to keep in mind what you're checking, and what order things should be checked in.

## If...else statements

An **if...else statement** is structured like the following:

```
if (condition) {
    statement_1;
} else {
    statement_2;
}
```

If `condition` is `true`, then `statement_1` will execute. Otherwise, if the condition is `false`, then `statement_2` will execute.

It's important to note that the `else` clause is optional. Also, you can test multiple conditions in sequential order using `else if`:

```
if (condition_1) {
    statement_1;
} else if (condition_2) {
    statement_2;
} else if (condition_3) {
    statement_3;
} else {
    statement_last;
}
```

When multiple conditions are being tested, only the **first** condition that evaluates to `true` is executed.

To execute multiple statements, group them in a block statement, like the following:

```
if (condition) {
    statement_1;
    statement_2;
} else {
    statement_3;
    statement_4;
}
```

For example, let's say we have an array that keeps track of the temperature on each day of the week. If it's the end of the week (as in, the array has 7 temperatures in it), we want to report back that it's been a whole week. Otherwise, we want to log that it's not the end of the week yet:

```javascript
let arr = [55, 60, 58, 57, 54];
if (arr.length === 7) {
  console.log("It's been a whole week!");
} else {
  console.log("It's not the end of the week yet.");
}
```

Let's take that example a step further, and incorporate some of the loops we talked about in [Back to Basics: Loops in JavaScript](https://dev.to/alisabaj/back-to-basics-loops-in-javascript-59lo). Rather than just logging if it's the end of the week, we should return what the average temperate was that week.

There are multiple ways to find the average (or mean) of an array of numbers. One involves using a `for` loop to find the sum of every value of the array, and then dividing it by the length of the array (average is total sum divided by count). We'll start by initializing a variable which will equal the sum of every value in the array. Because we only want to find the average temperature of a full week, we will do this in the statement following the `if` condition.

```javascript
let arr = [55, 60, 58, 57, 54, 52, 60];
if (arr.length === 7) {
  //initialize sum at 0 because we need to add values to it
  let sum = 0;
  //...
} else {
  console.log("It's not the end of the week yet.");
}
```

Then, we can use a `for` loop to go over each value of the array, and add it to `sum`. The `for` loop will start a counter at `0`, because [arrays are zero-indexed in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#accessing_array_elements). It will go until the length of the array, or `arr.length`. And we want to check each element of the array, one at a time, so we will increment by `1` each time. Inside of the `for` loop, we want to add the current value of the array to `sum`. We can access the value of the array with `arr[i]`.

```javascript
let arr = [55, 60, 58, 57, 54, 52, 60];
if (arr.length === 7) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i]; // this could also be written as sum += arr[i]
  }
  //...
} else {
  console.log("It's not the end of the week yet.");
}
```

Once the `for` loop is done executing, `sum` contains the total sum of every temperate that week. Since we want to return the average temperature, we can divide `sum` by 7 (the number of days in the week), and console log that value.

```javascript
let arr = [55, 60, 58, 57, 54, 52, 60];
if (arr.length === 7) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i]; // this could also be written as sum += arr[i]
  }
  console.log(
    "It's been a whole week! This week's average temperature was " +
      sum / 7 +
      "degrees."
  );
} else {
  console.log("It's not the end of the week yet.");
}
```

## Switch statements

The other kind of conditional statement supported in JavaScript is the **switch statement**. A `switch` statement evaluates an expression, and depending on that evaluation, tries to match it to a specified `case`. If a `case` matches, then that `case`'s statement executes. A `switch` statement looks like the following:

```
switch (expression) {
    case label_1:
        statement_1;
        break;
    case label_2:
        statement_2;
        break;
    default:
        statement_default;
        break;
}
```

First, `expression` is evaluated. Then, your program will look for a `case` whose label matches the value of the `expression`, and then the associated statement is executed. If no matching label can be found, your program will look for the `default` clause (which is optional), and executes the associated statement. If there is no `default` clause, your program will simply exit the `switch` statement.

The `break` statements tell your program to break out of the `switch` once that `case`'s statement is executed. `break` statements are optional. If you don't include them, your program will stay in the `switch` statement, and will execute the next statement in the `switch` statement.

For example, let's say you're trying to decide what jacket to wear, and it depends on the weather. If it's hot, warm, or cold out, different jackets are appropriate:

```javascript
switch (weather) {
  case "Hot":
    console.log("No jacket needed.");
    break;
  case "Warm":
    console.log("Bring a light jacket.");
    break;
  case "Cold":
    console.log("Bring your heavy jacket.");
    break;
  default:
    console.log("You probably should bring a jacket anyway, just in case!");
    break;
}
```

You may be wondering, what exactly do the `break` statements do? Using the same example, let's say you didn't include any of the `break` statements, and that `weather = "Hot"`:

```javascript
let weather = "Hot";
switch (weather) {
  case "Hot":
    console.log("No jacket needed.");
  case "Warm":
    console.log("Bring a light jacket.");
  case "Cold":
    console.log("Bring your heavy jacket.");
  default:
    console.log("You probably should bring a jacket anyway, just in case!");
}
```

The output would be:
`No jacket needed. Bring a light jacket. Bring your heavy jacket. You probably should bring a jacket anyway, just in case!`

This is because the label for the first `case`, `"Hot"`, matches `weather`, so that statement executes. Then, each subsequent statement executes, since there are no `break`s telling your program to stop.

## The ternary operator

The **ternary operator** is not a type of conditional statement. Instead, it's an operator that checks a condition. It's a single line of code, and because it's so condensed, it's often used as a shortened version of a simple `if...else` statement.

The ternary operator is structured like the following:

```
condition ? expressionIfTrue : expressionIfFalse
```

The `condition` is an expression that's evaluated. If `condition` is [_truthy_](https://developer.mozilla.org/en-US/docs/Glossary/truthy) (meaning that it is `true`, or its value can be converted to `true`), `expressionIfTrue` is executed. If `condition` is [_falsy_](https://developer.mozilla.org/en-US/docs/Glossary/falsy) (meaning that it is `false`, or its value can be converted to `false`, which includes `null`, `NaN`, `0`, `""`, `undefined`), `expressionIfFalse` is executed.

For example, let's say the original `if...else` statement checks if a number is positive:

```javascript
const num = 4;
if (num >= 0) {
  console.log("Positive");
} else {
  console.log("Negative");
}
```

The condition is `num >=0`, which means that's what we're checking. Using a ternary operator, that will go on the left side of the question mark `?`. If it's truthy, we'll want to console log `"Positive"`, so that's the first expression after the `?`. If it's falsy, we'll want to console log `"Negative"`, so that's the second expression, and it comes after the colon `:`.

We can store the result of the ternary operator into a variable called `positiveCheck`. Then, we can console log the value of that variable.

```javascript
const num = 4;
const positiveCheck = num >= 0 ? "Positive" : "Negative";
console.log(positiveCheck);
```

Some people like ternary operators because they save space when working with simple conditional statements, but not everyone likes them or uses them. Whether or not you use ternary operators, it's important to know what they look like and how to read them in case you encounter them.

---

Please let me know in the comments if you have any questions or other ways of thinking about conditional statements in JavaScript.

### Resources:

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals