Article image
Luiz Café
Luiz Café16/08/2023 18:02
Compartilhe

Tomando decisões com Java Script: conheça o Switch Case

  • #JavaScript

Olá, comunidade da DIO!

Se você é um iniciante em programação em JavaScript ou já possui alguma experiência, já deve ter identificado que na carreira de tecnologia estamos em todos os momentos tomando decisões.

O processo de tomada de decisão faz parte do nosso cotidiano e decisões erradas de como escrever nossos códigos ou elaborar projetos podem causar grandes prejuízos. Por isso é preciso entender muito bem o que estamos fazendo para evitar o máximo que isso aconteça, não é mesmo?

Pensando nisso, apresento para vocês a estrutura condicional switch case, que basicamente exerce a função de execução de blocos de código, de acordo com as condições estabelecidas. Venha conhecer mais sobre switch case para avançar ainda mais nos seus conhecimentos em JavaScript!

Um pouco da história do JavaScript

A linguagem foi desenvolvida por Brendan Eich no ano de 1995. O objetivo era desenvolver uma linguagem capaz de interagir com a linguagem de marcação HTML. Essa dupla ficou responsável por revolucionar a maneira como as pessoas consomem conteúdos na web e, até os dias de hoje, é uma das principais linguagens do mundo.

Agora que você conheceu um pouco da história, podemos falar sobre switch case.

Entendendo a "mágica" do Switch Case em JavaScript

Podemos entender a estrutura condicional switch como um facilitador para escrever códigos em JavaScript sem a necessidade de grande quantidade de código. Ele terá o papel de, atendendo determinadas condições, fazer com que os blocos de código executem diferentes funções, dependendo das condições estabelecidas.

Na imagem abaixo temos um fluxograma que ilustra o funcionamento do switch case:

image

Fonte: adaptado de : <https://www.devmedia.com.br/javascript-switch/39761#>

Exemplo

Para ficar mais fácil de entender, vamos utilizar o exemplo de um controle remoto de televisão. Ele executa diferentes funções a medida que teclamos determinados botões, não é verdade?

Com ele você pode aumentar o volume, abaixar, mudar de canal, gravar um programa, dependendo se sua TV possui essa função, e ainda acessar diversas outras funções que estejam disponíveis no seu aparelho de televisão.

O simples ato de pressionar um botão qualquer no seu controle remoto é como se você estivesse utilizando algo semelhante a "expressão", que consiste em uma maneira de verificar um determinado valor para assim tomar a decisão que foi pedida no "switch case" de JavaScript.

Veja um exemplo de código, utilizando nosso exemplo:

function exibirCanal(numeroDoCanal) {
console.log("Exibindo o canal desejado " + numeroDoCanal);
}


let botaoPressionado = prompt("Digite o número do canal desejado:"); // Obtém a entrada do usuário


switch (parseInt(botaoPressionado)) {
case 1:
  exibirCanal(1); // Exibe o canal desejado 1 na tela do usuário.
  break;
case 2:
  exibirCanal(2); // Mostra o canal desejado 2  na tela do usuário.
  break;
case 3:
  exibirCanal(3); // Mostra o canal desejado 3  na tela do usuário.
  break;
// E assim por diante...
default:
  console.log("Canal inválido"); // Mostra uma mensagem se nenhum caso combinar
}

Explicando o código

Neste código temos a function:

 "exibirCanal(númeroDoCanal)"

Ela é a porta de entrada para o código. Através dela será responsável por imprimir uma mensagem na tela que irá indicar qual é o canal que deverá ser exibido, para isso é utilizado o comando:

 console.log

Ele irá imprimir uma mensagem na tela para o usuário. É importante observar que ela está concatenada, ou seja, aparecerá a mensagem "Exibindo o canal desejado" mais o número que o usuário digitar na tela.

Logo temos

 let 

Reponsável por realizar a declaração da variável local dentro do bloco atual, que pode ou não receber um valor. Neste caso temos:

let botaoPressionado = prompt("Digite o canal desejado"); 

Neste caso, com o comando prompt uma tela será exibida ao usuário para pedir que ele digite o número do canal que deseja, essa informação será repassada para variável "botaoPressionado".

