Declarações condicionais em JavaScript: if, else e else if

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

Declarações condicionais em JavaO script decide qual bloco de código será executado testando uma condição, e as estruturas if, if…else e if…else if…else abrangem quase todas as decisões de ramificação que um script iniciante precisará.

  • 🔘 Sintaxe: Uma instrução if executa seu bloco somente quando a condição dentro dos parênteses for avaliada como verdadeira.
  • ☑️ Duas ramificações: A estrutura if…else fornece um bloco de fallback que é executado sempre que a condição for falsa.
  • ✅ Vários ramos: O encadeamento de `else if` testa várias condições em ordem e para na primeira correspondência.
  • 🧪 Abreviação: O operador ternário condensa uma simples estrutura condicional if…else em uma única expressão que retorna um valor.
  • 🛠️ Alternativa: Uma instrução switch compara um valor com várias opções fixas de forma mais organizada do que uma longa cadeia de argumentos.
  • 📊 Armadilhas: Valores falsos, um operador de atribuição incorreto e chaves ausentes são as causas da maioria dos erros condicionais.
Saiba Mais

Declarações condicionais em JavaScript

JavaInstruções condicionais de script

Existem basicamente três tipos de declarações condicionais em JavaScript.

  1. Se Declaração: uma instrução 'if' executa código com base em uma condição.
  2. if... else Declaração: A instrução if…else consiste em dois blocos de código; quando uma condição é verdadeira, ele executa o primeiro bloco de código e quando a condição é falsa, ele executa o segundo bloco de código.
  3. declaração if…else if…else: quando várias condições precisam ser testadas e diferentes blocos de código precisam ser executados com base em qual condição é verdadeira, a instrução if…else if…else é usada.

Cada uma das três formas é examinada abaixo, com sua sintaxe e um exemplo executável. As mesmas regras se aplicam independentemente de o script estar localizado em um diretório específico. dentro da página ou em um arquivo externoe se a condição está escrita no nível superior ou dentro de um função.

Como usar instruções condicionais

Instruções condicionais são usadas para decidir o fluxo de execução com base em diferentes condições. Se uma condição for verdadeira, você poderá executar uma ação e se a condição for falsa, você poderá executar outra ação.

O diagrama abaixo ilustra essa ideia como uma bifurcação: uma única condição é avaliada uma única vez, e o controle segue pelo ramo verdadeiro ou pelo ramo falso, nunca por ambos.

Fluxograma mostrando um JavaCondição de script que se ramifica em um caminho verdadeiro e um caminho falso.

Declaração If

Sintaxe:

if(condition)
{
	lines of code to be executed if condition is true
}

Você pode usar if declaração se você quiser verificar apenas uma condição específica. Quando a expressão dentro dos parênteses for avaliada como verdadeira. true, o bloco é executado; quando ele é avaliado como false, o intérprete simplesmente ignora essa parte e o texto continua com a próxima declaração.

Tente isso você mesmo:

<html>
<head>
	<title>IF Statments!!!</title>
	<script type="text/javascript">
		var age = prompt("Please enter your age");
		if(age>=18)
		document.write("You are an adult <br />");
		if(age<18)
		document.write("You are NOT an adult <br />");
	</script>
</head>
<body>
</body>
</html>

O exemplo pede ao visitante que informe sua idade e, em seguida, testa esse valor duas vezes: uma vez para maiores de 18 anos e outra para menores de 18 anos. Isso ocorre porque são duas verificações separadas. if declarações são usadas em vez de um elseAmbas as condições são avaliadas sempre que a página é carregada.

Equivalente moderno: O código acima é mantido exatamente como foi publicado. Na versão atual JavaO script utiliza a mesma lógica que normalmente é escrita com let or const em vez de var, com console.log() or textContent em vez de document.write()e sem o type="text/javascript" atributo, que o HTML5 torna opcional.

Declaração If…Else

Sintaxe:

if(condition)
{
	lines of code to be executed if the condition is true
}
else
{
	lines of code to be executed if the condition is false
}

Você pode usar o if...else A instrução `if` é útil se você precisa verificar uma condição e executar um bloco de código diferente para cada resultado. Exatamente um dos dois blocos é sempre executado, portanto, nenhum segundo teste separado é necessário.

Tente isso você mesmo:

<html>
<head>
	<title>If...Else Statments!!!</title>
	<script type="text/javascript">
		// Get the current hours
		var hours = new Date().getHours();
		if(hours<12)
		document.write("Good Morning!!!<br />");
		else
		document.write("Good Afternoon!!!<br />");
	</script>
</head>
<body>
</body>
</html>

Aqui você encontra new Date().getHours() Retorna a hora atual do relógio do navegador como um número de 0 a 23. Qualquer valor abaixo de 12 produz a saudação de bom dia, e todos os outros valores são exibidos. else ramo.

Declaração If…Else If…Else

Sintaxe:

if(condition1)
{
	lines of code to be executed if condition1 is true
}
else if(condition2)
{
	lines of code to be executed if condition2 is true
}
else
{
	lines of code to be executed if condition1 is false and condition2 is false
}

Você pode usar o if...else if...else Use a instrução se quiser verificar mais de duas condições. As condições são avaliadas de cima para baixo, a execução para na primeira que for verdadeira e a última na segunda. else Serve como uma solução genérica quando nenhuma delas corresponde.

Tente isso você mesmo:

<html>
<head>
	<script type="text/javascript">
		var one = prompt("Enter the first number");
		var two = prompt("Enter the second number");
		one = parseInt(one);
		two = parseInt(two);
		if (one == two)
			document.write(one + " is equal to " + two + ".");
		else if (one<two)
			document.write(one + " is less than " + two + ".");
		else
			document.write(one + " is greater than " + two + ".");
	</script>
