A instrução JavaScript Switch é uma instrução de fluxo de controle condicional. É extremamente útil para criar blocos condicionais com muitas cláusulas.
Este artigo é um tutorial sobre a instrução switch e como usá-la. Também iremos compará-lo com outras construções condicionais, instruções if e operadores ternários para que você saiba quando usar cada um.
últimas postagens
Qual é a instrução Switch em JavaScript?
A instrução JavaScript Switch é usada para decidir qual ramo do código executar com base no valor de uma expressão. É uma das duas instruções condicionais em JavaScript.
A primeira é a instrução if e a segunda é o operador ternário. Funciona de forma semelhante aos dois, mas possui nuances diferentes, o que o torna ideal para alguns casos. Neste artigo, vamos explorar tudo isso.
Como usar a instrução JavaScript Switch
Nesta parte do artigo, explicarei a instrução JavaScript Switch e como usá-la. Usarei exemplos de código, então você precisará de um compilador JavaScript para acompanhar. O mais fácil de usar é este compilador JavaScript online. Alternativamente, você pode verificar nosso artigo sobre os melhores IDEs JavaScript online.
Sintaxe Geral
A sintaxe geral para uma instrução switch é a seguinte:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
A palavra-chave switch marca o início de um bloco switch JavaScript. Dentro dos parênteses, você coloca qualquer expressão JavaScript. Uma expressão é qualquer coisa avaliada como um valor. Por exemplo, literais como strings ou números, variáveis ou chamadas de função.
A seguir, adicionamos o corpo da instrução switch entre chaves. O corpo é composto por vários casos. Cada caso possui um valor e um grupo de afirmações. Se a expressão entre parênteses for igual ao valor de um caso, então as instruções desse caso serão executadas.
Para cada caso, podemos adicionar a palavra-chave break. Adicionar esta palavra é totalmente opcional. Se você adicioná-lo, o JavaScript sairá do bloco switch quando o encontrar. Se não estiver presente, o JavaScript continuará executando todos os casos posteriores. Isso é conhecido como queda. A menos que você queira aproveitar as vantagens do fall through, é recomendável adicionar a palavra-chave break.
A última palavra-chave a ser observada é a palavra-chave padrão. Este caso corresponde a qualquer valor da expressão entre parênteses.
Exemplos
Esta seção demonstrará diferentes exemplos de uso da instrução switch.
#1. Com queda
Aqui está um exemplo de uso da instrução switch sem a palavra-chave break. O objetivo disso é demonstrar falhas.
Neste exemplo, estamos escrevendo código para lidar com diferentes códigos de status HTTP:
const statusCode = <insert status code here>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Redirect');
case 403:
console.log('Forbidden');
case 404:
console.log('Not Found');
case 500:
console.log('Internal Server Error')
}
No trecho de código acima, verificamos se um valor é igual a um código de status específico e, em seguida, imprimimos uma mensagem descrevendo o código de status.
Observe o que acontece quando você define o código de status como 403.
Depois de combinar os 403 casos, todos os casos seguintes também foram combinados. Isso é chamado de fallthrough. Isto não é o ideal, pois muitas vezes gostamos de combinar um caso. Essa estranha peculiaridade do JavaScript é a razão pela qual é necessário adicionar a palavra-chave break.
#2. Sem queda
Para evitar falhas, adicionamos a palavra-chave break no final de cada caso. O exemplo a seguir demonstra o que acontece quando você faz isso.
const statusCode = <insert a status code here>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Redirect');
break;
case 403:
console.log('Forbidden');
break;
case 404:
console.log('Not Found');
break;
case 500:
console.log('Internal Server Error')
break;
}
E quando você executa o código acima com o código de status 403, você consegue isso.
Como você pode ver, o código agora corresponde a apenas um caso e evita falhas.
#3. Fallthrough útil
Dito isto, é importante observar que o fallthrough pode ser útil em alguns casos. Considere o exemplo a seguir, onde queremos verificar se uma pessoa está se movendo horizontalmente ou verticalmente com base na entrada direcional.
const direction = '<enter direction here>'
switch(direction) {
case 'left':
case 'right':
console.log('horizontal movement');
break;
case 'up':
case 'down':
console.log('horizontal movement');
break;
}
Se você definir a direção para a esquerda e executar o código acima, este será o resultado:
E quando você define a direção para a direita, ainda obtém o mesmo resultado:
Isso ocorre porque quando a caixa esquerda corresponde, ela passa para a caixa direita e imprime ‘movimento horizontal’. Mas como existe uma palavra-chave break, ela não passa para o caso up. Quando o caso certo corresponde, ele executa as instruções no caso certo e quebra.
Portanto, o ‘movimento horizontal’ é exibido quando a direção é para a esquerda ou para a direita. Portanto, o fallthrough permite criar lógica OR em seu código.
#4. Intervalos correspondentes
A instrução switch JavaScript verifica se o valor de um case é igual ao valor da expressão. Nesse caso, ele executa as instruções nesse caso. No entanto, às vezes você pode querer verificar se um valor está em um determinado intervalo. Os intervalos correspondentes podem ser complicados, mas o trecho de código abaixo demonstra uma solução alternativa.
No exemplo abaixo, estamos implementando um programa que, ao receber uma nota, imprime a nota. Por exemplo, se a marca estiver acima de 90, o programa imprimirá A+. Se estiver acima de 80, mas menor que 90, imprimirá A e assim por diante.
Para fazer isso, coloquei a expressão true entre parênteses. Então, o valor de cada caso foi definido como uma operação lógica que só será verdadeira se a marca estiver no intervalo daquele caso. Por exemplo, a marca do último caso >= 90 só será verdadeira se a marca for maior ou igual a 90. Portanto, corresponderá ao valor da expressão, pois verdadeiro é igual a verdadeiro.
const mark = <replace with any mark>;
switch (true) {
case mark >= 50 && mark < 60:
console.log('D');
break;
case mark >= 60 && mark < 70:
console.log('C');
break;
case mark >= 70 && mark < 80:
console.log('B');
break;
case mark >= 80 && mark < 90:
console.log('A')
break;
case mark >= 90:
console.log('A+')
break;
default:
console.log('<50')
}
A saída do código acima quando a marca está definida como 80 é:
E quando a marca está definida para 95:
E quando a marca é 45:
Escopo Lexical
As instruções dentro de um case em um switch não têm escopo lexical. Isso significa que variáveis definidas em um caso estarão acessíveis em um caso diferente. É importante saber isso ao escrever blocos de switch onde mais de um caso será correspondido. Aqui está um exemplo para explicar isso melhor:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
No trecho de código acima, ambos os casos correspondem. No primeiro caso, definimos a variável num; na segunda, acessamos seu valor. Não receberemos nenhum erro, como você pode ver na imagem abaixo:
Diferença entre uma instrução Switch e outras condicionais
Uma instrução Switch é mais adequada para cenários em que você está testando diversas condições. Uma instrução if é adequada para condições em que você está testando 2 ou 3 condições. Um operador ternário só é bom para condições quando você deseja expressar uma condicional como uma linha.
Para ser breve, você deve optar por escrever primeiro operadores ternários. Se for impossível expressar a lógica em um operador ternário, você poderá usar uma instrução if. Mas se isso não for possível, você opta pela instrução switch.
Conclusão
Este artigo abordou a instrução switch, como usá-la e suas peculiaridades estranhas. Também abordamos quando usá-lo.
A seguir, você pode querer aprimorar o JavaScript usando essas folhas de dicas do JavaScript.