Is returning out of a switch statement considered a better practice than using break?

Question

Option 1 - switch using return:

function myFunction(opt) {
  switch (opt) {
    case 1: return "One";
    case 2: return "Two";
    case 3: return "Three";

    default: return "";
  }    
}

Option 2 - switch using break:

function myFunction(opt) {
  let retVal = "";

  switch (opt) {
    case 1: 
      retVal = "One";
      break;
    case 2: 
      retVal = "Two";
      break;
    case 3: 
      retVal = "Three";
      break;
  }

  return retVal;
}

I know that both work, but is one more of a best practice? I tend to like Option 1 - switch using return best, as it's cleaner and simpler.

---

Here is a jsFiddle of my specific example using the technique mentioned in @ic3b3rg's comments:

let SFAIC = {};

SFAIC.common = {
  masterPages: {
    cs: "CS_",
    cp: "CP_"
  },
  contentPages: {
    cs: "CSContent_",
    cp: "CPContent_"    
  }
};

function getElementPrefix(page) {
  return (page in SFAIC.common.masterPages)
    ? SFAIC.common.masterPages[page]
    : (page in SFAIC.common.contentPages)
      ? SFAIC.common.contentPages[page]
      : undefined;
}

To call the function, I would do so in the following ways:

getElementPrefix(SFAIC.common.masterPages.cs);
getElementPrefix(SFAIC.common.masterPages.cp);
getElementPrefix(SFAIC.common.contentPages.cs);
getElementPrefix(SFAIC.common.contentPages.cp);

The problem here is that it always returns undefined. I'm guessing that it's because it's passing in the actual value of the object literal and not the property. What would I do to fix this using the technique described in @ic3b3rg's comments?

Answer 1

A break will allow you continue processing in the function. Just returning out of the switch is fine if that's all you want to do in the function.

Answer 2

Neither, because both are quite verbose for a very simple task. You can just do:

const result = ({
  1: 'One',
  2: 'Two',
  3: 'Three'
})[opt] ?? 'Default'  // opt can be 1, 2, 3 or anything (default)

This, of course, also works with strings, a mix of both or without a default case:

const result = ({
  first: 'One',
  'sec-ond': 'Two',
  3: 'Three'
})[opt]  // opt can be 'first', 'sec-ond' or 3

Explanation:

It works by creating an object where the options/cases are the keys and the results are the values. By putting the option into the brackets you access the value of the key that matches the expression via the bracket notation.

This returns undefined if the expression inside the brackets is not a valid key. We can detect this undefined-case by using the nullish coalescing operator ?? and return a default value.

Example:

console.log('Using a valid case:', ({
  1: 'One',
  2: 'Two',
  3: 'Three'
})[1] ?? 'Default')

console.log('Using an invalid case/defaulting:', ({
  1: 'One',
  2: 'Two',
  3: 'Three'
})[7] ?? 'Default')

.as-console-wrapper {max-height: 100% !important;top: 0;}

Answer 3

It depends, if your function only consists of the switch statement, then I think that its fine. However, if you want to perform any other operations within that function, its probably not a great idea. You also may have to consider your requirements right now versus in the future. If you want to change your function from option one to option two, more refactoring will be needed.

However, given that within if/else statements it is best practice to do the following:

var foo = "bar";

if(foo == "bar") {
    return 0;
}
else {
    return 100;
}

Based on this, the argument could be made that option one is better practice.

In short, there's no clear answer, so as long as your code adheres to a consistent, readable, maintainable standard - that is to say don't mix and match options one and two throughout your application, that is the best practice you should be following.