Dando continuidade em nossa explicação do código acima temos que o Switch Case do código propriamente dito, temos:

IMPORTANTE: como este é um exemplo para fins didáticos, prompt pode não funcionar no caso de você estiver utilizando este código em uma IDE - Ambiente de Desenvolvimento Integrado, com o software Node.js instalado, o ideal é que você execute o código nos seguintes endereço:

<https://www.programiz.com/javascript/online-compiler/>

imageimage

switch (parseInt(botaoPressionado))

Aqui se dará início ao processo de tomada de decisão, na expressão parseInt(botaoPressionado) estará o valor recebido que pressionado pelo usuário que recebeu uma conversão para um inteiro.

case 1:

No case1: temos o nosso primeiro caso propriamente dito. Ele irá verificar se o número do canal digitado pelo usuário é igual ao valor 1. Se a resposta for exatamente está, o bloco de código será executado e a mensagem "Exibindo o canal desejado 1" será imprimida na tela do console.

break

Para encerrar o switch temos break, ele fará com que o switch seja interrompido assim que a condição seja atendida. Ele é fundamental, pois evita que o switch seja executado de maneira infinita mesmo que esteja errado.

O mesmo deverá acontecer nos cases 2 e 3, se o número digitado seja 2 ou 3.

default

Caso o usuário digite um número que não esteja dentro dos disponíveis, será exibida a mensagem: "canal inválido", pois não terá atendido nenhuma das condições estabelecidas dentro do código.

Essa é a explicação do código que faz uso do switch case em JavaScript para realizar uma comparação entre números(1 até 3) e exibir uma mensagem de acordo com a opção escolhida pelo usuário, caso nenhuma delas esteja disponível, será exibida a mensagem: "canal inválido" e o código será encerrado.

Quando pensar em utilizar o Switch Case?

Para decidir se você deve utilizar ou não Switch Case, leve em consideração os seguintes casos:

  • Controle de fluxo;
  • Executar os blocos de código de maneira mais eficiente;
  • Tornar seu código mais organizado e fácil de entender e dar manutenção;
  • Caso se esteja trabalhando com números;
  • Se você deseja evitar muitas repetições dentro do seu código.

Esses são alguns exemplos básicos de aplicação do switch case, agora conheça quando você não deve utilizar o switch case.

Quando não utilizar Switch Case?

Você deve evitar o uso de switch case nos seguintes casos:

  • Executar comparações muito complexas;
  • Comparar tipos diferentes;
  • Em alguns casos, switch case pode apresentar problemas de desempenho, por isso é preciso estudar qual a complexidade para decidir se ele é ou não a melhor opção;
  • Avaliar múltiplas expressões.

Esses são alguns casos que devem se evitar switch case, buscando outras opções que estão disponíveis.

Conclusão

Após você entender mais sobre switch case no JavaScript, acredito que você avançou ainda mais nos seus conhecimentos na linguagem de programação JavaScript. Aprendeu ainda a utilizar o switch case em um caso bem simples que pode te ajudar na tomada de decisões no futuro.

Não deixe de continuar aprendendo mais sobre JavaScript, acesse a documentação oficial e saiba mais sobre como utilizar o switch case e outras funções dentro do JavaScript, acesse: <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch>

Não deixe de aprender JavaScript aqui na DIO e ser protagonista de sua carreira procurando por outras fontes.

Bons estudos!

Conheça a Formação em JavaScript da DIO!

Referências

Developer Mozilla. Switch. Disponível em: <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch>. Acesso em: 16/08/2023;

Dev Media. JavaScript Switch. Disponível em: <https://www.devmedia.com.br/javascript-switch/39761#>. Acesso em: 16/08/2023

Compartilhe
Comentários (3)
Luiz Café
Luiz Café - 17/08/2023 20:59

Obrigado pelos comentários de vocês pessoal.

Fernando Araujo
Fernando Araujo - 17/08/2023 19:42

Ótimo artigo, Luiz!


Bem didático, ótimas explicações para os iniciantes e bom resumo para os experientes.

ES

Edilane Silva - 17/08/2023 09:13

Parabéns, achei super interessante a sua abordagem nesse artigo, sucesso!