Pular para o conteúdo

Programando Soluções

Como usar o switch case no Javascript

  • por
switch case

Introdução

O switch case é uma estrutura condicional do Javascript como o if, e serve para analisar os valores e executar um bloco de código condicionalmente.

Normalmente é utilizado, quando se deseja analisar diversos valores diferentes para a mesma variável.

Para a verificação ele utiliza a verificação estrita, que é feita com três sinais de igual (===), ou seja, além do valor da variável, também é comparado o tipo.

Caso uma condição seja correspondida ao valor verificado, o código dentro da condição será executado, caso mais de uma condição corresponda, somente o primeiro bloco irá executar.

Há uma instrução adicional que é o break, que fica dentro do case, e isso garante que quando uma condição for atendida, a execução sairá do switch, e caso ele não seja colocado, irá continuar executando o switch.

Sintaxe

Em sua sintaxe, basicamente terá primeiro a avaliação de condição, e posterior terá os “casos” onde caso o valor seja igual ao valor passado para o case, significa que atendeu a condição e precisa entrar naquele bloco de código. Veja um fluxograma:

switch case
switch case

Veja um código de exemplo com o uso do switch case:

let numero = 1;
switch(numero){ //avaliação do valor
  case 1: //primeira condição
    console.log("este é o número 1");
    break;
  case 2: //segunda condição
    console.log("este é o número 2");
    break;
}

No caso acima, o texto que será exibido no console, vai ser o “este é o número 1”, pois a variável número que está sendo avaliada, corresponde com o primeiro caso, executando o código dentro do case 1 e quando encontra o break, a execução do Javascript sai do switch.

Condição padrão

Outro ponto importante da sintaxe do switch case é poder colocar uma condição padrão, como se fosse um else do if.

Esse padrão será executado sempre que o valor avaliado não corresponder a nenhum dos cases. Veja o exemplo:

let numero = 3;
switch (numero) {
  case 1:
    console.log("este é o número 1");
    break;
  case 2:
    console.log("este é o número 2");
    break;
  default:
    console.log("não entrou em nenhuma condição");
    break;
}

Neste caso, como o valor da variável número é 3, e não há nenhum case verificando se é 3, então não será executado o bloco de nenhuma condição, logo irá cair no bloco default e mostrar no console a mensagem “não entrou em nenhuma condição”.

Isso é muito útil, pois durante o desenvolvimento, é possível adicionar algum tratamento no bloco default para evitar que algum erro mais grave aconteça no sistema.

Multiplos cases

Há momentos da aplicação, onde duas condições podem executar o mesmo bloco de código, e dentro do if é tranquilo colocar isso, basta adicionar a condição na frente e da certo.

No switch case também é possível. Para isso, é necessário colocar dois cases, um abaixo do outro, um com cada condição, e após eles, colocar o bloco de código para ser executado.

let numero = 2;
switch (numero) {
  case 1:
  case 2:
    console.log("este é o número é menor que 3");
    break;
  case 3:
    console.log("este é o número 3");
    break;
  default:
    console.log("não entrou em nenhuma condição");
    break;
}

No exemplo acima, repare que o case 1 e case 2 estão juntos, e isso faz com que caso o número seja 1, ou seja 2, irá executar aquele bloco e mostrar no console “este é o número é menor que 3”.

Vídeo Completo

Veja um vídeo completo sobre o assunto:

Conclusão

O switch case é uma estrutura condicional muito utilizada e principalmente com condições que envolvem números. Embora o mesmo que de pra fazer com o if, também dê para utilizar o switch case, utilizá-lo pode deixar um bloco de código mais explícito e também facilitar a leitura das condições, até o próximo post 🙂

Código fonte

Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox

Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.

Aprenda a testar Aplicações Javascript

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/switch

https://www.devmedia.com.br/javascript-switch/39761

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok