Declarações Condicionais em JavaScript Explicadas: Como Usar if, else if e switch

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

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

1. Introdução: Ramificação Condicional em JavaScript e o Papel do “else if”

JavaScript é uma linguagem de programação amplamente utilizada para implementar funcionalidades dinâmicas no desenvolvimento web. Entre seus muitos recursos, a ramificação condicional é um mecanismo essencial que permite que diferentes processos sejam executados com base em condições específicas.

Neste artigo, focamos em um tipo de ramificação condicional: a declaração “else if”. Explicaremos sua sintaxe básica e uso em detalhes, utilizando exemplos concretos para facilitar o entendimento para iniciantes.

A Importância da Ramificação Condicional em JavaScript

Na programação, muitas vezes é necessário executar ações diferentes dependendo de certas condições. Por exemplo, em um site de compras online, o frete pode ser gratuito dependendo do valor da compra, ou códigos de cupom podem ser aplicados apenas quando condições específicas são atendidas.

Em situações como essas, as declarações if...else e else if do JavaScript permitem que você defina uma lógica condicional flexível.

O Que É a Declaração “else if”?

A declaração else if é uma sintaxe usada para avaliar múltiplas condições sequencialmente. Ela é usada da seguinte forma:

if (condition1) {
  // Process executed when condition1 is true
} else if (condition2) {
  // Process executed when condition2 is true
} else {
  // Process executed when all conditions above are false
}

Essa estrutura é particularmente útil quando você precisa verificar múltiplas condições. Por exemplo, ela pode ser usada para alterar permissões de acesso com base na idade do usuário ou determinar uma classificação com base em uma pontuação.

Visão Geral do Artigo

Este artigo aborda os seguintes tópicos em ordem:

1. Sintaxe básica e uso das declarações “if” e “else”
2. Sintaxe e exemplos práticos da declaração “else if”
3. Técnicas aplicadas usando exemplos de código do mundo real
4. Uma comparação entre as declarações “else if” e “switch”
5. Erros comuns e dicas de solução de problemas

Ao aprender esses tópicos, você fortalecerá suas habilidades em ramificação condicional em JavaScript e será capaz de escrever programas mais avançados.

Na próxima seção, começaremos examinando mais de perto a sintaxe básica das declarações “if” e “else”.

2. Fundamentos: Sintaxe e Uso das Declarações “if” e “else”

A ramificação condicional em JavaScript pode ser implementada de forma simples usando as declarações if e else. Nesta seção, explicamos sua sintaxe básica e uso concreto.

O Que É a Declaração “if”?

A declaração if é uma sintaxe que executa código apenas quando uma condição especificada avalia para true. A estrutura básica é mostrada abaixo.

if (condition) {
  // Code executed when the condition is true
}

Exemplo de uma Declaração “if”

O exemplo a seguir ramifica o processamento com base na idade do usuário.

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

Neste código, a mensagem “Você é maior de idade.” é exibida quando a variável age é 18 ou mais. Se a condição não for atendida, nada é executado.

O Que É a Declaração “else”?

A declaração else define o processo executado quando a condição do “if” é falsa. Ela é usada em combinação com if.

if (condition) {
  // Code executed when the condition is true
} else {
  // Code executed when the condition is false
}

Exemplo de uma Declaração “else”

O próximo exemplo exibe uma mensagem diferente quando o usuário tem menos de 18 anos.

let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Neste código, “Você é menor de idade.” é exibido quando age é menor que 18.

Resumo

Nesta seção, aprendemos a sintaxe e o uso das declarações condicionais básicas do JavaScript: if e else. Essas construções formam a base não apenas para ramificações simples, mas também para construir lógicas mais complexas.

Na próxima seção, analisaremos mais detalhadamente a instrução else if, que permite lidar com múltiplas condições. Exploraremos exemplos práticos e técnicas aplicadas.

3. Intermediário: Sintaxe e Exemplos de “else if” para Iniciantes

Nesta seção, explicamos o ramificação condicional complexa usando a instrução “else if”. Ao usar else if, você pode avaliar várias condições em sequência e executar o processo apropriado.

Sintaxe da Instrução “else if”

A instrução else if é uma sintaxe estendida para avaliar múltiplas condições. A estrutura básica é a seguinte.

if (condition1) {
  // Process when condition1 is true
} else if (condition2) {
  // Process when condition2 is true
} else {
  // Process when all conditions are false
}

Exemplo: Avaliação de Pontuação de Teste

O código a seguir exibe uma avaliação baseada na pontuação de um teste.

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

Resumo

Nesta seção, explicamos a sintaxe e os exemplos da instrução “else if”. A instrução else if é um recurso poderoso que permite avaliar múltiplas condições em ordem.

Na próxima seção, apresentaremos exemplos mais avançados e estudos de caso para ajudá‑lo a desenvolver habilidades práticas.

