Guia Completo de Operadores em JavaScript: Aritméticos, Lógicos, Ternário e Nullish Já leu

Operadores Aritméticos: Os Pilares das Contas Os operadores aritméticos são fundamentais em qualquer linguagem de programação. JavaScript oferece os operadores clássicos: adição ( ), subtração ( ), multiplicação ( / % ). O módulo retorna o resto de uma divisão, enquanto a exponenciação eleva um número a uma potência. Um detalhe importante: o operador 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. Operadores Lógicos: Controlando o Fluxo Os operadores lógicos ( , , ) permitem criar condições complexas e são essenciais para qualquer controle de fluxo. O (E) retorna verdadeiro apenas se ambos os operandos forem verdadeiros, o (OU) retorna verdadeiro se pelo menos um for verdadeiro, e (NÃO) inverte o valor booleano. Um comportamento crucial é o short-circuit evaluation: quando JavaScript avalia , se for falso, não avalia . Isso é poderoso para evitar erros e otimizar código,

Operadores Aritméticos: Os Pilares das Contas

Os operadores aritméticos são fundamentais em qualquer linguagem de programação. JavaScript oferece os operadores clássicos: adição (+), subtração (-), multiplicação (*), divisão (/), módulo (%) e exponenciação (**). O módulo retorna o resto de uma divisão, enquanto a exponenciação eleva um número a uma potência.

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

Um detalhe importante: o operador + 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.

Operadores Lógicos: Controlando o Fluxo

Os operadores lógicos (&&, ||, !) permitem criar condições complexas e são essenciais para qualquer controle de fluxo. O && (E) retorna verdadeiro apenas se ambos os operandos forem verdadeiros, o || (OU) retorna verdadeiro se pelo menos um for verdadeiro, e ! (NÃO) inverte o valor booleano.

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" }

Um comportamento crucial é o short-circuit evaluation: quando JavaScript avalia a && b, se a for falso, não avalia b. Isso é poderoso para evitar erros e otimizar código, mas pode ser confuso para iniciantes.

Operador Ternário: Condicional em Uma Linha

O operador ternário (? :) é uma forma compacta de escrever um if-else. Sua sintaxe é condicao ? valorSeVerdadeiro : valorSeFalso. Embora elegante, não abuse — código legível é melhor que código "esperto".

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

O ternário é excelente para atribuições simples e retornos. Quando a lógica fica complexa, prefira um if-else tradicional — sua equipe agradecerá.

Operador Nullish Coalescing: Tratando null e undefined

O operador nullish coalescing (??), introduzido em 2020, retorna o operando da direita quando o da esquerda é null ou undefined. Isso é diferente do ||, que considera qualquer valor "falsy" (0, "", false, NaN).

// ?? 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

Use ?? quando precisar distinguir entre "sem valor" (null/undefined) e "valor falso" (como 0 ou string vazia). Use || apenas quando qualquer falsy for equivalente a "valor padrão".

Conclusão

Aprendemos que operadores aritméticos realizam cálculos e incrementos; operadores lógicos controlam fluxo com avaliação de curto-circuito; ternário é açúcar sintático elegante para condições simples; e nullish coalescing 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.

Referências


Artigos relacionados