Menu

Switch em JavaScript: case, break e fallthrough

Entenda como funciona o switch em JavaScript: case, break, default, fallthrough e quando ele é melhor que uma sequência de if/else.

Switch em JavaScript: escolhendo um caminho entre vários

O switch é uma estrutura de controle de fluxo ideal para quando você precisa comparar um mesmo valor com várias opções conhecidas. Dá pra fazer a mesma coisa com uma sequência de if/else if/else, só que, a partir do momento em que você começa a testar a mesma variável três ou quatro vezes seguidas, o switch fica bem mais legível.

A estrutura básica é esta:

index.js
Output
Click Run to see the output here.

Lendo de cima para baixo: o JavaScript avalia day, compara com cada rótulo case e executa o bloco que bate. O default pega qualquer coisa que não tenha casado com nenhum caso — funciona como um else no final. A ordem de leitura é valorcasecódigo.

Como a comparação funciona de verdade

O switch compara usando igualdade estrita — o operador ===. Sem coerção de tipo, sem comparação frouxa. O case 1: vai bater com o número 1, mas não com a string "1".

index.js
Output
Click Run to see the output here.

Só o segundo caso bate. Se algum dia você estranhar que seu switch não está disparando, o culpado costuma ser uma comparação entre string e número vinda de um input de formulário ou de um parâmetro de URL.

O break é quem interrompe o fluxo

Essa é a parte que pega muita gente. Um rótulo case é um ponto de salto, não um bloco isolado. Assim que a execução cai em um case que bateu, ela segue rodando linha por linha — passando direto pelo rótulo do próximo case — até encontrar um break, um return ou o fim do switch.

Veja o que acontece sem o break:

index.js
Output
Click Run to see the output here.

O valor testado é "editor", mas mesmo assim aparecem pode editar, pode visualizar e logado. Isso é o famoso fallthrough: a execução "escorregou" para os cases seguintes porque nada mandou ela parar.

Coloque o break e tudo se ajeita:

index.js
Output
Click Run to see the output here.

Hábito: toda case termina com break, a menos que você queira fallthrough de propósito.

Fallthrough intencional para agrupar casos

Nem todo fallthrough é bug. Omitir o break é uma forma limpa de dizer "esses casos fazem a mesma coisa":

index.js
Output
Click Run to see the output here.

Labels case vazios empilhados compartilham o bloco abaixo deles. Repare que não precisa de break depois do return — a função encerra por completo. Um return dentro de um switch pula tudo o que viria depois.

Quando você realmente quiser fallthrough entre cases não vazios, deixe um comentário para o próximo leitor não "consertar" o que não está quebrado:

index.js
Output
Click Run to see the output here.

O default não precisa ser o último

Por convenção, o default fica lá no final do switch — e é onde a maioria dos leitores espera encontrá-lo. Mas, tecnicamente, ele é só mais um rótulo: entra em ação quando nenhum case bate, independente da posição. Se você colocar o default no meio e esquecer do break, ele vai cair (fallthrough) no bloco logo abaixo. Deixe-o por último, encerre com break (ou nem precisa, já que não tem nada depois) e seu eu do futuro vai agradecer.

index.js
Output
Click Run to see the output here.

Escopo de variáveis dentro de um case

Todos os case compartilham o mesmo escope de bloco — o do switch inteiro. Por isso, se você declarar let ou const com o mesmo nome em dois cases diferentes, o JavaScript vai reclamar com um erro de redeclaração:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

A solução é usar um bloco por case — é só envolver o corpo com { }:

index.js
Output
Click Run to see the output here.

Agora cada msg vive no seu próprio escopo e o conflito some. Vale guardar isso sempre que um case precisar de mais do que uma ou duas linhas de lógica.

switch vs if/else no JavaScript

O switch brilha quando você precisa testar um único valor contra várias opções fixas: códigos HTTP, tipos de action do Redux, nomes de comandos, strings que funcionam como enum. O valor aparece uma vez no topo e o leitor consegue bater o olho nos case como se fosse um índice.

Já o if/else se sai melhor quando:

  • Você está comparando faixas de valores (score >= 90, score >= 75).
  • As condições envolvem variáveis diferentes ou expressões booleanas.
  • Você quer igualdade frouxa ou comparações personalizadas (o switch sempre usa ===).
index.js
Output
Click Run to see the output here.

Uma alternativa moderna bem comum para o primeiro padrão é usar um objeto como lookup:

index.js
Output
Click Run to see the output here.

Três linhas no lugar de um switch com nove. Quando os cases são só mapeamento de dados, sem lógica de verdade, um objeto (ou um Map) geralmente fica mais legível. Use switch quando cada case realmente executa alguma coisa.

A seguir: laços for

O switch resolve uma decisão com várias opções possíveis. A próxima peça de controle de fluxo é a repetição — executar o mesmo bloco de código várias vezes. É exatamente para isso que servem os laços for, que vêm a seguir.

Perguntas frequentes

Como funciona o switch em JavaScript?

O switch compara um valor com uma série de rótulos case usando igualdade estrita (===). Quando encontra uma correspondência, executa o código daquele case e continua executando até encontrar um break ou chegar ao fim do bloco. A cláusula default (opcional) roda quando nenhum case bate.

O que é fallthrough no switch do JavaScript?

Quando um case não termina com break (ou return), a execução "cai" no próximo case e roda o código dele — mesmo que aquele rótulo não tenha correspondido. Isso pode ser útil para agrupar cases que compartilham a mesma lógica, mas na maioria das vezes é fonte de bug. Sempre finalize os cases com break, a não ser que você realmente queira o fallthrough.

Quando usar switch em vez de if/else no JavaScript?

Use switch quando estiver comparando um único valor com várias opções fixas — códigos de status HTTP, tipos de action no Redux, comandos em string. Prefira if/else quando precisar de faixas de valores, múltiplas variáveis ou expressões booleanas. Lembre-se: o switch usa igualdade estrita, então case '1' não bate com o número 1.

Aprenda a programar com o Coddy

COMEÇAR