Dominando as Instruções Switch do JavaScript: Sintaxe, Casos de Uso e Exemplos Práticos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução: O que é um switch case?

No JavaScript, o ramificação condicional desempenha um papel crucial no controle do fluxo de um programa. Entre essas estruturas, a instrução switch é usada como uma sintaxe que lida eficientemente com múltiplas condições. Uma instrução switch é útil quando você deseja executar processos diferentes com base em um valor específico. Por exemplo, ela é usada ao exibir mensagens diferentes dependendo do dia da semana ou ao alternar ações com base na entrada do usuário.

Casos de Uso da Instrução switch

A instrução switch é particularmente eficaz nos seguintes cenários:

• Quando você deseja processar múltiplas condições de forma eficiente : Em vez de repetir instruções if, usar switch ajuda a simplificar seu código.
• Quando você deseja executar processos diferentes para cada condição : Útil para alternar comportamentos com base em dados.
• Quando você deseja melhorar a legibilidade do código : Sua estrutura é clara e ajuda a organizar a lógica condicional.

Características Principais do switch

• Ramificação baseada em valor : A instrução switch verifica se o resultado avaliado de uma expressão corresponde a um valor específico.
• Controle usando break : A instrução break interrompe a execução para evitar que ela caia para o próximo case.
• Uso de default : Define o comportamento padrão quando nenhum case corresponde.

Resumo

A instrução switch é uma ferramenta útil que organiza a ramificação condicional e melhora a legibilidade no JavaScript. Na próxima seção, explicaremos sua sintaxe básica e como usá-la com exemplos concretos.

2. Sintaxe Básica e Funções

No JavaScript, a instrução switch é uma estrutura de controle conveniente usada para ramificar a lógica com base em valores específicos. Esta seção explica a sintaxe básica e o papel de cada elemento em detalhes.

Sintaxe Básica

Abaixo está a estrutura básica de uma instrução switch.

switch (式) {
  case 値1:
    // 値1に一致した場合の処理
    break;
  case 値2:
    // 値2に一致した場合の処理
    break;
  default:
    // どの値にも一致しなかった場合の処理
}

Aqui está a explicação de cada elemento.

Detalhes dos Elementos da Sintaxe

1. switch (expression)

• A expression contém o valor ou a expressão computada a ser comparada.

1. case value:

• Cada case especifica um valor a ser comparado com a expressão.

1. break;

• A instrução break sai do switch após executar o case correspondente.

1. default:

• Define o processamento realizado quando nenhum case corresponde.

Exemplo Prático

Aqui está um exemplo de exibição de uma mensagem com base no dia da semana.

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まりです。頑張りましょう！");
    break;
  case "金曜日":
    console.log("もうすぐ週末です。");
    break;
  default:
    console.log("通常の日です。");
}

Resumo

A instrução switch fornece uma ramificação condicional simples e fácil de ler. Em seguida, introduziremos “3. Exemplos Práticos de switch” para explorar usos mais avançados.

3. Exemplos Práticos da Instrução switch

Aqui, explicamos a instrução switch do JavaScript por meio de exemplos concretos — do básico ao avançado — para ajudá-lo a entender como ela é usada na programação do mundo real.

Ramificação Condicional Básica

Exemplo 1: Exibir uma mensagem com base no dia da semana

let day = "水曜日";

switch (day) {
  case "月曜日":
    console.log("今週も頑張りましょう！");
    break;
  case "水曜日":
    console.log("週の半ばです。あと少し！");
    break;
  case "金曜日":
    console.log("週末まであと1日！");
    break;
  default:
    console.log("リラックスできる日です。");
}

Agrupamento de Múltiplos Cases

Exemplo 2: Distinguir dias úteis e fins de semana

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

Combinando Funções com switch

Exemplo 3: Permissões de usuário

function getUserPermission(role) {
  switch (role) {
    case "admin":
      return "すべての権限があります。";
    case "editor":
      return "編集権限があります。";
    case "viewer":
      return "閲覧のみ可能です。";
    default:
      return "権限がありません。";
  }
}

console.log(getUserPermission("editor"));

Resumo

Através desses exemplos práticos, você agora deve entender melhor como usar a instrução switch. Em seguida, abordaremos “4. switch vs if – Qual Você Deve Usar?”

4. switch vs if — Qual Você Deve Escolher?

Tanto switch quanto if podem processar ramificações condicionais em JavaScript, mas são usados de maneira diferente. Entender suas diferenças ajuda a escolher a opção correta para cada situação.

Diferenças Básicas

Comparação com Exemplos

Exemplo 1: Usando switch

let color = "赤";

switch (color) {
  case "赤":
    console.log("ストップ！");
    break;
  case "黄":
    console.log("注意！");
    break;
  case "青":
    console.log("進んでください！");
    break;
  default:
    console.log("無効な色です。");
}

Exemplo 2: Usando if

let score = 85;

if (score >= 90) {
  console.log("評価: A");
} else if (score >= 75) {
  console.log("評価: B");
} else if (score >= 50) {
  console.log("評価: C");
} else {
  console.log("評価: F");
}

Resumo

Ao escolher entre switch e if adequadamente, você pode escrever código eficiente. Em seguida, discutiremos “5. Dicas para Prevenir Erros”.

5. Dicas para Prevenir Erros

A instrução switch do JavaScript é conveniente, mas o uso inadequado pode causar bugs ou comportamentos inesperados. Esta seção explica pontos‑chave para evitar erros.

1. Esquecer o break Causa Fall‑through

Exemplo:

let fruit = "リンゴ";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

Resultado:

リンゴが選ばれました。
バナナが選ばれました。

