<h2>Estruturas Condicionais: A Base da Lógica em JavaScript</h2>
<p>As estruturas de controle são o coração de qualquer programa. Elas permitem que seu código tome decisões baseadas em condições, executando diferentes blocos de código conforme necessário. Em JavaScript, as duas principais ferramentas para isso são <code>if/else</code> e <code>switch</code>, cada uma com seu propósito específico. Dominar essas estruturas é fundamental para escrever código limpo, eficiente e fácil de manter.</p>
<h3>O Statement if/else e Seus Variantes</h3>
<p>O <code>if</code> é a estrutura mais básica e versátil. Ele avalia uma condição booleana e executa um bloco de código se ela for verdadeira. O <code>else</code> oferece uma alternativa quando a condição é falsa, e o <code>else if</code> permite encadear múltiplas condições.</p>
<pre><code class="language-javascript">const idade = 18;
if (idade < 13) {
console.log("Você é uma criança");
} else if (idade < 18) {
console.log("Você é um adolescente");
} else if (idade < 60) {
console.log("Você é um adulto");
} else {
console.log("Você é um idoso");
}</code></pre>
<p>Um erro comum é usar <code>=</code> (atribuição) em vez de <code>==</code> ou <code>===</code> (comparação). Sempre prefira <code>===</code> para evitar coerção de tipo involuntária. Também evite ifs aninhados excessivamente — isso prejudica a legibilidade. Quando tem mais de 2-3 níveis, considere usar <code>switch</code> ou refatorar a lógica.</p>
<h3>O Operador Ternário: if/else Compacto</h3>
<p>Para condições simples, o operador ternário oferece uma sintaxe mais concisa:</p>
<pre><code class="language-javascript">const status = idade >= 18 ? "maior de idade" : "menor de idade";
console.log(status);</code></pre>
<p>É perfeito para atribuições rápidas, mas não abuse — código ilegível prejudica manutenção. Evite ternários aninhados sem quebras de linha.</p>
<h2>Switch: Controle para Múltiplas Opções</h2>
<p>O <code>switch</code> é ideal quando você precisa comparar uma única variável contra múltiplos valores específicos. É mais legível que múltiplos <code>else if</code> e geralmente mais eficiente. A sintaxe usa <code>case</code> para cada valor e <code>break</code> para sair do bloco. Sem <code>break</code>, o código continua executando para o próximo <code>case</code> — comportamento chamado "fall-through".</p>
<pre><code class="language-javascript">const diaSemana = 3;
let nomeDia;
switch (diaSemana) {
case 1:
nomeDia = "Segunda";
break;
case 2:
nomeDia = "Terça";
break;
case 3:
nomeDia = "Quarta";
break;
case 4:
nomeDia = "Quinta";
break;
case 5:
nomeDia = "Sexta";
break;
case 6:
case 7:
nomeDia = "Fim de semana";
break;
default:
nomeDia = "Dia inválido";
}
console.log(nomeDia); // "Quarta"</code></pre>
<p>Observe que os casos 6 e 7 compartilham o mesmo bloco — isso é proposital. Use <code>default</code> como um fallback para valores não esperados. O <code>switch</code> funciona com comparação estrita (<code>===</code>), então tipos importam.</p>
<h2>Tratamento Avançado de Fluxo e Boas Práticas</h2>
<h3>Combinando Estruturas e Otimizando Lógica</h3>
<p>Em cenários complexos, você pode combinar <code>if</code>, <code>switch</code> e operadores lógicos (<code>&&</code>, <code>||</code>, <code>!</code>) para criar fluxos sofisticados. A chave é manter o código legível.</p>
<pre><code class="language-javascript">function procesarPedido(usuario, tipoProduto, quantidade) {
// Validação com múltiplas condições
if (!usuario || !usuario.ativo) {
return "Usuário inválido";
}
if (quantidade <= 0 || quantidade > 1000) {
return "Quantidade fora do intervalo permitido";
}
let desconto = 0;
let preco = 100;
// Switch para lógica específica do produto
switch (tipoProduto) {
case "digital":
desconto = 0.05;
break;
case "fisico":
desconto = usuario.premium ? 0.15 : 0.05;
break;
case "servico":
desconto = 0.1;
break;
default:
return "Tipo de produto desconhecido";
}
const total = preco quantidade (1 - desconto);
return Pedido confirmado: R$ ${total.toFixed(2)};
}
console.log(procesarPedido({ ativo: true, premium: true }, "fisico", 5));</code></pre>
<h3>Guard Clauses: Reduzindo Aninhamento</h3>
<p>Guard clauses são retornos antecipados que eliminam condições aninhadas, melhorando bastante a legibilidade:</p>
<pre><code class="language-javascript">function validarLogin(email, senha) {
// Guard clauses
if (!email) return "Email obrigatório";
if (!senha) return "Senha obrigatória";
if (email.length < 5) return "Email inválido";
if (senha.length < 8) return "Senha muito fraca";
// Lógica principal
return "Login bem-sucedido";
}</code></pre>
<h3>Expressões de Curto-Circuito</h3>
<p>Os operadores <code>&&</code> e <code>||</code> avaliam expressões até encontrar um resultado definido. Usar isso conscientemente pode simplificar código:</p>
<pre><code class="language-javascript">const usuario = { nome: "João", perfil: null };
// && para executar código apenas se condição for verdadeira
usuario.perfil && console.log("Tem perfil");
// | | para atribuir valor padrão const nomePerfil = usuario.perfil || "Usuário comum";
console.log(nomePerfil); // "Usuário comum"</code></pre>
<p>Embora úteis, não abuse — o operador nullish coalescing (<code>??</code>) é mais seguro para valores padrão, pois ignora apenas <code>null</code> e <code>undefined</code>.</p>
<h2>Conclusão</h2>
<p>As estruturas de controle <code>if/else</code> e <code>switch</code> são ferramentas fundamentais em JavaScript. Use <code>if</code> para lógica condicional geral e <code>switch</code> para comparações contra múltiplos valores específicos. Sempre prefira <code>===</code> para comparações, evite aninhamento excessivo com guard clauses, e mantenha seu código legível acima de tudo. Dominar essas estruturas e suas variantes avançadas, como operadores ternários e short-circuit evaluation, elevará significativamente a qualidade do seu código.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else" target="_blank" rel="noopener noreferrer">MDN Web Docs - if...else Statement</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch" target="_blank" rel="noopener noreferrer">MDN Web Docs - switch Statement</a></li>
<li><a href="https://javascript.info/logical-operators" target="_blank" rel="noopener noreferrer">JavaScript.info - Logical operators</a></li>
<li><a href="https://eloquentjavascript.net/02_program_structure.html" target="_blank" rel="noopener noreferrer">Eloquent JavaScript - Control Flow</a></li>
<li><a href="https://github.com/getify/You-Dont-Know-JS" target="_blank" rel="noopener noreferrer">You Don't Know JS Yet - Types & Grammar</a></li>
</ul>