DEV Community

Randy Rivera
Randy Rivera

Posted on

Switch Statements

Selecting from Many Options with Switch Statements

If you have many options to choose from, use a switch statement. A switch statement tests a value and can have many case statements which define various possible values. Statements are executed from the first matched case value until a break is encountered.

  • Example:
function caseInSwitch(val) {
  var result = "";

  switch (val) {
    case 1:
      result = "alpha";
      break;
    case 2:
      result = "beta";
      break;
    case 3:
      result = "gamma";
      break;
    case 4:
      result = "delta";
      break;
  }

  return result;
}

console.log(caseInSwitch(1)); will display alpha
Enter fullscreen mode Exit fullscreen mode

NOTE: case values are tested with strict equality (===). The break tells JavaScript to stop executing statements. If the break is omitted, the next statement will be executed.

Adding a Default Option in Switch Statements

In a switch statement you may not be able to specify all possible values as case statements. Instead, you can add the default statement which will be executed if no matching case statements are found.

Also a default statement should be the last case.

  • Example:
function switchOfStuff(val) {
  var result = "";

  switch (val) {
    case "a":
      result = "apple";
      break;
    case "b":
      result = "bird";
      break;
    case "c":
      result = "cat";
      break;
    default:
      result = "stuff";
      break;
  }

  return result;
}
console.log(switchOfStuff(4)); will display stuff
Enter fullscreen mode Exit fullscreen mode

Multiple Identical Options in Switch Statements

  • If you have multiple inputs with the same output, you can represent them in a switch statement like this:
function sequentialSizes(val) {
  var result = "";

  switch (val) {
    case 1:
    case 2:
    case 3:
      result = "Low";
      break;
    case 4:
    case 5:
    case 6:
      result = "Mid";
      break;
    case 7:
    case 8:
    case 9:
      result = "High";
      break;
  }

  return result;
}

console.log(sequentialSizes(1)); will display Low
Enter fullscreen mode Exit fullscreen mode

Here Cases for 1, 2, and 3 will all produce the same result.

Replacing If Else Chains with Switch

Honestly If you have many options to choose from, a switch statement can be easier to write than many chained if/else if statements.

  • Example:
function chainToSwitch(val) {
  var result = "";


  if (val === "Randy") {
    result = "Video Games";
  } else if (val === 62) {
    result = "The Answer";
  } else if (val === 1) {
    result = "There is no #1";
  } else if (val === 234) {
    result = "Missed me by this much!";
  } else if (val === "Alan) {
    result = "Cars";
  }

  return result;
}

chainToSwitch(7);
Enter fullscreen mode Exit fullscreen mode
  • Can be changed to:
function chainToSwitch(val) {

  var result = "";

  switch(val) {
    case "Randy":
     result = "Video Games";
     break;
    case 62:
     result = "The Answer";
     break;
    case 1:
     result = "There is no #1";
     break;
    case 234:
     result = "Missed me by this much!";
     break;
    case "Alan":
     result = "Cars";
     break;
  }

  return result;
}

console.log(chainToSwitch(62)); will display The Answer
console.log(chainToSwitch(255)); will display "" (empty string)
Enter fullscreen mode Exit fullscreen mode

Returning Boolean Values from Functions

You may remember from Comparison with the Equality Operator that all comparison operators return a boolean true or false value.

Sometimes people use an if/else statement to do a comparison.

  • Example:
function isEqual(a, b) {

  if (a === b) {
    return true;
  } else {
    return false;
  }

}

isEqual(10, 15);
Enter fullscreen mode Exit fullscreen mode
  • There's a better way to do this. Since === returns true or false, we can return the result of the comparison:
function isEqual(a, b) {
  return a === b;

}

console.log(isEqual(10, 15)); will display false
Enter fullscreen mode Exit fullscreen mode

Top comments (0)