Facebook pixel
>Blog>Programação
Programação

Como utilizar o switch case em JavaScript: guia completo

O switch case é uma estrutura de controle fundamental em JavaScript que permite executar diferentes ações com base em diferentes condições.

Como utilizar o switch case em JavaScript: guia completo

Estrutura do switch case em JavaScript

A estrutura do switch case em JavaScript é composta por uma expressão avaliada e uma série de casos (case) que são verificados em busca de uma correspondência. Vejamos como sua estrutura básica é definida:

switch (expressão) {
    case valor1:
      // bloco de código a ser executado caso a expressão corresponda a valor1
      break;
    case valor2:
      // bloco de código a ser executado caso a expressão corresponda a valor2
      break;
    // outros casos...
    default:
      // bloco de código a ser executado caso a expressão não corresponda a nenhum caso
  }

A expressão é avaliada uma vez e comparada com os casos da estrutura do switch case. Se uma correspondência é encontrada, o bloco de código correspondente é executado e, em seguida, a execução é interrompida com a palavra-chave “break”. Caso nenhum caso corresponda à expressão, o bloco de código dentro do “default” será executado.

Exemplos práticos de uso do switch case em JavaScript

Agora que estamos familiarizados com a estrutura do switch case em JavaScript, vamos explorar alguns exemplos práticos de uso:

1. Calculadora de operações básicas:

function calcular(valor1, operador, valor2) {
    switch (operador) {
      case '+':
        return valor1 + valor2;
      case '-':
        return valor1 - valor2;
      case '*':
        return valor1 * valor2;
      case '/':
        return valor1 / valor2;
      default:
        return 'Operador inválido';
    }
  }

  console.log(calcular(5, '+', 3)); // Saída: 8
  console.log(calcular(10, '-', 4)); // Saída: 6
  console.log(calcular(2, '*', 6)); // Saída: 12
  console.log(calcular(8, '/', 2)); // Saída: 4
  console.log(calcular(7, '%', 3)); // Saída: Operador inválido

Neste exemplo, o switch case é usado para realizar diferentes operações matemáticas com base no operador fornecido. Se o operador não corresponder a nenhum caso, a mensagem ‘Operador inválido’ será retornada.

Programação Front-End Domine React.js, a biblioteca líder de mercado para Front-End, desde os fundamentos em HTML, CSS e JavaScript até o uso de APIs e testes end-to-end, e desenvolva interfaces de sites e web apps eficientes e escaláveis.
Nossa metodologia de ensino tem eficiência comprovada
Curso da Awari em Programação Front-End
15h de carga horária 2 semanas de duração Certificado de conclusão Mentorias individuais

2. Seleção de opções de um menu:

let opcao = 2;

  switch (opcao) {
    case 1:
      console.log('Selecionada opção 1: Iniciar o jogo');
      break;
    case 2:
      console.log('Selecionada opção 2: Configurações');
      break;
    case 3:
      console.log('Selecionada opção 3: Sair do jogo');
      break;
    default:
      console.log('Opção inválida');
  }

Neste exemplo, o switch case é utilizado para exibir mensagens conforme a opção selecionada em um menu. Caso a opção não corresponda a nenhum caso, a mensagem ‘Opção inválida’ será exibida.

Dicas para aproveitar ao máximo o switch case em JavaScript

  1. Utilize o break: Lembre-se sempre de utilizar a palavra-chave “break” ao final de cada bloco de código correspondente a um caso. Isso interrompe a execução do switch case e evita que os casos seguintes sejam verificados.
  2. Aproveite o uso do default: O bloco de código dentro do “default” é executado quando nenhuma correspondência é encontrada. É uma boa prática utilizar o “default” para tratar casos não previstos ou fornecer uma resposta genérica.
  3. Combine cases: Em situações em que um mesmo bloco de código deve ser executado para mais de um caso, é possível agrupar os cases, separando-os por vírgulas. Isso evita a repetição desnecessária do mesmo código.

Conclusão

O switch case é uma poderosa estrutura de controle em JavaScript que permite executar diferentes ações com base em diferentes condições. Neste guia completo, vimos como utilizá-lo, desde sua estrutura básica até exemplos práticos de uso. Agora você tem o conhecimento necessário para aproveitar ao máximo o switch case em seus projetos JavaScript.

Lembre-se de considerar a natureza da sua lógica e escolher a estrutura de controle mais adequada para cada situação. O switch case pode ser uma opção eficiente e legível quando se trata de testar uma única expressão em busca de múltiplas correspondências.

Experimente utilizar o switch case em seus projetos e explore suas possibilidades. Com a prática, você se tornará mais proficiente no uso dessa estrutura e poderá tomar decisões mais eficientes no desenvolvimento de suas aplicações em JavaScript.

Exemplos práticos de uso do switch case em JavaScript

O switch case em JavaScript é uma ferramenta versátil que pode ser aplicada em diversas situações para tomar decisões com base em diferentes valores. Vamos explorar mais alguns exemplos práticos de uso do switch case para que você possa compreender sua utilidade em diferentes cenários.

1. Verificação de dias da semana:

