Instrução switch do JavaScript

Introdução à instrução switch

Em JavaScript, a instrução switch executa um de vários blocos de código dependendo do valor de uma única expressão. Quando você se encontra escrevendo uma longa cadeia de instruções if / else if que comparam a mesma variável com valores diferentes, um switch geralmente é uma forma mais limpa e legível de expressar a mesma lógica.

Este capítulo aborda a sintaxe completa, como case, break e default funcionam juntos, fall-through intencional vs. acidental, a correspondência estrita (===) usada pelo switch, como criar escopo para variáveis dentro de um case e quando switch é — e quando não é — a escolha certa.

Como o switch funciona

Um switch avalia sua expressão uma vez, depois compara o resultado com cada valor de case de cima para baixo usando comparação estrita (===). O primeiro case correspondente se torna o ponto de entrada: a execução começa ali e continua pelas instruções seguintes até encontrar um break, um return ou o fim do switch. Se nenhum case corresponder, o bloco default opcional é executado.

Sintaxe e Estrutura da instrução switch

O esqueleto de uma instrução switch é assim:

switch(expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    break;
  case value2:
    //Statements for value2
    break;
  default:
    //Statements executed if no case matches
}

Algumas regras que vale lembrar:

• A expressão é avaliada apenas uma vez, no início.
• Os rótulos case devem ser seguidos por dois-pontos (:), não por chaves.
• break encerra o switch; sem ele, a execução cai para o próximo case (veja Fall-Through abaixo).
• default é opcional e não precisa vir por último, embora colocá-lo no final seja a convenção.

Exemplo de um switch Básico

Fall-Through: Agrupamento vs. Acidental

Quando um case não tem break, a execução "cai" para o próximo case. Esse é um único mecanismo com dois resultados muito diferentes — um útil, outro um bug clássico.

Agrupamento Intencional (fall-through bom)

Empilhando rótulos case vazios, você pode executar o mesmo código para vários valores. Essa é a forma idiomática de lidar com "qualquer uma dessas entradas deve fazer a mesma coisa."

Como 'apple' corresponde ao primeiro rótulo e esse rótulo não tem corpo, a execução flui para o console.log('Red fruit') compartilhado e então para no break.

Fall-Through Acidental (o bug)

Se você esquecer um break, todos os cases após a correspondência também são executados até o próximo break ou o fim do switch. Aqui fruit é 'apple', mas todas as quatro linhas são impressas:

Adicionar break; após cada console.log limitaria a saída a apenas Apple is red.. A regra geral: encerre cada case com break (ou return) a menos que você esteja deliberadamente agrupando cases.

Escopo de Bloco Dentro de um case

Todas as cláusulas case compartilham um escopo de bloco — o corpo do switch. Isso significa que um let ou const declarado em um case é visível para os outros e pode causar um erro "Cannot access before initialization". Envolva o corpo de um case em suas próprias chaves { ... } para dar a ele um escopo privado:

Sem as chaves, declarar const result em ambos os cases causaria um erro de sintaxe devido à declaração duplicada no escopo compartilhado.

Correspondência Estrita (===) no switch

O switch do JavaScript compara a expressão com cada valor de case usando igualdade estrita (===) — nenhuma coerção de tipo ocorre. Portanto, o tipo também deve corresponder, não apenas o valor. Para mais detalhes sobre como === difere de ==, consulte Operadores de Comparação.

Neste exemplo, a string '0' não corresponde ao número 0, então o default é executado:

Se você precisar corresponder independentemente do tipo, converta a expressão primeiro, ex.: switch (Number(x)).

switch vs. if/else

Ambos podem expressar a mesma lógica de ramificação, então escolha com base na forma da condição:

• Prefira switch quando você compara um valor contra muitas opções discretas e constantes (um código de status, um nome de comando, uma opção de menu). A leitura é clara e a intenção é óbvia.
• Prefira if / else if quando as condições são intervalos ou expressões booleanas (age >= 18, score > 90 && passed), envolvem variáveis diferentes ou precisam de flexibilidade que o === estrito não pode oferecer.
• Para mapear uma chave a um único valor, uma consulta em um objeto simples (const labels = { add: 'Addition' }) costuma ser mais curta do que qualquer um dos dois. Consulte Operadores Lógicos para combinar condições no estilo if.

Conclusão

A instrução switch em JavaScript é uma ferramenta versátil para lidar com múltiplas condições. Compreender seu uso adequado e suas nuances pode melhorar significativamente a legibilidade e a eficiência do seu código.

Prática