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.
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.
