WDI Fundamentals

WDI Fundamentals Unit 9


Conditionals

if...else Statements

Conditional statements are the expressions that allow us to test whether or not to perform an action.

One of these conditionals is an if statement. An if statement will take in a condition and, if that condition is "truthy," run whatever code you specify. Here's an example of an if statement in action:

if (x > 10) {
  x += 10;
  y += 10;
}

The condition is what's inside the parentheses. If that condition is "truthy," the lines of code inside the curly braces ({...}) will be evaluated one by one.

Let's take a step back for a minute and consider something that's closer to our own experience: a flow chart.

XKCD Flow Chart

src: http://xkcd.com/518/

A flow chart is a visual diagram that tells us how to behave, depending on a certain set of conditions. If we were to try to draw a flow chart to describe an if statement, we might come up with something like this:

Flow Chart for `If` Statement

As you can see, people progressing through this diagram would need to make a decision. Depending on whether or not our condition is "truthy," they would either enter the block of code or skip over it entirely.

if can actually be modified in several ways to change its behavior. For instance, adding an else if to our if statement allows us to specify a second condition to test. However, this second condition will only be tested if the first condition fails.

if (x > 10) {
  x += 10;
  y += 10;
} else if (x > 5) {
  x += 5;
}


We can add as many `else if` statements as we want — we just keep tacking them on.

if (x > 10) {
  x += 10;
  y += 10;
} else if (x > 5) {
  x += 5;
} else if (x > 3) {
  x += 3;
}


However, if all of the conditions fail, nothing will happen. To specify behavior for this outcome, we must add an else to the end of our statement, like so:

if (x > 10) {
  x += 10;
  y += 10;
} else if (x > 5) {
  x += 5;
} else if (x > 3) {
  x += 3;
} else {
  x += 1;
}


Using if...else statements allows us to write code that can behave very differently in different circumstances.

Test Yourself

Consider the following conditional statement:

if (x > 5) {
  y = 50;
} else if (x < 5) {
  y = 33;
} else {
  y = 100;
}
  • What value will be assigned to y if ...
    • x is 10?
    • x is 4?
  • Under what circumstances will y be assigned a value of 100?

Try copying that whole statement into JS Bin and testing out different values for x. Were your answers correct?

switch Statements

As we've seen before, we can choose which condition will be executed using if...else if...else. If we have a long list of conditions, however, the code becomes a bit repetitive and hard to read. For example:

// day of the week in a number, Sunday is 0, Saturday is 6
var dayNumber = 1;
if(dayNumber === 0){
  day = 'Sunday';
} else if(dayNumber === 1) {
  day = 'Monday';
} else if(dayNumber === 2) {
  day = 'Tuesday';
} else if(dayNumber === 3) {
  day = 'Wednesday';
} else if(dayNumber === 4) {
  day = 'Thursday';
} else if(dayNumber === 5) {
  day = 'Friday';
} else if(dayNumber === 6) {
  day = 'Saturday';
} else {
  day = null;
  alert('wrong value for day');
}

What this code does fundamentally is pretty simple — it takes in a number (representing a particular day of the week) and spits out a string containing the name of that day. However, this code is not easy to read, and a lot of it is repeated — for example, } else if(dayNumber === __ ) { is repeated seven times. What's more, if we ever want to change the name of our dayNumber variable, we'll need to swap it out every time it appears, which is a bit of a pain.

Enter the switch statement:

var dayNumber = 1;

switch (dayNumber) {
  case 0:
    day = 'Sunday';
    break;
  case 1:
    day = 'Monday';
    break;
  case 2:
    day = 'Tuesday';
    break;
  case 3:
    day = 'Wednesday';
    break;
  case 4:
    day = 'Thursday';
    break;
  case 5:
    day = 'Friday';
    break;
  case 6:
    day = 'Saturday';
    break;
  default:
    day = null;
    alert('wrong value for day');
}

This code works exactly the same as if...else if...else, but, although it's slightly longer (in terms of lines), it is significantly easier to read.

In a switch statement, the variable in parentheses (in this case, dayNumber) gets evaluated. If there is a case listed for the value it evaluates to, the code between case __: and break will be executed. If there is no case that matches the value of the variable, the default will be executed (that is, if it is specified; if not, the program will do nothing).

: If there is no break; at the end of a case, the computer will not skip to the end of the code block but will instead start executing the next case's code (even if case's value is different from the variable's). It will continue doing so until it eventually hits a break; statement. For this reason, default never needs a break; statement, because it's the last case in the switch.

Although the switch statement sometimes has some advantages over if...else if...else, it also has some major disadvantages. For instance, a switch statement will only work if you are testing the same variable (or expression) in every condition. If not, if...else if...else is your only option. Also, depending on the circumstances, using if...else if...else might scan more naturally.

Test Yourself

Consider the following switch statement:

switch (2 * x) {
 case 2:
    y = 49;
    break;
 case 4:
    y = 37;
    break;
 case 6:
    y = 25;
    break;
 case 8:
    y = 13;
    break;
 default:
    y = 1;
}

What value will y be assigned when x is...

  • 1?
  • 4?
  • 0?
  • "Hello"?

Now, let's do another exercise.