Alternar vários casos em Javascript

1. Switch com múltiplos casos em Javascript usando Fall Through Model
2. Lidando com vários casos em Switch usando expressões matemáticas em JavaScript
3. Lidando com vários casos em Switch usando expressões de string em Javascript
4. Manipulando Múltiplos Casos em Switch Usando Expressões Lógicas em Javascript

Os casos de switch têm muito mais desempenho do que a escada if-else. Eles têm um mapa direto de valores de uma variável, no bloco switch(variable), para seus valores correspondentes, no bloco case: value. Estamos familiarizados com o uso usual de switch-case com um único mapa de valor, mas ele pode suportar vários casos? Vejamos algumas maneiras, em javascript, em que podemos ter vários casos no bloco switch-case.

Switch com múltiplos casos em Javascript usando Fall Through Model

O modelo Fall through é um primeiro passo para suportar switch com mais de um bloco case em javascript. Aqui, capturamos vários valores da variável comutada por meio de vários casos. Aplicamos a palavra-chave break para um conjunto de casos válidos. Por exemplo, se quisermos registrar o nome do trimestre de um ano, dependendo do mês que passou, definiremos os índices do mês com base no trimestre. Consulte o código a seguir.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

Resultado:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

A função findQuarter() aceita uma string de data no formato aaaa-mm-dd. Em seguida, extrai o índice do mês do argumento dateString, primeiro convertendo-o em um objeto de data javascript e, em seguida, obtendo o índice do mês do objeto de data. O getMonth() é uma função javascript que se aplica a um objeto Date e retorna o índice do mês começando em 0. Usamos vários casos aqui, empilhados um abaixo do outro para capturar vários valores para a saída.

Por exemplo, para meses de janeiro a março, os respectivos índices de mês irão variar de 0 a 2 com base na saída retornada pela função getMonth(). Empilhamos todos os casos de 0 a 2 sem a palavra-chave break. Assim, eles tropeçam e escapam do switch-case ao encontrar o break que passa a estar na linha case 2: onde regista o valor First Quarter. Este conjunto de códigos parece volumoso. Podemos reescrever o mesmo da seguinte maneira para reduzir o número de linhas.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

Resultado:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Observe que aqui a saída permanece a mesma. É apenas outra forma de escrever o modelo Fall through switch-case. Isso faz com que o código pareça mais limpo e economize espaço.

Lidando com vários casos em Switch usando expressões matemáticas em JavaScript

Estamos lidando com valores numéricos de um mês conforme o exemplo mencionado na seção anterior. Podemos usar expressões em blocos case? Definitivamente sim! Vamos consultar o código a seguir antes de explicar o funcionamento.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-2-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
        case ( (monthIndex < 2) ? monthIndex : -1 ):
            console.log('First Quarter');
          break;
        case ( ((monthIndex > 2) && (monthIndex < 5)) ?  monthIndex : -1):
            console.log('Second Quarter');
          break;
        case ( ((monthIndex > 5) && (monthIndex < 8)) ?  monthIndex : -1):
            console.log('Third Quarter');
          break;
        case ( ((monthIndex > 8) && (monthIndex < 11)) ?  monthIndex : -1):
            console.log('Fourth Quarter');
          break;
        default:
          console.log('Invalid date');
          break;
  }
}

Resultado:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Se usarmos expressões no caso de switch, elas devem retornar um valor numérico, caso contrário, -1. No trecho de código acima, adicionamos expressões numéricas no bloco case em vez de seus valores reais. Essas expressões são avaliadas para o trimestre correspondente do mês e registram o nome do trimestre. Aqui, incluímos a cláusula default no switch case para lidar com Invalid date. O método getMonth() em javascript retorna um valor (entre 0 e 11) se o mês em data for válido (dentro do intervalo de 1 a 12), caso contrário, ele retornará NaN. O bloco default capturará esses cenários de data inválida.

Lidando com vários casos em Switch usando expressões de string em Javascript

Também podemos usar expressões de string dentro do bloco case. Essas expressões são avaliadas em tempo de execução, executando a cláusula case. Para nosso exemplo de mês, vamos tentar mudar o nome do mês. Para isso, estaremos aplicando a função toLocaleDateString() no objeto de data. No parâmetro de opções da função, fornecemos { month: 'long' }. A saída para toLocaleDateString('en-US', { month: 'long' }) agora será um nome de mês, o nome completo do mês. Em seguida, mudamos a saída do nome do mês completo da função toLocaleDateString('en-US', { month: 'long' }).

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case['January', 'February', 'March'].includes(monthName):
      console.log('First Quarter');
      break;
    case['April', 'May', 'June'].includes(monthName):
      console.log('Second Quarter');
      break;
    case['July', 'August', 'September'].includes(monthName):
      console.log('Third Quarter');
      break;
    case['October', 'November', 'December'].includes(monthName):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

Resultado:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

No código acima, usamos a instrução switch(true). Na cláusula case, temos a comparação de strings. Criamos um array temporário de meses para cada trimestre e os adicionamos a cada case. Em seguida, verificamos se monthName está disponível na matriz trimestre. Se encontrado, ele registrará o nome do trimestre. Se a data for inválida, a função toLocaleDateString('en-US', { month: 'long' }) produzirá Invalid Date. Este cenário é capturado pelo bloco default, pois a string Invalid Date não corresponderá às matrizes predefinidas que contêm os nomes dos meses de um trimestre. Portanto, lidamos com o cenário de data inválida sem problemas aqui.

Manipulando Múltiplos Casos em Switch Usando Expressões Lógicas em Javascript

Como vimos nas expressões matemáticas e de string, também podemos usar operadores lógicos em casos múltiplos no bloco switch-case. No exemplo do mês, usaremos o operador lógico OR || para decidir se o nome do mês está em um determinado trimestre. Vamos nos referir ao código a seguir.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case (
        monthName === 'January' || monthName === 'February' ||
        monthName === 'March'):
      console.log('First Quarter');
      break;
    case (monthName === 'April' || monthName === 'May' || monthName === 'June'):
      console.log('Second Quarter');
      break;
    case (
        monthName === 'July' || monthName === 'August' ||
        monthName === 'September'):
      console.log('Third Quarter');
      break;
    case (
        monthName === 'October' || monthName === 'November' ||
        monthName === 'December'):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

Resultado:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

No código, verificamos se o valor monthName é igual ao mês de um trimestre. Assim, consolamos o nome do bairro. Aqui também lidamos com o caso de data inválida, pois não satisfaz nenhuma das condições codificadas na cláusula case e cairá no bloco default, que então imprime Invalid date no console do navegador.