Switch statement for multiple cases in JavaScript

JavascriptSwitch Statement

Javascript Problem Overview

I need multiple cases in switch statement in JavaScript, Something like:

switch (varName)
{
   case "afshin", "saeed", "larry":
       alert('Hey');
       break;

   default:
       alert('Default case');
       break;
}

How can I do that? If there's no way to do something like that in JavaScript, I want to know an alternative solution that also follows the DRY concept.

Javascript Solutions

Solution 1 - Javascript

Use the fall-through feature of the switch statement. A matched case will run until a break (or the end of the switch statement) is found, so you could write it like:

switch (varName)
{
   case "afshin":
   case "saeed":
   case "larry": 
       alert('Hey');
       break;

   default: 
       alert('Default case');
}

Solution 2 - Javascript

This works in regular JavaScript:

function theTest(val) {
  var answer = "";
  switch( val ) {
    case 1: case 2: case 3:
      answer = "Low";
      break;
    case 4: case 5: case 6:
      answer = "Mid";
      break;
    case 7: case 8: case 9:
      answer = "High";
      break;
    default:
      answer = "Massive or Tiny?";
  }
  return answer;
}

theTest(9);

Solution 3 - Javascript

Here's different approach avoiding the switch statement altogether:

var cases = {
  afshin: function() { alert('hey'); },
  _default: function() { alert('default'); }
};
cases.larry = cases.saeed = cases.afshin;

cases[ varName ] ? cases[ varName ]() : cases._default();

Solution 4 - Javascript

In Javascript to assign multiple cases in a switch, we have to define different case without break inbetween like given below:

   <script>
      function checkHere(varName){
        switch (varName)
           {
           case "saeed":
           case "larry":
           case "afshin":
                alert('Hey');
                break;
          case "ss":
               alert('ss');
               break;
         default:
               alert('Default case');
               break;
       }
      }
     </script>

Please see example click on link

Solution 5 - Javascript

I like this for clarity and a DRY syntax.

varName = "larry";

switch (true)
{
    case ["afshin", "saeed", "larry"].includes(varName) :
       alert('Hey');
       break;

    default:
       alert('Default case');

}

Solution 6 - Javascript

If you're using ES6, you can do this:

if (['afshin', 'saeed', 'larry'].includes(varName)) {
   alert('Hey');
} else {
   alert('Default case');
}

Or for earlier versions of JavaScript, you can do this:

if (['afshin', 'saeed', 'larry'].indexOf(varName) !== -1) {
   alert('Hey');
} else {
   alert('Default case');
}

Note that includes won't work in some browser including older IE versions, but you could patch things up fairly easily. See the question determine if string is in list in javascript for more information.

Solution 7 - Javascript

My situation was something akin to:

switch (text) {
  case SOME_CONSTANT || ANOTHER_CONSTANT:
    console.log('Case 1 entered');

  break;

  case THIRD_CONSTANT || FINAL_CONSTANT:
    console.log('Case 2 entered');

  break;

  default:
    console.log('Default entered');
}

The default case always entered. If you're running into a similar multi-case switch statement issue, you're looking for this:

switch (text) {
  case SOME_CONSTANT:
  case ANOTHER_CONSTANT:
    console.log('Case 1 entered');

  break;

  case THIRD_CONSTANT:
  case FINAL_CONSTANT:
    console.log('Case 2 entered');

  break;

  default:
    console.log('Default entered');
}

Solution 8 - Javascript

Adding and clarifying Stefano's answer, you can use expressions to dynamically set the values for the conditions in switch, e.g.:

var i = 3
switch (i) {
    case ((i>=0 && i<=5) ? i : -1):
        console.log('0-5');
        break;

    case 6: console.log('6');
}

So in your problem, you could do something like:

var varName = "afshin"
switch (varName) {
    case (["afshin", "saeed", "larry"].indexOf(varName)+1 && varName):
      console.log("hey");
      break;

    default:
      console.log('Default case');
}

Although it is so much DRY...

Solution 9 - Javascript

In Node.js it appears that you are allowed to do this:

data = "10";
switch(data){
    case "1": case "2": case "3": // Put multiple cases on the same
                                  // line to save vertical space.
        console.log("small");
        break;

    case "10": case "11": case "12":
        console.log("large");
        break;

    default:
        console.log("strange");
        break;
}

This makes for much more compact code in some cases.

Solution 10 - Javascript

I use it like this:

switch (true){
     case /Pressure/.test(sensor): 
     {
        console.log('Its pressure!');
        break;
     }

     case /Temperature/.test(sensor): 
     {
        console.log('Its temperature!');
        break;
     }
}

Solution 11 - Javascript

You can use the 'in' operator...
It relies on the object/hash invocation, so it's as fast as JavaScript can be.

// Assuming you have defined functions f(), g(a) and h(a,b)
// somewhere in your code,
// you can define them inside the object, but...
// the code becomes hard to read. I prefer it this way.

