JavaScript Switch

Nesta documentação de JavaScript veremos como utilizar a estrutura condicional switch para criar scripts capazes de executar diferentes blocos de código de acordo com diferentes condições.

Aprenda agora como utilizar a estrutura condicional switch.

JavaScript Switch: Na prática

    // Valor impresso no console: "Usuário logado"
    autenticado = true;
    
    switch (autenticado) {
        case true:
            console.log("Usuário logado");
            break;
        case false:
            console.log("Usuário não autenticado");
    } 
    
    // Valor impresso no console: "Bem-vinda!"
    sexo = "feminino";
    
    switch (sexo) {
        case "feminino":
            console.log("Bem-vinda!");
            break;
        case false:
            console.log("Bem-vindo!");
    } 
    
    // Valor impresso no console: "Outono"
    mes = "Maio";
    
    switch (mes) {
        case "Janeiro":
        case "Fevereiro":
        case "Março":
            console.log("Verão!");
            break;
        case "Abril":
        case "Maio":
        case "Junho":
            console.log("Outono!");
            break;
        case "Julho":
        case "Agosto":
        case "Setembro":
            console.log("Inverno!");
            break;
        case "Outubro":
        case "Novembro":
        case "Dezembro":
            console.log("Primavera!");
    } 
    
    // Valor impresso no console: "Abril"
    mes = 4;
    nomeMes = "";
    
    switch (mes) {
        case 1:
            nomeMes = "Janeiro";
            break;
        case 2:
            nomeMes = "Fevereiro";
            break;
        case 3:
            nomeMes = "Março";
            break;
        case 4:
            nomeMes = "Abril";
            break;
        case 5:
            nomeMes = "Maio";
            break;
        case 6:
            nomeMes = "Junho";
            break;
        case 7:
            nomeMes = "Julho";
            break;
        case 8:
            nomeMes = "Agosto";
            break;
        case 9:
            nomeMes = "Setembro";
            break;
        case 10:
            nomeMes = "Outubro";
            break;
        case 11:
            nomeMes = "Novembro";
            break;
        case 12:
            nomeMes = "Dezembro";
            break;
        default:
            nomeMes = "Mês inexistente";
    } 
    console.log(nomeMes);
    
    // Usuário redirecionado para "homejovem.html"
    tipoUsuario = "Adolescente";
    
    switch (tipoUsuario) {
        case "Adolescente":
            window.location.href = "homejovem.html";
            break;
        case "Adulto":
            window.location.href = "home.html";
    } 
    
    // Valor atribuído à variável salario: 2300
    cargo = "gerente";
    salario = 2000;
    
    switch (cargo) {
        case "gerente":
            salario *= 1.15;
            break;
        case "supervisor":
            salario *= 1.10;
            break;
        default:
            salario *= 1.05;
    } 
    

Como funciona o switch?

A estrutura condicional switch permite executar um bloco de código diferente de acordo com cada opção (cada case) especificada. Seu uso é indicado quando os valores a serem analisados nessas condições são pré-definidos.

Considerando o seguinte código:


    var tipoUsuario = "Gerente";
    
    switch (tipoUsuario) {
        case "Admin":
            mensagem = "*|*| Feliz Natal, chefe! |*|*";
            break;
        case "Gerente":
            mensagem = "Boas festas, meu amigo!";
            break;
        default:
            mensagem = "Boas festas!";
    }    

O valor atribuído à variável mensagem será: “Boas festas, meu amigo!”. A Figura 1 demonstra o funcionamento do condicional switch.

Funcionamento da estrutura condicional switch
Figura 1. Funcionamento da estrutura condicional switch.

Sintaxe

    
    switch(expressão){
     case n1:
        bloco de código 1
        break;
    
     case n2:
       bloco de código 2
       break;
     default:
       bloco de código 3
    }
    

Expressao é a expressão a ser comparada com cada case declarado dentro do switch. Caso o valor obtido na expressão seja a igual ao que for declarado no case, o bloco de código é executado.

case é o valor que será comparado à expressão.

break é a palavra reservada que finaliza a execução do switch. Caso não especificada no final do bloco de código em execução, as linhas dos blocos de código seguintes também serão executadas.

