<h2>Operadores Aritméticos: Os Pilares das Contas</h2>
<p>Os operadores aritméticos são fundamentais em qualquer linguagem de programação. JavaScript oferece os operadores clássicos: adição (<code>+</code>), subtração (<code>-</code>), multiplicação (<code><em></code>), divisão (<code>/</code>), módulo (<code>%</code>) e exponenciação (<code></em>*</code>). O módulo retorna o resto de uma divisão, enquanto a exponenciação eleva um número a uma potência.</p>
<pre><code class="language-javascript">let a = 10, b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1 (resto da divisão)
console.log(a ** b); // 1000 (10 elevado a 3)
// Incremento e decremento
let x = 5;
console.log(++x); // 6 (pré-incremento)
console.log(x++); // 6 (pós-incremento, retorna antes de somar)
console.log(x); // 7</code></pre>
<p>Um detalhe importante: o operador <code>+</code> também concatena strings. Se um dos operandos for uma string, JavaScript converte o outro para string automaticamente. Cuidado com essa coerção de tipos — é fonte comum de bugs.</p>
<h2>Operadores Lógicos: Controlando o Fluxo</h2>
<p>Os operadores lógicos (<code>&&</code>, <code>||</code>, <code>!</code>) permitem criar condições complexas e são essenciais para qualquer controle de fluxo. O <code>&&</code> (E) retorna verdadeiro apenas se ambos os operandos forem verdadeiros, o <code>||</code> (OU) retorna verdadeiro se pelo menos um for verdadeiro, e <code>!</code> (NÃO) inverte o valor booleano.</p>
<pre><code class="language-javascript">let idade = 25;
let temCarteira = true;
// Operador AND (&&)
if (idade >= 18 && temCarteira) {
console.log("Pode dirigir"); // Executado
}
// Operador OR (||)
let temTransporte = false;
let temDinheiro = true;
if (temTransporte || temDinheiro) {
console.log("Consegue ir para o trabalho"); // Executado
}
// Operador NOT (!)
let chovendo = true;
if (!chovendo) {
console.log("Dia bonito");
} else {
console.log("Dia nublado"); // Executado
}
// Short-circuit evaluation
let usuario = null;
let nome = usuario && usuario.nome; // nome = null
console.log(nome);
let config = {} || { tema: "claro" };
console.log(config); // { tema: "claro" }</code></pre>
<p>Um comportamento crucial é o <strong>short-circuit evaluation</strong>: quando JavaScript avalia <code>a && b</code>, se <code>a</code> for falso, não avalia <code>b</code>. Isso é poderoso para evitar erros e otimizar código, mas pode ser confuso para iniciantes.</p>
<h2>Operador Ternário: Condicional em Uma Linha</h2>
<p>O operador ternário (<code>? :</code>) é uma forma compacta de escrever um if-else. Sua sintaxe é <code>condicao ? valorSeVerdadeiro : valorSeFalso</code>. Embora elegante, não abuse — código legível é melhor que código "esperto".</p>
<pre><code class="language-javascript">let pontuacao = 85;
let resultado = pontuacao >= 60 ? "Aprovado" : "Reprovado";
console.log(resultado); // Aprovado
// Ternário aninhado (use com cuidado!)
let nota = 75;
let conceito = nota >= 90 ? "A" : nota >= 80 ? "B" : nota >= 70 ? "C" : "D";
console.log(conceito); // C
// Combinando com operadores lógicos
let usuario = { nome: "João", admin: false };
let mensagem = usuario.admin ? "Acesso total" : "Acesso limitado";
console.log(mensagem); // Acesso limitado
// Prático: validação com ternário
let email = "";
let status = email ? "Email válido" : "Email obrigatório";
console.log(status); // Email obrigatório</code></pre>
<p>O ternário é excelente para atribuições simples e retornos. Quando a lógica fica complexa, prefira um if-else tradicional — sua equipe agradecerá.</p>
<h2>Operador Nullish Coalescing: Tratando null e undefined</h2>
<p>O operador nullish coalescing (<code>??</code>), introduzido em 2020, retorna o operando da direita quando o da esquerda é <code>null</code> ou <code>undefined</code>. Isso é diferente do <code> | | </code>, que considera qualquer valor "falsy" (0, "", false, NaN).</p> <pre><code class="language-javascript">// ?? vs || — a grande diferença
let numero = 0;
console.log(numero || 10); // 10 (0 é falsy)
console.log(numero ?? 10); // 0 (0 não é null/undefined)
let nome = undefined;
console.log(nome || "Anônimo"); // Anônimo
console.log(nome ?? "Anônimo"); // Anônimo (ambos funcionam aqui)
// Caso prático: parâmetros com valores padrão
function criarUsuario(nome, tema) {
return {
nome: nome ?? "Usuário Padrão",
tema: tema ?? "claro"
};
}
console.log(criarUsuario("Maria", null));
// { nome: "Maria", tema: "claro" }
console.log(criarUsuario(null, "escuro"));
// { nome: "Usuário Padrão", tema: "escuro" }
// Encadeamento opcional (optional chaining) com ??
let dados = {};
let telefone = dados.usuario?.telefone ?? "Não informado";
console.log(telefone); // Não informado</code></pre>
<p>Use <code>??</code> quando precisar distinguir entre "sem valor" (null/undefined) e "valor falso" (como 0 ou string vazia). Use <code>||</code> apenas quando qualquer falsy for equivalente a "valor padrão".</p>
<h2>Conclusão</h2>
<p>Aprendemos que <strong>operadores aritméticos</strong> realizam cálculos e incrementos; <strong>operadores lógicos</strong> controlam fluxo com avaliação de curto-circuito; <strong>ternário</strong> é açúcar sintático elegante para condições simples; e <strong>nullish coalescing</strong> diferencia entre "sem valor" e "valor falso". Domine essas ferramentas e você escreverá código mais limpo, eficiente e seguro. A prática com exemplos reais é fundamental — não apenas decore, mas entenda quando e por que usar cada operador.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators#operadores_aritméticos" target="_blank" rel="noopener noreferrer">MDN Web Docs - Operadores Aritméticos</a></li>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators#operadores_lógicos" target="_blank" rel="noopener noreferrer">MDN Web Docs - Operadores Lógicos</a></li>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" target="_blank" rel="noopener noreferrer">MDN Web Docs - Operador Condicional (Ternário)</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing" target="_blank" rel="noopener noreferrer">MDN Web Docs - Nullish Coalescing Operator</a></li>
<li><a href="https://javascript.info/operators" target="_blank" rel="noopener noreferrer">JavaScript.info - Operadores</a></li>
</ul>