JavaScript (ES5) Conditionals

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:

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

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

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

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:

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.

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.

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:

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.

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.

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.

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.

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.

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.

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