let dia = getDiaSemana();

  switch (dia) {
    case 1:
      console.log('Hoje é segunda-feira');
      break;
    case 2:
      console.log('Hoje é terça-feira');
      break;
    case 3:
      console.log('Hoje é quarta-feira');
      break;
    case 4:
      console.log('Hoje é quinta-feira');
      break;
    case 5:
      console.log('Hoje é sexta-feira');
      break;
    case 6:
      console.log('Hoje é sábado');
      break;
    case 7:
      console.log('Hoje é domingo');
      break;
    default:
      console.log('Dia inválido');
  }

Neste exemplo, o switch case é 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ça-feira, e assim por diante). O bloco de código dentro de cada caso é executado de acordo com o valor da variável “dia”.

2. Categorização de produtos:

let produto = 'Eletrônicos';
  let categoria;

  switch (produto) {
    case 'Roupas':
    case 'Calçados':
      categoria = 'Moda';
      break;
    case 'Eletrônicos':
    case 'Computadores':
      categoria = 'Tecnologia';
      break;
    case 'Alimentos':
    case 'Bebidas':
      categoria = 'Alimentação';
      break;
    default:
      categoria = 'Outros';
  }

  console.log(`O produto ${produto} pertence à categoria ${categoria}.`);

Nesse exemplo, o switch case é utilizado para categorizar diferentes produtos com base nos seus tipos. Os produtos são agrupados em diferentes categorias e a variável “categoria” é atualizada de acordo com a correspondência encontrada no switch case. No final, é exibida uma mensagem informando a categoria do produto.

Programação Front-End Domine React.js, a biblioteca líder de mercado para Front-End, desde os fundamentos em HTML, CSS e JavaScript até o uso de APIs e testes end-to-end, e desenvolva interfaces de sites e web apps eficientes e escaláveis.
Nossa metodologia de ensino tem eficiência comprovada
Curso da Awari em Programação Front-End
15h de carga horária 2 semanas de duração Certificado de conclusão Mentorias individuais

Dicas para aproveitar ao máximo o switch case em JavaScript

  • Utilize o break: É importante utilizar a palavra-chave “break” ao final de cada bloco de código correspondente a um caso no switch case. Isso garante que a execução seja interrompida após o bloco de código ser executado. Caso contrário, o código continuará a ser executado nos casos seguintes.
  • Agrupe cases: Em situações em que diferentes casos exigem a execução do mesmo bloco de código, é possível agrupá-los, separando-os por vírgulas. Isso evita a repetição desnecessária do mesmo código e torna o código mais legível.
  • Utilize o default de forma estratégica: O bloco de código dentro do “default” é executado quando nenhum caso corresponde à expressão do switch. Ele pode ser utilizado para fornecer um tratamento genérico ou exibir uma mensagem de erro. Certifique-se de pensar em todos os possíveis casos e tratar cada um deles adequadamente.
  • Considere outras estruturas de controle: Embora o switch case seja uma opção poderosa, existem outras estruturas de controle em JavaScript, como if-else e operadores ternários, que também podem ser adequadas para determinadas situações. Analise a lógica do seu código e escolha a estrutura de controle mais apropriada.

Conclusão

O switch case é uma estrutura fundamental em JavaScript que permite tomar decisões com base em diferentes valores. Neste guia completo, exploramos como utilizar o switch case em JavaScript, analisando exemplos práticos de uso e compartilhando dicas importantes para aproveitá-lo ao máximo.

Ao dominar o switch case, você terá mais habilidades para desenvolver aplicações JavaScript eficientes e de qualidade. Lembre-se de considerar a natureza da sua lógica e escolher a estrutura de controle mais adequada para cada situação. O switch case pode ser uma opção eficiente quando se trata de testar uma única expressão em busca de múltiplas correspondências.

Continue praticando e explorando as possibilidades oferecidas pelo switch case em seus projetos. Com o tempo, você se tornará mais confortável com essa estrutura e poderá tomar decisões mais assertivas no desenvolvimento de suas aplicações JavaScript.

A Awari é a melhor plataforma para aprender sobre programação no Brasil.

Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.

Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.

Programação Front-End Domine React.js, a biblioteca líder de mercado para Front-End, desde os fundamentos em HTML, CSS e JavaScript até o uso de APIs e testes end-to-end, e desenvolva interfaces de sites e web apps eficientes e escaláveis.
Nossa metodologia de ensino tem eficiência comprovada
Curso da Awari em Programação Front-End
15h de carga horária 2 semanas de duração Certificado de conclusão Mentorias individuais

Curso Completo de
Programação Front-End

Domine React.js, a biblioteca líder de mercado para Front-End, desde os fundamentos em HTML, CSS e JavaScript até o uso de APIs e testes end-to-end, e desenvolva interfaces de sites e web apps eficientes e escaláveis.

Ao clicar no botão ”Entre na Lista de Espera”, você concorda com os nossos Termos de Uso e Política de Privacidade.

CONHEÇA A AWARI

Compartilhe seus objetivos de carreira com a Awari

Nós queremos construir uma comunidade onde membros tenham objetivos compartilhados, e levamos essas respostas em consideração na hora de avaliar sua candidatura.

Sobre o autor

Dê um salto em sua carreira com nosso curso de Programação Front-End

Domine React.js, a biblioteca líder de mercado para Front-End, desde os fundamentos em HTML, CSS e JavaScript até o uso de APIs e testes end-to-end, e desenvolva interfaces de sites e web apps eficientes e escaláveis.