4. Avançado: Código Prático e Estudos de Caso Usando “else if”

Nesta seção, introduzimos exemplos de código prático usando a instrução else if. Ao trabalhar com cenários comuns em aplicações reais, você pode fortalecer suas habilidades aplicadas.

Caso 1: Validação de Entrada de Formulário

let username = "user123";
let password = "pass123";

if (username === "") {
  console.log("Please enter a username.");
} else if (password === "") {
  console.log("Please enter a password.");
} else if (password.length < 6) {
  console.log("Password must be at least 6 characters long.");
} else {
  console.log("The input is valid.");
}

Caso 2: Avaliação e Classificação de Pontuação

let score = 72;

if (score >= 90) {
  console.log("Rank: S");
} else if (score >= 80) {
  console.log("Rank: A");
} else if (score >= 70) {
  console.log("Rank: B");
} else if (score >= 60) {
  console.log("Rank: C");
} else {
  console.log("Rank: D");
}

Resumo

Nesta seção, apresentamos exemplos aplicados e código prático usando a instrução else if.
Ao aplicar esses padrões, você pode lidar com lógica condicional mais complexa.

Na próxima seção, compararemos detalhadamente as instruções else if e switch e explicaremos como escolher entre elas.

5. “else if” vs “switch”: Qual Você Deve Usar?

Em JavaScript, duas abordagens comumente usadas para ramificação condicional são a instrução else if e a instrução switch. Nesta seção, comparamos suas sintaxes e características e explicamos como escolher a mais adequada para seu caso de uso.

Características da Instrução “else if”

Sintaxe e Exemplo

let grade = "B";

if (grade === "A") {
  console.log("Excellent!");
} else if (grade === "B") {
  console.log("Good performance.");
} else if (grade === "C") {
  console.log("Pass level.");
} else {
  console.log("Retest required.");
}

Características da Instrução “switch”

Sintaxe e Exemplo

let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent!");
    break;
  case "B":
    console.log("Good performance.");
    break;
  case "C":
    console.log("Pass level.");
    break;
  default:
    console.log("Retest required.");
}

Resumo

• Instrução “else if”: Adequada para expressões condicionais complexas e operadores lógicos.
• Instrução “switch”: Adequada para organizar ramificações condicionais baseadas em valores específicos.

6. Erros Comuns e Dicas de Tratamento de Exceções

Nesta seção, explicamos os erros mais frequentes ao usar a instrução else if e como evitá‑los por meio de um tratamento de exceções adequado.

Erros Comuns e Soluções

Avaliação Incorreta da Condição

let age = 20;

if (age > 18) {
  console.log("You are an adult.");
} else if (age > 20) {
  console.log("You are over 20.");
} else {
  console.log("You are a minor.");
}

Adicionando Tratamento de Exceções

try {
  let input = prompt("Please enter a score:");
  let score = parseInt(input);

  if (isNaN(score)) {
    throw new Error("Please enter a numeric value.");
  }

  if (score >= 90) {
    console.log("Grade: A");
  } else if (score >= 80) {
    console.log("Grade: B");
  } else {
    console.log("Grade: C");
  }
} catch (error) {
  console.error(error.message);
}

Resumo

Ao prevenir erros nas expressões condicionais e utilizar técnicas de depuração e tratamento de exceções, você pode escrever código mais seguro e robusto.

7. FAQ: Respondendo Perguntas Frequentes

Nesta seção, abordamos dúvidas e equívocos comuns que os leitores costumam ter sobre a instrução else if em JavaScript.

P1. Qual a diferença entre “else if” e “if”?

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

P2. Quantas vezes é possível usar “else if”?

Não há limite, mas se houver muitas condições, considere usar a instrução switch.

P3. Qual a diferença entre “else if” e o operador ternário?

let score = 75;
console.log(score >= 60 ? "Passed!" : "Failed.");

8. Conclusão: Domine as Instruções “else if” em JavaScript

Neste artigo, cobrimos tudo, desde os conceitos básicos até exemplos avançados de ramificação condicional em JavaScript usando a instrução else if.

Principais Pontos de Aprendizado

• Sintaxe básica: Aprendeu como as expressões condicionais controlam o fluxo do programa.
• Exemplos práticos: Fortaleceu habilidades aplicadas por meio de código do mundo real.
• Comparação: Entendeu como escolher entre else if e switch.
• Tratamento de exceções: Aprendeu técnicas de depuração para prevenir erros.

Próximos Passos

• Uso de operadores lógicos: Aprenda expressões condicionais mais complexas.
• Operadores ternários e avaliação de curto‑circuito: Simplifique condições.
• Combinação de condicionais com funções: Melhore a reutilização de código.

Domine a instrução else if e comece a escrever programas JavaScript práticos e voltados ao mundo real!