{"id":840,"date":"2024-05-05T16:52:22","date_gmt":"2024-05-05T19:52:22","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=840"},"modified":"2025-11-13T11:32:17","modified_gmt":"2025-11-13T14:32:17","slug":"condicionais-no-javascript","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/condicionais-no-javascript\/","title":{"rendered":"Condicionais no Javascript"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Condicionais no Javascript<\/strong>: Em qualquer programa, precisamos que o c\u00f3digo tome decis\u00f5es. As Estruturas Condicionais<\/strong> em JavaScript (como if<\/code>, else<\/code>, e switch<\/code>) permitem que voc\u00ea execute diferentes blocos de c\u00f3digo dependendo se uma express\u00e3o Booleana<\/strong> \u00e9 avaliada como true<\/code> ou false<\/code>.<\/p>\n\n\n\n

Dominar as condicionais \u00e9 a chave para construir aplica\u00e7\u00f5es din\u00e2micas e interativas.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. A Estrutura if<\/code>, else<\/code> e else if<\/code><\/h2>\n\n\n\n

Esta \u00e9 a forma mais comum e flex\u00edvel de controle de fluxo, permitindo avaliar uma ou v\u00e1rias condi\u00e7\u00f5es em sequ\u00eancia.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. if<\/code> (Se)<\/h3>\n\n\n\n

Executa um bloco de c\u00f3digo apenas se a condi\u00e7\u00e3o for verdadeira.<\/p>\n\n\n\n

JavaScript<\/p>\n\n\n\n

let idade = 17;\n\nif (idade >= 18) {\n  console.log(\"Acesso liberado.\"); \/\/ Esta linha \u00e9 ignorada\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. if...else<\/code> (Se…Sen\u00e3o)<\/h3>\n\n\n\n
Garante que um dos dois blocos de c\u00f3digo ser\u00e1 executado.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
let numero = 5;\n\nif (numero % 2 === 0) {\n  console.log(\"O n\u00famero \u00e9 par.\");\n} else {\n  \/\/ Executado se o 'if' for falso\n  console.log(\"O n\u00famero \u00e9 \u00edmpar.\");\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
C. else if<\/code> (Sen\u00e3o, se…)<\/h3>\n\n\n\n
Permite testar m\u00faltiplas condi\u00e7\u00f5es. O JavaScript testa cada condi\u00e7\u00e3o em ordem<\/strong> e executa o bloco do primeiro<\/strong> if<\/code> ou else if<\/code> que retornar true<\/code>, ignorando o restante.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
let nota = 8.5;\n\nif (nota >= 9) {\n  console.log(\"Aprovado com Excel\u00eancia.\");\n} else if (nota >= 7) { \/\/ Apenas se o primeiro 'if' foi falso\n  console.log(\"Aprovado.\");\n} else {\n  console.log(\"Reprovado.\");\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Estrutura switch<\/code><\/h2>\n\n\n\n
A estrutura switch<\/code> \u00e9 ideal quando voc\u00ea precisa comparar uma \u00fanica vari\u00e1vel\/express\u00e3o<\/strong> contra m\u00faltiplos valores fixos<\/strong> (casos). \u00c9 mais limpa que usar longas cadeias de else if<\/code> para o mesmo valor.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
let diaDaSemana = 6; \/\/ 1 (Segunda) a 7 (Domingo)\n\nswitch (diaDaSemana) {\n  case 6: \/\/ Se diaDaSemana === 6\n  case 7: \/\/ OU se diaDaSemana === 7\n    console.log(\"Final de semana.\");\n    break; \/\/ Essencial! Interrompe a execu\u00e7\u00e3o\n  default:\n    console.log(\"Dia \u00fatil.\");\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\n
Aten\u00e7\u00e3o ao break<\/code>:<\/strong> Sem o comando break<\/code><\/strong>, a execu\u00e7\u00e3o continua para o pr\u00f3ximo case<\/code> ap\u00f3s encontrar uma correspond\u00eancia (fall-through<\/em>), o que geralmente n\u00e3o \u00e9 o comportamento desejado.<\/p>\n<\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
3. O Operador Tern\u00e1rio (? :<\/code>)<\/h2>\n\n\n\n
O Operador Tern\u00e1rio<\/strong> \u00e9 uma forma concisa de escrever uma condicional if...else<\/code> em uma \u00fanica linha, e, o mais importante, \u00e9 uma Express\u00e3o<\/strong> (retorna um valor).<\/p>\n\n\n\n
Operador Tern\u00e1rio<\/strong><\/td>Estrutura Equivalente<\/strong><\/td><\/tr><\/thead>
condi\u00e7\u00e3o ? valorSeVerdadeiro : valorSeFalso<\/code><\/td>if (condi\u00e7\u00e3o) { return valorSeVerdadeiro; } else { return valorSeFalso; }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
O Tern\u00e1rio deve ser usado quando voc\u00ea precisa atribuir um valor<\/strong> a uma vari\u00e1vel com base em uma condi\u00e7\u00e3o.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
let idade = 20;\n\n\/\/ O valor retornado \u00e9 'Maior de idade' ou 'Menor de idade'\nlet status = idade >= 18 ? \"Maior de idade\" : \"Menor de idade\"; \n\nconsole.log(status); \/\/ Sa\u00edda: \"Maior de idade\"\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u2728 Boas Pr\u00e1ticas em Condicionais<\/h2>\n\n\n\n