o = { f1:f, f2:g, f3:h };

// If you use "STATIC" code can do:
o['f3']( p1, p2 )

// If your code is someway "DYNAMIC", to prevent false invocations
// m brings the function/method to be invoked (f1, f2, f3)
// and you can rely on arguments[] to solve any parameter problems.
if ( m in o ) o[m]()

Solution 12 - Javascript

It depends. Switch evaluates once and only once. Upon a match, all subsequent case statements until 'break' fire no matter what the case says.

var onlyMen = true;
var onlyWomen = false;
var onlyAdults = false;
 
 (function(){
   switch (true){
     case onlyMen:
       console.log ('onlymen');
     case onlyWomen:
       console.log ('onlyWomen');
     case onlyAdults:
       console.log ('onlyAdults');
       break;
     default:
       console.log('default');
   }
})(); // returns onlymen onlywomen onlyadults


<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

Solution 13 - Javascript

Some interesting methods. For me the best way to solve is using .find.

You can give an indication of what the multiple cases are by using a suitable name inside your find function.

switch (varName)
{
   case ["afshin", "saeed", "larry"].find(firstName => firstName === varName):
       alert('Hey');
       break;

   default:
       alert('Default case');
       break;
}

Other answers are more suitable for the given example but if you have multiple cases to me this is the best way.

Solution 14 - Javascript

I can see there are lots of good answers here, but what happens if we need to check more than 10 cases? Here is my own approach:

 function isAccessible(varName){
     let accessDenied = ['Liam', 'Noah', 'William', 'James', 'Logan', 'Benjamin',
                        'Mason', 'Elijah', 'Oliver', 'Jacob', 'Daniel', 'Lucas'];
      switch (varName) {
         case (accessDenied.includes(varName) ? varName : null):
             return 'Access Denied!';
         default:
           return 'Access Allowed.';
       }
    }

    console.log(isAccessible('Liam'));

Solution 15 - Javascript

The problem with the above approaches, is that you have to repeat the several cases every time you call the function which has the switch. A more robust solution is to have a map or a dictionary.

Here is an example:

// The Map, divided by concepts
var dictionary = {
  timePeriod: {
    'month': [1, 'monthly', 'mensal', 'mês'],
    'twoMonths': [2, 'two months', '2 months', 'bimestral', 'bimestre'],
    'trimester': [3, 'trimesterly', 'quarterly', 'trimestral'],
    'semester': [4, 'semesterly', 'semestral', 'halfyearly'],
    'year': [5, 'yearly', 'annual', 'ano']
  },
  distance: {
    'km': [1, 'kms', 'kilometre', 'kilometers', 'kilometres'],
    'mile': [2, 'mi', 'miles'],
    'nordicMile': [3, 'Nordic mile', 'mil (10 km)', 'Scandinavian mile']
  },
  fuelAmount: {
    'ltr': [1, 'l', 'litre', 'Litre', 'liter', 'Liter'],
    'gal (imp)': [2, 'imp gallon', 'imperial gal', 'gal (UK)'],
    'gal (US)': [3, 'US gallon', 'US gal'],
    'kWh': [4, 'KWH']
  }
};

// This function maps every input to a certain defined value
function mapUnit (concept, value) {
  for (var key in dictionary[concept]) {
    if (key === value ||
      dictionary[concept][key].indexOf(value) !== -1) {
      return key
    }
  }
  throw Error('Uknown "'+value+'" for "'+concept+'"')
}

// You would use it simply like this
mapUnit("fuelAmount", "ltr") // => ltr
mapUnit("fuelAmount", "US gal") // => gal (US)
mapUnit("fuelAmount", 3) // => gal (US)
mapUnit("distance", "kilometre") // => km

// Now you can use the switch statement safely without the need
// to repeat the combinations every time you call the switch
var foo = 'monthly'
switch (mapUnit ('timePeriod', foo)) {
  case 'month':
    console.log('month')
    break
  case 'twoMonths':
    console.log('twoMonths')
    break
  case 'trimester':
    console.log('trimester')
    break
  case 'semester':
    console.log('semester')
    break
  case 'year':
    console.log('year')
    break
  default:
    throw Error('error')
}

Solution 16 - Javascript

You can do this:

alert([
  "afshin", 
  "saeed", 
  "larry",
  "sasha",
  "boby",
  "jhon",
  "anna",
  // ...
].includes(varName)? 'Hey' : 'Default case')

or just a single line of code:

alert(["afshin", "saeed", "larry",...].includes(varName)? 'Hey' : 'Default case')

a little improvement from ErikE's answer

Solution 17 - Javascript

One of the possible solutions is:

const names = {
afshin: 'afshin',
saeed: 'saeed',
larry: 'larry'
};

switch (varName) {
   case names[varName]: {
       alert('Hey');
       break;
   }

   default: {
       alert('Default case');
       break;
   }
}

