Domine o JavaScript: Guia Completo da Instrução Switch com Exemplos

últimas postagens

A instrução `switch` em JavaScript é um mecanismo de controle de fluxo condicional, notavelmente útil para construir blocos com múltiplas ramificações.

Este guia detalha a funcionalidade da instrução `switch` e suas aplicações, comparando-a com outras estruturas condicionais como `if` e operadores ternários, auxiliando na escolha da ferramenta mais adequada para cada situação.

O que é a Instrução Switch em JavaScript?

A instrução `switch` é utilizada para determinar qual segmento de código executar, baseado no valor de uma dada expressão. É uma das principais estruturas condicionais em JavaScript, complementando a instrução `if` e o operador ternário. Embora compartilhe semelhanças com estas, suas nuances a tornam a opção ideal em certos contextos. Este artigo tem como objetivo explorar essas particularidades em profundidade.

Como Utilizar a Instrução Switch em JavaScript

Nesta seção, apresentarei a estrutura e o uso da instrução `switch`, com exemplos práticos que exigirão um compilador JavaScript. Um compilador online acessível pode ser encontrado aqui. Alternativamente, você pode consultar nosso artigo sobre os melhores IDEs JavaScript online.

Sintaxe Geral

A estrutura básica da instrução `switch` é:

switch(<expressão>) {
    case <valor 1>:
        <instruções>
        break;
    case <valor 2>:
        <instruções>
        break;
    default:
        <instruções>
}

A palavra-chave `switch` inicia o bloco. Entre parênteses, insere-se uma expressão JavaScript, que pode ser um literal, uma variável ou uma chamada de função, desde que retorne um valor.

O corpo do `switch`, delimitado por chaves, contém múltiplos `case`. Cada `case` é associado a um valor e um conjunto de instruções. Se a expressão avaliada corresponder ao valor de um `case`, as instruções desse `case` serão executadas.

A palavra-chave `break`, opcional, interrompe a execução do bloco `switch`, evitando que os `case` seguintes sejam executados. Sem o `break`, o JavaScript prosseguirá para os próximos `case`, um comportamento conhecido como *fall through*. Exceto quando este comportamento é desejado, o uso de `break` é recomendado.

O `default` é executado quando nenhum dos `case` corresponde à expressão avaliada.

Exemplos

Esta seção demonstrará aplicações práticas da instrução `switch`.

#1. Com Fallthrough

O exemplo abaixo ilustra o uso de `switch` sem `break`, mostrando o comportamento de *fallthrough*:

Neste caso, o código trata diferentes códigos de status HTTP:

const statusCode = <inserir código de status aqui>

switch (statusCode) {
    case 200:
        console.log('OK');
    case 301:
        console.log('Redirecionamento');
    case 403:
        console.log('Proibido');
    case 404:
        console.log('Não encontrado');
    case 500:
        console.log('Erro Interno do Servidor')
}

O código verifica se um valor corresponde a um código de status específico e imprime uma mensagem descritiva.

Note o resultado ao definir o `statusCode` como 403.

Após o `case` 403 ser executado, todos os `case` seguintes também o são. Este é o *fallthrough*. Isso geralmente não é desejado, pois se quer executar um único `case`. Essa peculiaridade da linguagem JavaScript explica a importância de usar a palavra-chave `break`.

#2. Sem Fallthrough

Para evitar o *fallthrough*, adicionamos `break` ao final de cada `case`. O exemplo abaixo demonstra o resultado:

const statusCode = <insira um código de status aqui>

switch (statusCode) {
    case 200:
        console.log('OK');
        break;
    case 301:
        console.log('Redirecionamento');
        break;
    case 403:
        console.log('Proibido');
        break;
    case 404:
        console.log('Não encontrado');
        break;
    case 500:
        console.log('Erro Interno do Servidor')
        break;
}

Com o `statusCode` igual a 403, o resultado é:

O código agora executa apenas o `case` correspondente, evitando o *fallthrough*.

#3. Fallthrough Útil

O *fallthrough* pode ser útil em certos casos. Por exemplo, para verificar se um movimento é horizontal ou vertical:

const direction = '<inserir direção aqui>'

switch(direction) {
    case 'esquerda':
    case 'direita':
        console.log('movimento horizontal');
        break;
    case 'cima':
    case 'baixo':
        console.log('movimento horizontal');
        break;
}

Definindo a direção como “esquerda”, o resultado é:

E com a direção “direita”, o resultado é o mesmo:

Quando o `case` “esquerda” é correspondido, ele passa para o `case` “direita”, imprimindo “movimento horizontal”. O `break` impede a execução do `case` “cima”. Similarmente, com o `case` “direita” correspondido, as instruções correspondentes são executadas e a execução é interrompida.

O *fallthrough* permite implementar lógica OR em seu código.

#4. Correspondência de Intervalos

A instrução `switch` compara valores. Mas às vezes, verificar se um valor está dentro de um intervalo é necessário. Essa verificação pode ser complexa, mas o exemplo abaixo oferece uma solução:

O exemplo demonstra um programa que imprime uma nota baseada em uma pontuação. Acima de 90, imprime A+, entre 80 e 90, A, e assim por diante.

Para isso, a expressão `true` é inserida nos parênteses, e o valor de cada `case` é uma operação lógica que será verdadeira apenas se a pontuação estiver no intervalo do `case`. Por exemplo, `mark >= 90` só será verdadeiro se a pontuação for maior ou igual a 90, correspondendo ao valor da expressão.

const mark = <substituir pela pontuação>;

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 com pontuação igual a 80 é:

Com pontuação 95:

Com pontuação 45:

Escopo Léxico

As instruções dentro de um `case` não possuem escopo léxico. Variáveis definidas em um `case` são acessíveis em outros. Isso é importante em `switch` que podem executar múltiplos `case`. Veja este exemplo:

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

Ambos os `case` correspondem. No primeiro, definimos a variável `num`; no segundo, acessamos seu valor. Não há erro, como mostrado abaixo:

Diferença entre `switch` e outras condicionais

A instrução `switch` é ideal para testar múltiplas condições. A instrução `if` é adequada para 2 ou 3 condições. Um operador ternário é ideal para expressar uma condicional em uma única linha.

Comece com operadores ternários. Se a lógica for mais complexa, use `if`. Se `if` for insuficiente, então a instrução `switch` é a melhor opção.