Como funciona o switch

O switch é uma boa ferramenta para deixar o código limpo e simples de entender.

Talvez você vai achar bem parecido com o if e de certa forma é, mas não é a mesma coisa.

Boa leitura! 📖 🚀

O que é o switch?

Programas frequentemente precisam escolher entre diferentes possibilidades.

No exemplo do vídeo, usei uma máquina de bebidas:

Qual bebida o usuário escolheu?

Se escolheu Coca-Cola, libera Coca-Cola.

Se escolheu Guaraná, libera Guaraná.

Se escolheu Fanta, libera Fanta.

Podemos fazer isso usando vários if:

let bebida = "guarana";

if (bebida === "coca") {
  liberarBebida("🥤 Coca-Cola");
} else if (bebida === "guarana") {
  liberarBebida("🥤 Guaraná");
} else if (bebida === "fanta") {
  liberarBebida("🍊 Fanta");
}

Mas quando temos uma variável que pode assumir várias opções conhecidas, existe outra estrutura que pode deixar essa lógica mais organizada: o switch.

O switch escolhe um caminho entre várias opções.

A estrutura do switch

A estrutura básica é:

switch (valor) {
  case opcao1:
    // código
    break;

  case opcao2:
    // código
    break;

  default:
    // caso nenhuma opção seja encontrada
}

Podemos entender cada parte:

• switch → indica o valor que queremos analisar;
• case → representa uma possibilidade;
• break → encerra o switch;
• default → executa quando nenhuma opção corresponde.

Como o switch funciona?

Começando de cima para baixo:

let bebida = "guarana";

switch (bebida) {
  case "coca":
    console.log("Coca-Cola");
    break;

  case "guarana":
    console.log("Guaraná");
    break;

  case "fanta":
    console.log("Fanta");
    break;
}

O programa verifica o valor de bebida e procura um case correspondente.

Como:

bebida = "guarana"

encontramos:

case "guarana"

Então esse bloco é executado.

Podemos visualizar o fluxo:

Cada case representa uma possibilidade.

O break

O break é uma parte importante do switch.

Veja:

switch (bebida) {
  case "coca":
    console.log("Coca-Cola");
    break;

  case "guarana":
    console.log("Guaraná");
    break;
}

Quando o programa encontra o case correto, executa o código e encontra o break.

O break diz:

Pare o switch aqui.

Sem ele, o JavaScript pode continuar executando os próximos case.

O que acontece sem break?

Olha o exemplo:

let bebida = "coca";

switch (bebida) {
  case "coca":
    console.log("Coca-Cola");

  case "guarana":
    console.log("Guaraná");

  case "fanta":
    console.log("Fanta");
}

O resultado será:

Coca-Cola
Guaraná
Fanta

Isso acontece porque, depois de encontrar o case "coca", o programa continua executando os próximos blocos.

Esse comportamento é chamado de fall-through. Deve ser usado com cuidado.

Na maioria dos casos, não é isso que queremos.

Por isso, normalmente usamos:

break;

break encerra o switch.

O default

E se o valor não corresponder a nenhum case? Podemos usar default.

let bebida = "suco";

switch (bebida) {
  case "coca":
    console.log("Coca-Cola");
    break;

  case "guarana":
    console.log("Guaraná");
    break;

  case "fanta":
    console.log("Fanta");
    break;

  default:
    console.log("Bebida não encontrada.");
}

Como "suco" não corresponde a nenhuma opção, o default será executado.

Podemos pensar nele como:

Nenhuma das opções anteriores.

Quando escolher o switch ou if?

Os dois são estruturas de decisão.

O if é mais flexível para trabalhar com condições:

let idade = 20;

if (idade >= 18) {
  console.log("Maior de idade.");
}

Já o switch é interessante quando temos um valor com várias opções possíveis:

let dia = "segunda";

switch (dia) {
  case "segunda":
    console.log("Começo da semana.");
    break;

  case "sexta":
    console.log("Quase fim de semana.");
    break;

  default:
    console.log("Outro dia.");
}

Uma forma simples de pensar:

Não é uma regra absoluta. Muitas situações podem ser resolvidas de mais de uma maneira.

A coisa mais importante é deixar a regra do programa clara!

Exemplos do mundo real

Vamos ver alguns exemplos de sistemas.

Menu de um sistema

Um programa pode ter diferentes opções de menu:

let opcao = "perfil";

switch (opcao) {
  case "inicio":
    console.log("Abrindo início...");
    break;

  case "perfil":
    console.log("Abrindo perfil...");
    break;

  case "configuracoes":
    console.log("Abrindo configurações...");
    break;

  default:
    console.log("Opção inválida.");
}

Status de um pedido

Podemos escolher uma mensagem de acordo com o status:

let status = "enviado";

switch (status) {
  case "processando":
    console.log("Seu pedido está sendo preparado.");
    break;

  case "enviado":
    console.log("Seu pedido está a caminho.");
    break;

  case "entregue":
    console.log("Seu pedido foi entregue.");
    break;

  default:
    console.log("Status desconhecido.");
}

Dias da semana

Também podemos usar switch para tratar diferentes valores:

let dia = "sábado";

switch (dia) {
  case "segunda":
    console.log("Início da semana.");
    break;

  case "sexta":
    console.log("Quase fim de semana.");
    break;

  case "sábado":
  case "domingo":
    console.log("Fim de semana!");
    break;

  default:
    console.log("Dia de semana.");
}

Aqui temos um detalhe interessante.

Dois case podem compartilhar o mesmo código.

case "sábado":
case "domingo":
  console.log("Fim de semana!");
  break;

Assim, tanto "sábado" quanto "domingo" levam ao mesmo caminho.

Eu recomendo usar o laboratório e experimente o uso de switch. Pense em problemas que o switch pode resolver e teste. Testar no Laboratório

Bons estudos 🚀

Até a próxima!

João.