Solution 18 - Javascript

Another way of doing multiple cases in a switch statement, when inside a function:

function name(varName){ switch (varName) { case 'afshin': case 'saeed': case 'larry': return 'Hey'; default: return 'Default case'; } }

console.log(name('afshin')); // Hey

Solution 19 - Javascript

Cleaner way to handle that

if (["triangle", "circle", "rectangle"].indexOf(base.type) > -1)
{
    //Do something
}else if (["areaMap", "irregular", "oval"].indexOf(base.type) > -1)
{
    //Do another thing
}

You can do that for multiple values with the same result

Solution 20 - Javascript

Just change the switch condition approach:

switch (true) {
    case (function(){ return true; })():
        alert('true');
        break;
    case (function(){ return false; })():
        alert('false');
        break;
    default:
        alert('default');
}

Solution 21 - Javascript

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example1</title>
    <link rel="stylesheet" href="css/style.css" >
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script>
		function display_case(){
			var num	=	document.getElementById('number').value;
			
				switch(num){
				
					case (num = "1"):
					document.getElementById("result").innerHTML = "You select day Sunday";
					break;
					
					case (num = "2"):
					document.getElementById("result").innerHTML = "You select day  Monday";
					break;
					
					case (num = "3"):
					document.getElementById("result").innerHTML = "You select day  Tuesday";
					break;
					
					case (num = "4"):
					document.getElementById("result").innerHTML = "You select day  Wednesday";
					break;
					
					case (num = "5"):
					document.getElementById("result").innerHTML = "You select day  Thusday";
					break;
				
					case (num = "6"):
					document.getElementById("result").innerHTML = "You select day  Friday";
					break;
					
					case (num = "7"):
					document.getElementById("result").innerHTML = "You select day  Saturday";
					break;
					
					default:
					document.getElementById("result").innerHTML = "You select day  Invalid Weekday";
					break
				}
			
		}
	</script>
</head>
<body>
    <center>
    	<div id="error"></div>
        <center>
        	<h2> Switch Case Example </h2>
            <p>Enter a Number Between 1 to 7</p>
            <input type="text" id="number" />
            <button onclick="display_case();">Check</button><br />
            <div id="result"><b></b></div>
        </center>
    </center>
</body>

Solution 22 - Javascript

You could write it like this:

switch (varName)
{
   case "afshin": 
   case "saeed": 
   case "larry": 
       alert('Hey');
       break;
    
   default: 
       alert('Default case');
       break;
}

Solution 23 - Javascript

For me this is the simplest way:

switch (["afshin","saeed","larry"].includes(varName) ? 1 : 2) {
   case 1:
       alert('Hey');
       break;

   default:
       alert('Default case');
       break;
}
Categories
Recommended Javascript Solutions
Recommended Switch Statement Solutions

Previous Solution:

Make body have 100% of the browser height

HtmlCssHeight

Next Solution:

Creating a byte array from a stream

C#.Net 3.5Inputstream

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAfshin MehrabaniView Question on Stackoverflow
Solution 1 - JavascriptkennytmView Answer on Stackoverflow
Solution 2 - JavascriptRob WelanView Answer on Stackoverflow
Solution 3 - JavascriptelclanrsView Answer on Stackoverflow
Solution 4 - JavascriptEr. Anurag JainView Answer on Stackoverflow
Solution 5 - JavascriptKyle DudleyView Answer on Stackoverflow
Solution 6 - JavascriptErikEView Answer on Stackoverflow
Solution 7 - JavascriptMike KView Answer on Stackoverflow
Solution 8 - JavascriptBernardo Dal CornoView Answer on Stackoverflow
Solution 9 - JavascriptAutomaticoView Answer on Stackoverflow
Solution 10 - JavascriptSergey VolkovView Answer on Stackoverflow
Solution 11 - JavascriptZEEView Answer on Stackoverflow
Solution 12 - JavascriptRonnie RoystonView Answer on Stackoverflow
Solution 13 - JavascriptScott O'DeaView Answer on Stackoverflow
Solution 14 - JavascriptAravinda MeewalaarachchiView Answer on Stackoverflow
Solution 15 - JavascriptJoão Pimentel FerreiraView Answer on Stackoverflow
Solution 16 - JavascriptDedy AbdillahView Answer on Stackoverflow
Solution 17 - JavascriptJackkobecView Answer on Stackoverflow
Solution 18 - JavascriptMorris SView Answer on Stackoverflow
Solution 19 - JavascriptAbrahamView Answer on Stackoverflow
Solution 20 - JavascriptStefano FaveroView Answer on Stackoverflow
Solution 21 - JavascriptKirandeep SinghView Answer on Stackoverflow
Solution 22 - JavascriptTim AnishereView Answer on Stackoverflow
Solution 23 - JavascriptJosé Pérez BautistaView Answer on Stackoverflow