Solução:

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

2. Não Esqueça o default

Exemplo:

let command = "停止";

switch (command) {
  case "開始":
    console.log("システムを起動します。");
    break;
  case "終了":
    console.log("システムを終了します。");
    break;
}

Solução:

default:
  console.log("無効なコマンドです。");

3. Cuidado com Incompatibilidades de Tipo

Exemplo:

let value = 1;

switch (value) {
  case "1":
    console.log("文字列の1です。");
    break;
  case 1:
    console.log("数値の1です。");
    break;
  default:
    console.log("一致しません。");
}

Resumo

Seguindo estas dicas, você pode prevenir erros e escrever código eficiente e sustentável.

6. Técnicas Avançadas para switch

A instrução switch do JavaScript pode ser usada não apenas para ramificações básicas, mas também para implementações mais flexíveis e avançadas.

1. Agrupando Múltiplos Cases

Exemplo:

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

2. Instruções switch Aninhadas

Exemplo:

let menu = "ドリンク";
let subMenu = "コーヒー";

switch (menu) {
  case "フード":
    switch (subMenu) {
      case "ハンバーガー":
        console.log("ハンバーガーが選ばれました。");
        break;
      default:
        console.log("無効なフードメニューです。");
    }
    break;

  case "ドリンク":
    switch (subMenu) {
      case "コーヒー":
        console.log("コーヒーが選ばれました。");
        break;
      default:
        console.log("無効なドリンクメニューです。");
    }
    break;
}

Resumo

Usar essas técnicas avançadas permite lidar com ramificações complexas de forma mais eficiente.

7. FAQ: Perguntas Comuns e Solução de Problemas

Many developers encounter similar issues when using JavaScript’s switch statement. Here are common questions and solutions.

Q1: O que acontece se você esquecer o break?

Exemplo:

let value = 2;

switch (value) {
  case 1:
    console.log("1が選択されました。");
  case 2:
    console.log("2が選択されました。");
  case 3:
    console.log("3が選択されました。");
}

Resultado:

2が選択されました。
3が選択されました。

Solução:

break;

Q2: O default é obrigatório?

Exemplo:

let fruit = "パイナップル";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
}

Solução:

default:
  console.log("不明なフルーツです。");

Q3: O switch pode comparar intervalos?

Exemplo:

let score = 85;

switch (true) {
  case score >= 90:
    console.log("評価: A");
    break;
  case score >= 75:
    console.log("評価: B");
    break;
  default:
    console.log("評価: F");
}

Resumo

Use este FAQ para lidar com erros e melhorar sua compreensão da instrução switch.

8. Exemplos de Código e Problemas de Prática

Esta seção fornece código de exemplo e problemas de prática usando a instrução switch. Experimente-os para aprofundar sua compreensão.

1. Código de Exemplo Básico

Exemplo 1: Determinar a estação com base no mês

let month = 3;

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("冬です。");
    break;
  case 3:
  case 4:
  case 5:
    console.log("春です。");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏です。");
    break;
  case 9:
  case 10:
  case 11:
    console.log("秋です。");
    break;
  default:
    console.log("無効な月です。");
}

Exemplo 2: Permissões de usuário

let role = "editor";

switch (role) {
  case "admin":
    console.log("すべての権限があります。");
    break;
  case "editor":
    console.log("編集権限があります。");
    break;
  case "viewer":
    console.log("閲覧権限のみあります。");
    break;
  default:
    console.log("権限がありません。");
}

2. Problemas de Prática

Problema 1: Detector de Dia da Semana/Fim de Semana

Crie um programa que determine se um determinado dia é um dia útil ou fim de semana.

Problema 2: Cálculo de Carrinho de Compras

Crie um programa que calcule o custo total com base na categoria do produto e na quantidade.

Problema 3: Sistema de Menu Telefônico

Crie um programa que exiba uma opção com base na entrada numérica do usuário.

Resumo

Use esses problemas de prática para fortalecer suas habilidades com a instrução switch.

9. Resumo e Aplicações Futuras

Este artigo forneceu uma explicação abrangente da instrução switch do JavaScript, desde o básico até técnicas avançadas. Aqui estão os pontos principais e os próximos passos para aprimoramento adicional.

1. Principais Conclusões

• Sintaxe básica e recursos: Use case, break e default para escrever lógica condicional clara.
• Comparação com if: switch é ideal para valores fixos, enquanto if lida com condições complexas.
• Prevenção de erros: Use break, verificação de tipo e default para evitar bugs.
• Técnicas avançadas: Use aninhamento, mapeamento e processamento dinâmico para um design flexível.

2. Dicas para Aplicações Futuras

1. Otimizar Lógica Condicional Complexa

Você pode lidar com condições dinâmicas combinando múltiplas expressões e funções.

2. Implementar Processamento Dinâmico com Mapeamento

Use objetos ou mapas para gerenciamento de dados eficiente e escalável.

const actions = {
  start: () => console.log("システムを起動します。"),
  stop: () => console.log("システムを停止します。"),
  restart: () => console.log("システムを再起動します。"),
};

let command = "restart";
(actions[command] || (() => console.log("無効なコマンドです。")))();

3. Aplicá-lo a Sistemas de Gerenciamento de Estado

Você pode usar switch no desenvolvimento de aplicações com bibliotecas de gerenciamento de estado como Redux ou Vuex.

Resumo

O switch statement é uma ferramenta simples, porém poderosa, na lógica condicional do JavaScript. Ao compreender tanto os fundamentos quanto o uso avançado, você pode melhorar significativamente a legibilidade e a manutenção do seu código.
Use este artigo como base para o desenvolvimento de habilidades adicionais.