Default é a palavra reservada que define o bloco de código a ser executado se nenhum dos cases atenderem à expressão declarada no switch.

Exemplos de switch

Exemplo 1

No exemplo a seguir demonstramos como exibir diferentes alimentos de acordo com a necessidade do usuário:


    var alimento = "Gordura";
    
    switch (alimento) {
        case "Proteína":
            mensagem = "Carne, leite, aveia, amêndoas";
            break;
        case "Carboidrato":
            mensagem = "Banana, batata doce, feijão, pão";
            break;
        default:
            mensagem = "Cuidado com a alimentação!";
    }
    

O valor atribuído a mensagem é: “Cuidado com a alimentação! ".

Run!


Exemplo 2

Neste exemplo a seguir demonstramos que o uso do break não é necessário, porém ao não declará-lo e a depender da lógica de negócio, um erro pode ser inserido no projeto.


    var cargo = "gerente";
    var salario = 2000;
    
    switch (cargo) {
        case "gerente":
            salario *= 1.15;
        case "supervisor":
            salario *= 1.10;
        default:
            salario *= 1.05;
    } 
    

O valor atribuído a salario é 2.656,50. A ausência do break em cada bloco de código faz com que o código declarado dentro de cada case seja executado independentemente do case atender à condição especificada no switch.

Run!


Exemplo 3

No exemplo a seguir demonstramos uma situação em que a ausência do break evita a escrita de linhas de código desnecessárias:


    var mes = "Maio";
    
    switch (mes) {
        case "Janeiro":
        case "Fevereiro":
        case "Março":
            console.log("Verão!");
            break;
        case "Abril":
        case "Maio":
        case "Junho":
            console.log("Outono!");
            break;
        case "Julho":
        case "Agosto":
        case "Setembro":
            console.log("Inverno!");
            break;
        case "Outubro":
        case "Novembro":
        case "Dezembro":
            console.log("Primavera!");
    } 
    

O valor impresso no console é "Outono".

Run!


Exemplo 4

No exemplo a seguir demonstramos como customizar uma mensagem de boas-vindas com switch:


    sexo = "feminino";
    
    switch (sexo) {
        case "feminino":
            console.log("Bem-vinda!");
            break;
        case false:
            console.log("Bem-vindo!");
    } 
    

O valor impresso no console é "Bem-vinda!".

Run!


Exemplo 5

No exemplo a seguir demonstramos como obter o nome do mês a partir do seu respectivo número com switch:


    var mes = 4;
    var nomeMes = "";
    
    switch (mes) {
        case 1:
            nomeMes = "Janeiro";
            break;
        case 2:
            nomeMes = "Fevereiro";
            break;
        case 3:
            nomeMes = "Março";
            break;
        case 4:
            nomeMes = "Abril";
            break;
        case 5:
            nomeMes = "Maio";
            break;
        case 6:
            nomeMes = "Junho";
            break;
        case 7:
            nomeMes = "Julho";
            break;
        case 8:
            nomeMes = "Agosto";
            break;
        case 9:
            nomeMes = "Setembro";
            break;
        case 10:
            nomeMes = "Outubro";
            break;
        case 11:
            nomeMes = "Novembro";
            break;
        case 12:
            nomeMes = "Dezembro";
            break;
        default:
            nomeMes = "Mês inexistente";
    } 
    console.log(nomeMes);
    

O valor impresso no console é "Abril". Caso o valor seja diferente dos especificados em cada case, é impresso "Mês inexistente".

Run!


Exemplo 6

No exemplo a seguir demonstramos como redirecionar um usuário para uma página diferente com switch:


    var tipoUsuario = "Adolescente";
    
    switch (tipoUsuario) {
        case "Adolescente":
            window.location.href = "homejovem.html";
            break;
        case "Adulto":
            window.location.href = "home.html";
    } 
    

O usuário será redirecionado para "homejovem.html".

Run!


Compatibilidade entre navegadores

switch é suportado por todos os browsers apresentados na Tabela 1.

Switch Chrome Firefox IE Edge Safari Opera
Sim Sim Sim Sim Sim Sim

Tabela 1. Compatibilidade da propriedade x browsers.

Veja também