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