Switch Case em JavaScript – Acabe com IFs Seguidos no Código

Aprenda como usar Switch Case em JavaScript e eliminar a repetição de if e else no seu código!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Switch Case em JavaScript – Acabe com IFs Seguidos no Código

Na aula de hoje, vou te ensinar como usar switch case em JavaScript para eliminar a repetição de inúmeros if-else em seu código. Você aprenderá como implementá-lo para tornar seu código mais limpo, legível e agradável, mantendo a lógica intacta.

O switch case em JavaScript desempenha um papel fundamental na qualidade e na manutenção do seu código, tornando-o mais compreensível para outros desenvolvedores que possam examiná-lo.

Essa estrutura é extremamente eficaz para lidar com variáveis que podem assumir valores diferentes no seu código e, com base nesses valores, executar blocos de código distintos, produzindo respostas diferentes.

Vamos ver como o switch case JavaScript funciona e como você pode aprimorar seus códigos com essa funcionalidade.

Apresentando o Código Inicial

Para ilustrar como é possível otimizar um código utilizando a estrutura do switch case, vamos pegar o código abaixo como exemplo:

const disciplina = "JavaScript";

if (disciplina ==="Excel") {
    console.log("Esse é um aluno impressionador de Excel da Hashtag!");
} else if (disciplina ==="Power BI") {
    console.log("Esse é um aluno impressionador de Power BI da Hashtag!");
} else if (disciplina ==="PowerPoint") {
    console.log("Esse é um aluno impressionador de PowerPoint da Hashtag!");
} else if (disciplina ==="Python") {
    console.log("Esse é um aluno impressionador de Python da Hashtag!");
} else if (disciplina ==="Html/CSS") {
    console.log("Esse é um aluno impressionador de Html/CSS da Hashtag!");
} else if (disciplina ==="VBA") {
    console.log("Esse é um aluno impressionador de VBA da Hashtag!");
} else if (disciplina ==="SQL") {
    console.log("Esse é um aluno impressionador de SQL da Hashtag!");
} else if (disciplina ==="JavaScript") {
    console.log("Esse é um aluno impressionador de JavaScript da Hashtag!");
} else {
    console.log("Esse não é um aluno da Hashtag!");
}

Nesse código, verificamos o valor da variável através de uma série de if e else. Quando encontramos uma correspondência, exibimos a mensagem correspondente na tela.

O valor dessa variável pode ser definido de várias maneiras, mas, para simplificar o nosso exemplo, vamos alterá-lo diretamente no código manualmente.

Repare que ela começa com o valor de JavaScript, e ao executarmos o código, receberemos a mensagem abaixo:

Se alterarmos o valor da variável, a resposta obtida também será diferente. Vamos trocar o valor para Python:

Como você pode ver, o código funciona corretamente. No entanto, observe a quantidade de if e else que temos nele. Para esses casos, podemos utilizar a estrutura do switch case.

Como Usar Switch Case em JavaScript

O switch case em JavaScript é uma estrutura de controle muito útil quando estamos trabalhando com uma variável que pode assumir diferentes valores possíveis e, a partir desses valores, executar diferentes blocos de código correspondentes.

Como no nosso exemplo acima, a partir do valor da variável disciplina, diferentes blocos de códigos são executados, retornando respostas diferentes sobre o curso do aluno.

Para obtermos um resultado como o do código acima, começaremos com a palavra chave switch(), onde, dentro dos parênteses, passaremos a variável que queremos manipular, que no nosso caso é a variável disciplina.

Em seguida, atribuiremos os casos (case) e as respostas, ou seja, os blocos de código que devem ser executados para cada variável.

Nosso código ficará assim:

const disciplina = "Python";

switch(disciplina) {
    case "Excel":
        console.log("Esse é um aluno impressionador de Excel da Hashtag!");
    case "Power BI":
        console.log("Esse é um aluno impressionador de Power BI da Hashtag!");
    case "PowerPoint":
        console.log("Esse é um aluno impressionador de PowerPoint da Hashtag!");
    case "Python":
        console.log("Esse é um aluno impressionador de Python da Hashtag!");
    case "Html/CSS":
        console.log("Esse é um aluno impressionador de Html/CSS da Hashtag!");
    case "VBA":
        console.log("Esse é um aluno impressionador de VBA da Hashtag!");
    case "SQL":
        console.log("Esse é um aluno impressionador de SQL da Hashtag!");
    case "JavaScript":
        console.log("Esse é um aluno impressionador de JavaScript da Hashtag!");
}

Perceba que a estrutura dele está bem semelhante ao código anterior. Porém, ele ainda não está completo. Se você o executar dessa forma, irá receber a seguinte resposta:

Isso ocorre porque o switch case em JavaScript não termina automaticamente após encontrar uma correspondência, a menos que você inclua uma instrução break para cada caso.

Sem essa instrução, ele continuará executando todos os outros blocos de código abaixo da correspondência encontrada.

Além disso, no nosso código, não temos uma resposta padrão para quando a disciplina inserida não corresponder a nenhum dos casos. Se você voltar a analisar o código que tínhamos com if-else, verá que temos a resposta: “Esse não é um aluno da Hashtag!”.

Para incluirmos isso dentro da estrutura do switch case, precisamos adicionar a instrução default, que é uma condição padrão, um bloco de código que será executado caso nenhuma das outras opções seja correspondida.

O resultado final do nosso código ficará:

const disciplina = "Python";

switch(disciplina) {
    case "Excel":
        console.log("Esse é um aluno impressionador de Excel da Hashtag!");
        break;
    case "Power BI":
        console.log("Esse é um aluno impressionador de Power BI da Hashtag!");
        break;
    case "PowerPoint":
        console.log("Esse é um aluno impressionador de PowerPoint da Hashtag!");
        break;
    case "Python":
        console.log("Esse é um aluno impressionador de Python da Hashtag!");
        break;
    case "Html/CSS":
        console.log("Esse é um aluno impressionador de Html/CSS da Hashtag!");
        break;
    case "VBA":
        console.log("Esse é um aluno impressionador de VBA da Hashtag!");
        break;
    case "SQL":
        console.log("Esse é um aluno impressionador de SQL da Hashtag!");
        break;
    case "JavaScript":
        console.log("Esse é um aluno impressionador de JavaScript da Hashtag!");
        break;
    default:
        console.log("Esse não é um aluno da Hashtag!");
}

No caso do default, não precisamos da instrução break, pois não há mais blocos de código dentro do nosso switch.

Conclusão – Switch Case em JavaScript

Nessa aula você aprendeu como usar switch case em JavaScript para eliminar a repetição de blocos if-else no seu código.

Te mostrei como aplicar essa estrutura para tornar seu código mais claro, legível e agradável, ao mesmo tempo que preserva toda a lógica. Facilitando a leitura por outros desenvolvedores.

Ao adotar o switch case em JavaScript, você conseguirá simplificar seus códigos, aprimorá-los e torná-los mais eficientes.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Diego Monutti

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.