The Inverted Switch Pattern in Javascript

A normal switch can look like this

switch (color) {
  case "red":
    return "apple"
  case "yellow":
    return "banana"
  default:
    return null
}

The inverted switch looks like this

switch (true) {
  case color === "red":
    return "apple"
  case color === "yellow":
    return "banana"
}

This is similar to a series of inline if statements

if (color === "red") return "apple"
 
if (color === "yellow") return "banana"

For if statements to span multiple expressions, they need enclosing braces

if (color === "red") {
  const apple = getApple()
  apple.shape = "round"
 
  return apple
}
 
if (color === "yellow") {
  const banana = getBanana()
  banana.shape = "banana-shape?"
 
  return banana
}

But switch statements can increase in complexity without additional syntax

switch (true) {
  case color === "red":
    const apple = getApple()
    apple.shape = "round"
 
    return apple
 
  case color === "yellow":
    const banana = getBanana()
    banana.shape = "banana-shape?"
 
    return banana
}

To handle OR conditions, if statements require the || operator

if (color === 'red' || color === 'green')

Switches have a fall-through feature where they continue if there is no return or break keyword, so multiple OR cases can share a single execution block. In this example, both red and green will return an apple.

switch (true) {
  case color === "red":
  case color === "green":
    const apple = getApple()
 
    return apple
 
  case color === "yellow":
    const banana = getBanana()
    banana.shape = "banana-shape?"
 
    return banana
}

References

https://kyleshevlin.com/pattern-matching