JavaScript (ES5) Conditionals
Tags: javascript, beginners
Published: 2018-11-27 16:44:25

_This was originally posted on my site at https://martyhimmel.me on December 27, 2016. Like a number of others on dev.to, I've decided to move my technical blog posts to this site._

Conditionals allow user interactions/choices and are used to control the flow of a program. Think of all the choices you make in a day and the results of those choices. That is basically how conditionals work in programs - when you do one action, the program flows one way; if you choose a different action, the program flows another way.

Here's a example of conditionals in life. When the alarm goes off, you can hit snooze or get up. That choice is a branching point - if you hit snooze, then you sleep more but don't have time for breakfast. If you get up, you have time to get ready and have breakfast. As you can see, that's a really simple example. A morning routine has many more choices between the alarm going off and eating breakfast. And each choice along the way could be considered a conditional - the choice and the result of that choice.

## `if` Statements

An `if` statement is the most basic type of conditional. It reacts to a condition - if a condition is true, then whatever is inside the statement is run. If the condition is false, the statement is skipped. Here's the structure:

```js
if (condition) {
  // do something
}
```

Here are some common uses of `if` statements:

- Checking if a value is a certain type
- Comparing a numerical value against an expected value
- Matching a string variable against an explicitly expected string

```js
var myString = 'This is a string';
if (typeof myString === 'string') {
  console.log(myString);
}
if (typeof myString === 'number') {
  console.log('Number: ' + myString);
}
// This is a string
```

```js
var myNumber = 42;
if (myNumber > 0) {
  console.log('Greater than 0');
}
if (myNumber > 100) {
  console.log('Greater than 100');
}
if (myNumber === 42) {
  console.log('The answer to everything');
}
// Greater than 0
// The answer to everything
```

```js
var color = 'blue';
if (color === 'blue') {
  console.log('The sky is blue');
}
if (color === 'green') {
  console.log('The grass is green');
}
// The sky is blue
```

As you can see in those examples, for the conditions that are true, the statement is executed, while the statements with false conditions are skipped.

## `if, else` Statements

`if, else` statements can be thought of as a branching point. If the `if` condition is true, then the code in that block is executed and the `else` block is skipped. If the `if` condition is false, then that block is skipped and the `else` block is executed. Here's the structure:

```js
if (condition) {
  // do something
} else {
  // default action
}
```

The `else` block acts as a default - the code executes any time the `if` condition is false. Here are a couple examples.

```js
var choice = 'left';
if (choice === 'left') {
  console.log('You have chosen the left path.');
} else {
  console.log('You have chosen the right path.');
}
// You have chosen the left path.
```

```js
var choice = 'right';
if (choice === 'left') {
  console.log('You have chosen the left path.');
} else {
  console.log('You have chosen the right path.');
}
// You have chosen the right path.
```

## `if, else if, else` Statements

`if, else if, else` statements are the same as an `if, else` statement, but with more branches. You can have as many `else if` statements as you want. Here's the structure:

```js
if (condition) {
  // do something
} else if (different condition) {
  // do something else
} else {
  // default action
}
```

The `else` statement still acts as a default, but with more conditions to check first. Let's expand on the above examples.

```js
var choice = 'right';
if (choice === 'left') {
  console.log('You have chosen the left path.');
} else if (choice === 'right') {
  console.log('You have chosen the right path.');
} else {
  console.log('That is an invalid choice.');
}
// You have chosen the right path.
```

```js
var choice = 42;
if (choice === 'left') {
  console.log('You have chosen the left path.');
} else if (choice === 'right') {
  console.log('You have chosen the right path.');
} else {
  console.log('That is an invalid choice.');
}
// That is an invalid choice.
```

Similar to a single `if` statement, you can leave off the `else` statement here. If all of the `if` and `else if` conditions are false, then nothing will happen and it skips the entire set.

```js
var time = 1200;
var timeOfDay = 'It is noon.';
if (time < 1200) {
  timeOfDay = 'Sometime in the morning.';
} else if (time > 1200) {
  timeOfDay = 'Sometime in the afternoon or evening.';
}
console.log(timeOfDay);
// It is noon.
```

## `switch` Statements

`switch` statements (also known as `switch, case` statements) are similar to `if, else if, else` statements. Here is the structure.

```js
switch (expression) {
  case 'one':
    // 'one' matches the result of the expression, do this
    break;
  case 'two':
    // 'two' matches the result of the expression, do this
    break;
  default:
    // no matching cases, do this
    break;
}
```

An expression is checked at the `switch` line, similar to an `if` condition. Once the expression is evaluated, it goes through the list of `case` values until it finds a match, and then executes the code within the `case` statement. If no match is found, then the `default` statement is executed (similar to an `else` statement).

Like `else if` statements, you can have as many `case` blocks as you want. Similarly, the `default` block is optional (just like an `else` statement).

`switch` statements are commonly used to match user input to an expected set of values. Here's an example.

```js
var color = 'blue';
switch (color) {
  case 'blue':
    console.log('You picked blue');
    break;
  case 'red':
    console.log('You picked red');
    break;
  case 'yellow':
    console.log('You picked yellow');
    break;
  default:
    console.log('Invalid color');
    break;
}
// You picked blue
```

The `break;` lines at the end of each case are important. If those aren't there, fall through can occur. What this means is that when a case's code is run and there is no break, the code falls through to the next case, and that block of code also executes. A good practice to avoid this is to write your case value, then immediately add the break before adding the code in between.

That being said, sometimes the fall through effect is what you want to happen. In the following example, we’re checking the months to get the season.

```js
var month = 'April';
switch (month) {
  case 'December':
  case 'January':
  case 'February':
    console.log('Winter');
    break;
  case 'March':
  case 'April':
  case 'May':
    console.log('Spring');
    break;
  case 'June':
  case 'July':
  case 'August':
    console.log('Summer');
    break;
  case 'September':
  case 'October':
  case 'November':
    console.log('Fall');
    break;
  default:
    console.log('Not a valid month');
    break;
}
// Spring
```