</head>
<body>
</body>
</html>

Observe as duas chamadas para parseInt()Valores retornados por prompt() São strings, portanto, compará-las sem conversão compararia texto em vez de números e relataria “9” como maior que “10”.

Não perca:

Ternário Operator: Uma abreviação para if…else

Quando um if...else O bloco escolhe apenas entre dois valores, enquanto o operador condicional (ternário) expressa a mesma decisão com uma única expressão. É o único JavaOperador de script que recebe três operandos: uma condição, um ponto de interrogação, o valor usado quando a condição é verdadeira, dois pontos e o valor usado quando é falsa.

// if...else form
let message;
if (age >= 18) {
  message = "adult";
} else {
  message = "minor";
}

// same decision as a ternary expression
let label = age >= 18 ? "adult" : "minor";

Use o operador ternário quando ele melhorar a legibilidade, e não apenas para economizar linhas:

  • Bom ajuste: Escolher um entre dois valores para atribuir, retornar ou inserir em uma string de modelo.
  • Ajuste inadequado: Ramificações que executam várias instruções, chamam funções para seus efeitos colaterais ou precisam de suas próprias variáveis ​​locais.
  • Evite construir ninhos: Um operador ternário dentro de outro operador ternário é muito mais difícil de ler do que um... else if corrente.

Declaração switch versus if…else if…else

Ao longo else if Uma cadeia que compara repetidamente a mesma variável com diferentes valores fixos geralmente é mais clara como uma switch declaração. O switch avalia sua expressão uma vez e, em seguida, salta para a condição correspondente. case; break impede que a execução prossiga para o próximo caso, e default desempenha o papel do final else.

switch (day) {
  case "Sat":
  case "Sun":
    document.write("Weekend");
    break;
  default:
    document.write("Weekday");
}

As duas estruturas não são intercambiáveis ​​em todas as situações:

Ponto de comparação se…senão se…senão interruptor
Tipo de teste Qualquer expressão booleana, incluindo intervalos como hours<12 Igualdade apenas em relação a valores fixos
Comparação utilizada Qualquer operador que você escrever Comparação rigorosa, então "5" não corresponde 5
legibilidade Melhor para algumas condições não relacionadas. Melhor para muitos valores de uma variável
Inseto comum Esquecendo o rastro else Esquecendo break, o que permite que a execução falhe.

Valores verdadeiros e falsos em JavaCondições do Script

Uma condição não precisa ser uma comparação. JavaO script converte primeiro tudo o que encontra dentro dos parênteses em um valor booleano, e é por isso que if (name) é um código válido. Apenas seis valores são convertidos para falso: false, 0, a string vazia, null, undefined e NaNTodo o resto é verdadeiro, incluindo a string. "0", um array vazio e um objeto vazio.

A maioria dos erros condicionais em scripts para iniciantes decorre de uma pequena lista de falhas:

  • Atribuição em vez de comparação: if (x = 5) atribui valores e é sempre verdadeiro; if (x === 5) compara.
  • Surpresas relacionadas à igualdade flexível: == converte os tipos antes de comparar, então "" == 0 É verdade. Prefira ===.
  • Ausência de braquetes: sem {} Apenas a próxima instrução pertence ao ramo, exatamente como nos exemplos acima.
  • Entrada não convertida: valores de prompt() e os campos do formulário são strings até parseInt() or Number() converte-os.
  • Ramos inacessíveis: num else if Na cadeia, coloque a condição mais restrita primeiro, ou um teste anterior mais amplo sempre prevalecerá.

Perguntas Frequentes

Uma única = Atribui um valor e, acidentalmente, torna a condição verdadeira. == compara após converter os tipos, então "" == 0 é verdade. === Compara o valor e o tipo em conjunto e é a opção padrão mais segura.

Assistentes de IA podem reformular uma frase desconhecida. else if Descreva a cadeia de forma clara e objetiva, sugira os valores de entrada que chegam a cada ramo e sinalize uma condição que nunca pode ser verdadeira. Sempre execute o código você mesmo, pois a explicação é uma sugestão e não uma prova.

Muitas vezes sim. Copiloto do GitHub Completa o código de ramificação a partir de um comentário ou de uma condição parcial. Verifique os valores limite que ele escolhe, já que um valor gerado é gerado. > onde você precisava >= É fácil passar despercebido.

Não há limite de idiomas. Qualquer declaração pode aparecer dentro de uma ramificação, incluindo uma declaração adicional. ifA partir de dois níveis, a lógica fica difícil de acompanhar, portanto, combine os testes com && ou retorne mais cedo.

Não. Sem chaves, o bloco de código contém apenas a próxima instrução, e é por isso que os exemplos acima funcionam. Ainda assim, recomenda-se adicionar chaves, pois uma segunda linha adicionada posteriormente fica silenciosamente fora do bloco.

&& Isso só é verdade quando ambos os lados são a favor da verdade, e || É verdade quando qualquer um dos lados está correto. Ambos entram em curto-circuito: o lado direito nunca é avaliado depois que o resultado já foi decidido.

getHours() Retorna a hora atual do relógio do visitante como um número de 0 a 23, portanto, a comparação com o número 12 divide o dia em manhã e tarde sem qualquer análise adicional.

Não. JavaO script utiliza duas palavras-chave distintas. else if, com um espaço entre elas. A palavra única elseif Pertence ao PHP e a algumas linguagens de modelo e gera um erro de sintaxe no navegador.

Resuma esta postagem com: