{"id":114796,"date":"2023-08-08T17:31:52","date_gmt":"2023-08-08T20:31:52","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/como-utilizar-o-switch-case-em-javascript-guia-completo\/"},"modified":"2023-08-08T17:31:52","modified_gmt":"2023-08-08T20:31:52","slug":"como-utilizar-o-switch-case-em-javascript-guia-completo","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/como-utilizar-o-switch-case-em-javascript-guia-completo\/","title":{"rendered":"Como utilizar o switch case em JavaScript: guia completo"},"content":{"rendered":"

<\/p>\n

Como utilizar o switch case em JavaScript: guia completo<\/h1>\n

Estrutura do switch case em JavaScript<\/h2>\n

A estrutura do switch case em JavaScript \u00e9 composta por uma express\u00e3o avaliada e uma s\u00e9rie de casos (case) que s\u00e3o verificados em busca de uma correspond\u00eancia. Vejamos como sua estrutura b\u00e1sica \u00e9 definida:<\/p>\n

switch (express\u00e3o) {\n    case valor1:\n      \/\/ bloco de c\u00f3digo a ser executado caso a express\u00e3o corresponda a valor1\n      break;\n    case valor2:\n      \/\/ bloco de c\u00f3digo a ser executado caso a express\u00e3o corresponda a valor2\n      break;\n    \/\/ outros casos...\n    default:\n      \/\/ bloco de c\u00f3digo a ser executado caso a express\u00e3o n\u00e3o corresponda a nenhum caso\n  }<\/code><\/pre>\n
A express\u00e3o \u00e9 avaliada uma vez e comparada com os casos da estrutura do switch case. Se uma correspond\u00eancia \u00e9 encontrada, o bloco de c\u00f3digo correspondente \u00e9 executado e, em seguida, a execu\u00e7\u00e3o \u00e9 interrompida com a palavra-chave “break”. Caso nenhum caso corresponda \u00e0 express\u00e3o, o bloco de c\u00f3digo dentro do “default” ser\u00e1 executado.<\/p>\n
Exemplos pr\u00e1ticos de uso do switch case em JavaScript<\/h2>\n
Agora que estamos familiarizados com a estrutura do switch case em JavaScript, vamos explorar alguns exemplos pr\u00e1ticos de uso:<\/p>\n
1. Calculadora de opera\u00e7\u00f5es b\u00e1sicas:<\/h3>\n
function calcular(valor1, operador, valor2) {\n    switch (operador) {\n      case '+':\n        return valor1 + valor2;\n      case '-':\n        return valor1 - valor2;\n      case '*':\n        return valor1 * valor2;\n      case '\/':\n        return valor1 \/ valor2;\n      default:\n        return 'Operador inv\u00e1lido';\n    }\n  }\n\n  console.log(calcular(5, '+', 3)); \/\/ Sa\u00edda: 8\n  console.log(calcular(10, '-', 4)); \/\/ Sa\u00edda: 6\n  console.log(calcular(2, '*', 6)); \/\/ Sa\u00edda: 12\n  console.log(calcular(8, '\/', 2)); \/\/ Sa\u00edda: 4\n  console.log(calcular(7, '%', 3)); \/\/ Sa\u00edda: Operador inv\u00e1lido<\/code><\/pre>\n
Neste exemplo, o switch case \u00e9 usado para realizar diferentes opera\u00e7\u00f5es matem\u00e1ticas com base no operador fornecido. Se o operador n\u00e3o corresponder a nenhum caso, a mensagem ‘Operador inv\u00e1lido’ ser\u00e1 retornada.<\/p>\n
2. Sele\u00e7\u00e3o de op\u00e7\u00f5es de um menu:<\/h3>\n
let opcao = 2;\n\n  switch (opcao) {\n    case 1:\n      console.log('Selecionada op\u00e7\u00e3o 1: Iniciar o jogo');\n      break;\n    case 2:\n      console.log('Selecionada op\u00e7\u00e3o 2: Configura\u00e7\u00f5es');\n      break;\n    case 3:\n      console.log('Selecionada op\u00e7\u00e3o 3: Sair do jogo');\n      break;\n    default:\n      console.log('Op\u00e7\u00e3o inv\u00e1lida');\n  }<\/code><\/pre>\n
Neste exemplo, o switch case \u00e9 utilizado para exibir mensagens conforme a op\u00e7\u00e3o selecionada em um menu. Caso a op\u00e7\u00e3o n\u00e3o corresponda a nenhum caso, a mensagem ‘Op\u00e7\u00e3o inv\u00e1lida’ ser\u00e1 exibida.<\/p>\n
Dicas para aproveitar ao m\u00e1ximo o switch case em JavaScript<\/h2>\n
    \n
  1. Utilize o break: Lembre-se sempre de utilizar a palavra-chave “break” ao final de cada bloco de c\u00f3digo correspondente a um caso. Isso interrompe a execu\u00e7\u00e3o do switch case e evita que os casos seguintes sejam verificados.<\/li>\n
  2. Aproveite o uso do default: O bloco de c\u00f3digo dentro do “default” \u00e9 executado quando nenhuma correspond\u00eancia \u00e9 encontrada. \u00c9 uma boa pr\u00e1tica utilizar o “default” para tratar casos n\u00e3o previstos ou fornecer uma resposta gen\u00e9rica.<\/li>\n
  3. Combine cases: Em situa\u00e7\u00f5es em que um mesmo bloco de c\u00f3digo deve ser executado para mais de um caso, \u00e9 poss\u00edvel agrupar os cases, separando-os por v\u00edrgulas. Isso evita a repeti\u00e7\u00e3o desnecess\u00e1ria do mesmo c\u00f3digo.<\/li>\n<\/ol>\n
    Conclus\u00e3o<\/h2>\n
    O switch case \u00e9 uma poderosa estrutura de controle em JavaScript que permite executar diferentes a\u00e7\u00f5es com base em diferentes condi\u00e7\u00f5es. Neste guia completo, vimos como utiliz\u00e1-lo, desde sua estrutura b\u00e1sica at\u00e9 exemplos pr\u00e1ticos de uso. Agora voc\u00ea tem o conhecimento necess\u00e1rio para aproveitar ao m\u00e1ximo o switch case em seus projetos JavaScript.<\/p>\n
    Lembre-se de considerar a natureza da sua l\u00f3gica e escolher a estrutura de controle mais adequada para cada situa\u00e7\u00e3o. O switch case pode ser uma op\u00e7\u00e3o eficiente e leg\u00edvel quando se trata de testar uma \u00fanica express\u00e3o em busca de m\u00faltiplas correspond\u00eancias.<\/p>\n
    Experimente utilizar o switch case em seus projetos e explore suas possibilidades. Com a pr\u00e1tica, voc\u00ea se tornar\u00e1 mais proficiente no uso dessa estrutura e poder\u00e1 tomar decis\u00f5es mais eficientes no desenvolvimento de suas aplica\u00e7\u00f5es em JavaScript.<\/p>\n
    Exemplos pr\u00e1ticos de uso do switch case em JavaScript<\/h2>\n
    O switch case em JavaScript \u00e9 uma ferramenta vers\u00e1til que pode ser aplicada em diversas situa\u00e7\u00f5es para tomar decis\u00f5es com base em diferentes valores. Vamos explorar mais alguns exemplos pr\u00e1ticos de uso do switch case para que voc\u00ea possa compreender sua utilidade em diferentes cen\u00e1rios.<\/p>\n
    1. Verifica\u00e7\u00e3o de dias da semana:<\/h3>\n
    let dia = getDiaSemana();\n\n  switch (dia) {\n    case 1:\n      console.log('Hoje \u00e9 segunda-feira');\n      break;\n    case 2:\n      console.log('Hoje \u00e9 ter\u00e7a-feira');\n      break;\n    case 3:\n      console.log('Hoje \u00e9 quarta-feira');\n      break;\n    case 4:\n      console.log('Hoje \u00e9 quinta-feira');\n      break;\n    case 5:\n      console.log('Hoje \u00e9 sexta-feira');\n      break;\n    case 6:\n      console.log('Hoje \u00e9 s\u00e1bado');\n      break;\n    case 7:\n      console.log('Hoje \u00e9 domingo');\n      break;\n    default:\n      console.log('Dia inv\u00e1lido');\n  }<\/code><\/pre>\n
    Neste exemplo, o switch case \u00e9 utilizado para verificar o dia da semana e exibir uma mensagem correspondente. Cada caso representa um dia da semana (1 para segunda-feira, 2 para ter\u00e7a-feira, e assim por diante). O bloco de c\u00f3digo dentro de cada caso \u00e9 executado de acordo com o valor da vari\u00e1vel “dia”.<\/p>\n
    2. Categoriza\u00e7\u00e3o de produtos:<\/h3>\n
    let produto = 'Eletr\u00f4nicos';\n  let categoria;\n\n  switch (produto) {\n    case 'Roupas':\n    case 'Cal\u00e7ados':\n      categoria = 'Moda';\n      break;\n    case 'Eletr\u00f4nicos':\n    case 'Computadores':\n      categoria = 'Tecnologia';\n      break;\n    case 'Alimentos':\n    case 'Bebidas':\n      categoria = 'Alimenta\u00e7\u00e3o';\n      break;\n    default:\n      categoria = 'Outros';\n  }\n\n  console.log(`O produto ${produto} pertence \u00e0 categoria ${categoria}.`);<\/code><\/pre>\n
    Nesse exemplo, o switch case \u00e9 utilizado para categorizar diferentes produtos com base nos seus tipos. Os produtos s\u00e3o agrupados em diferentes categorias e a vari\u00e1vel “categoria” \u00e9 atualizada de acordo com a correspond\u00eancia encontrada no switch case. No final, \u00e9 exibida uma mensagem informando a categoria do produto.<\/p>\n
    Dicas para aproveitar ao m\u00e1ximo o switch case em JavaScript<\/h2>\n