Operadores em JavaScript
Operadores são símbolos que dizem ao JavaScript qual operação realizar. Você usa + para adição todos os dias, mas os operadores do JS vão muito além da aritmética — atribuição, comparação e avaliação lógica dependem deles. Esta lição cobre os operadores mais usados de uma vez.
Operadores Aritméticos
| Operador | Significado | Exemplo |
|---|---|---|
+ |
Adição | 5 + 3 → 8 |
- |
Subtração | 5 - 3 → 2 |
* |
Multiplicação | 5 * 3 → 15 |
/ |
Divisão | 6 / 3 → 2 |
% |
Resto | 7 % 3 → 1 |
** |
Exponenciação | 2 ** 3 → 8 |
++ |
Incremento | x++ ou ++x |
-- |
Decremento | x-- ou --x |
O operador de resto % é especialmente útil — verificar par/ímpar,循环 em loops, e mais. ** é o operador de exponenciação adicionado no ES2016, equivalente a Math.pow() mas mais conciso.
A diferença entre prefixo e postfixo ++ / --: prefixo altera primeiro e depois retorna, postfixo retorna primeiro e depois altera. Não encadeie múltiplos ++ na mesma linha — o código vira um enigma ilegível.
Exemplo: Básico dos Operadores Aritméticos
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Operadores Aritméticos</title>
</head>
<body>
<h3>Demonstração de Operadores Aritméticos</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var a = 17, b = 5;
var lines = [];
lines.push('a = ' + a + ', b = ' + b);
lines.push('a + b = ' + (a + b));
lines.push('a - b = ' + (a - b));
lines.push('a * b = ' + (a * b));
lines.push('a / b = ' + (a / b));
lines.push('a % b = ' + (a % b));
lines.push('a b = ' + (a b));
var x = 10;
lines.push('');
lines.push('x = 10');
lines.push('x++ = ' + (x++) + ' (postfixo: retorna valor antigo, x vira ' + x + ')');
lines.push('++x = ' + (++x) + ' (prefixo: altera primeiro, x vira ' + x + ')');
out.textContent = lines.join('\n');
</script>
</body>
</html>
Operadores de Atribuição
= é atribuição, não "igual" no sentido matemático. Esta é uma das armadilhas mais comuns para iniciantes — if (x = 5) não lança um erro; atribui 5 a x e retorna 5 (truthy), então a condição é sempre verdadeira.
Atribuição composta é um atalho:
| Atalho | Equivalente |
|---|---|
x += 5 |
x = x + 5 |
x -= 3 |
x = x - 3 |
x *= 2 |
x = x * 2 |
x /= 4 |
x = x / 4 |
x %= 3 |
x = x % 3 |
Exemplo: Operadores de Atribuição
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Operadores de Atribuição</title>
</head>
<body>
<h3>Demonstração de Operadores de Atribuição</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
var score = 80;
lines.push('Nota inicial = ' + score);
score += 10;
lines.push('score += 10 → ' + score);
score -= 25;
lines.push('score -= 25 → ' + score);
score *= 2;
lines.push('score *= 2 → ' + score);
score /= 3;
lines.push('score /= 3 → ' + score.toFixed(1));
score %= 30;
lines.push('score %= 30 → ' + score.toFixed(1));
out.textContent = lines.join('\n');
</script>
</body>
</html>
Operadores de Comparação
| Operador | Significado |
|---|---|
== |
Igualdade frouxa (realiza coerção de tipo) |
=== |
Igualdade estrita (sem coerção de tipo) |
!= |
Desigualdade frouxa |
!== |
Desigualdade estrita |
> |
Maior que |
< |
Menor que |
>= |
Maior ou igual |
<= |
Menor ou igual |
⚠️ A armadilha == vs ===: Esta é a armadilha mais clássica do JavaScript, sem exceção. == realiza coerção de tipo silenciosamente — "5" == 5 é true! Enquanto === exige que tipo e valor coincidam — "5" === 5 é false. Sempre use === a menos que você precise especificamente de coerção de tipo. Da mesma forma, use !== em vez de !=.
Exemplo: A Armadilha == vs ===
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>== vs ===</title>
</head>
<body>
<h3>Igualdade Frouxa vs Igualdade Estrita</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
lines.push('"5" == 5 → ' + ("5" == 5));
lines.push('"5" === 5 → ' + ("5" === 5));
lines.push('');
lines.push('0 == false → ' + (0 == false));
lines.push('0 === false → ' + (0 === false));
lines.push('');
lines.push('"" == false → ' + ("" == false));
lines.push('"" === false → ' + ("" === false));
lines.push('');
lines.push('null == undefined → ' + (null == undefined));
lines.push('null === undefined → ' + (null === undefined));
lines.push('');
lines.push('5 != "5" → ' + (5 != "5"));
lines.push('5 !== "5" → ' + (5 !== "5"));
out.textContent = lines.join('\n');
</script>
</body>
</html>
Viu? 0 == false e "" == false são ambos true — completamente contra-intuitivo. É como comparar maçãs e laranjas: == diz "ambos são frutas, suficientemente próximos"; === diz "não são iguais, ponto final." Fique com === e você evitará metade dos seus bugs.
Operadores Lógicos
| Operador | Significado | Descrição |
|---|---|---|
&& |
E | Verdadeiro apenas quando ambos os lados são truthy |
|| |
OU | Verdadeiro quando qualquer lado é truthy |
! |
NÃO | Nega o valor |
&& e || têm um recurso útil chamado avaliação de curto-circuito: && para no primeiro valor falsy, || para no primeiro valor truthy — o resto nunca é avaliado. Isso é comumente usado para atribuições condicionais concisas:
<script>
var nome = entradaUsuario || 'Anônimo';
</script>
Exemplo: Operadores Lógicos e Avaliação de Curto-Circuito
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Operadores Lógicos</title>
</head>
<body>
<h3>Demonstração de Operadores Lógicos</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
var age = 20;
var hasTicket = true;
lines.push('idade = ' + age + ', temIngresso = ' + hasTicket);
lines.push('idade >= 18 && temIngresso → ' + (age >= 18 && hasTicket));
lines.push('idade >= 18 || temIngresso → ' + (age >= 18 || hasTicket));
lines.push('!temIngresso → ' + (!hasTicket));
lines.push('');
lines.push('--- Avaliação de Curto-Circuito ---');
lines.push('1 && "olá" → ' + (1 && "olá"));
lines.push('0 && "olá" → ' + (0 && "olá"));
lines.push('1 || "olá" → ' + (1 || "olá"));
lines.push('0 || "olá" → ' + (0 || "olá"));
lines.push('');
var username = '';
var displayName = username || 'Convidado';
lines.push('String vazia || "Convidado" → ' + displayName);
out.textContent = lines.join('\n');
</script>
</body>
</html>
O Operador + com Strings
Quando + encontra uma string, ele vira um operador de concatenação: desde que um lado seja string, o outro lado é convertido para string e ambos são unidos.
<script>
"Olá" + " " + "Mundo" // "Olá Mundo"
"Número: " + 42 // "Número: 42"
3 + 4 + "px" // "7px" (3+4=7 primeiro, depois concatenado)
"px" + 3 + 4 // "px34" (esquerda para direita: "px"+3="px3", depois +4)
</script>
Aquele "px" + 3 + 4 dando "px34" em vez de "px7" é uma armadilha clássica de entrevista — + avalia da esquerda para a direita, e uma vez que o lado esquerdo é string, tudo depois vira concatenação.
Visão Geral do Operador Ternário
O operador ternário é um atalho para if...else, com a sintaxe: condição ? valor1 : valor2.
<script>
var status = idade >= 18 ? 'Adulto' : 'Menor';
</script>
Se a condição for truthy, retorna valor1; caso contrário, valor2. Condições simples funcionam elegantemente com o operador ternário, mas não os aninhe — a ? b ? c : d : e é uma receita para confusão. O uso detalhado é coberto na Lição 10.
Precedência de Operadores
JavaScript determina a ordem de avaliação com base na precedência, seguindo as mesmas regras que você aprendeu na aula de matemática: multiplicação e divisão antes de adição e subtração, parênteses primeiro.
<script>
2 + 3 * 4 // 14, não 20
(2 + 3) * 4 // 20
</script>
Precedência comum da mais alta para a mais baixa: () → ! → ** → * / % → + - → > < >= <= → == === != !== → && → || → ?: → =.
Quando em dúvida, adicione parênteses. Parênteses são grátis, mas bugs são caros.
📖 Resumo
- Operadores aritméticos cuidam de cálculos numéricos;
%(resto) e**(exponenciação) são comumente usados na prática - Operadores de atribuição composta (
+=,-=, etc.) tornam o código mais conciso - Sempre prefira
===e!==para comparações para evitar bugs da coerção implícita de== - Operadores lógicos
&&e||suportam avaliação de curto-circuito, útil para atribuição de valores padrão +vira um operador de concatenação quando encontra uma string — cuidado com a ordem de avaliação da esquerda para a direita- Quando em dúvida sobre precedência, adicione parênteses — legibilidade importa muito mais que economizar alguns caracteres
❓ Perguntas Frequentes
P：Por que
"1" + 2 + 3dá"123"em vez de"15"? R：+avalia da esquerda para a direita."1" + 2produz a string"12", depois"12" + 3dá"123". Para somar os números primeiro, use parênteses:"1" + (2 + 3)dá"15".
P：Por que
0 == falseé true? R：==realiza coerção de tipo antes de comparar. Tanto0quantofalsesão convertidos para o número0, então são iguais. É por isso que===é recomendado — ele não coerção, então0 === falseéfalse.
P：Qual a diferença entre
x++e++x? R：Quando usados sozinhos, ambos incrementam x em 1. A diferença está no valor de retorno da expressão:x++retorna o valor antigo antes do incremento,++xretorna o novo valor após o incremento. Por exemplo,var a = 5; var b = a++;dá a=6, b=5; enquantovar a = 5; var b = ++a;dá a=6, b=6.
📝 Atividades
- Escreva um programa que recebe um número de três dígitos (ex: 371) e extrai seus dígitos de centena, dezena e unidade usando
%e/, depois imprima-os. - Sem usar
if...else, escreva uma única linha usando o operador ternário para determinar se uma variável de anoyearé um ano bissexto, e atribua o resultado aisLeap(dica: divisível por 4 e não por 100, ou divisível por 400). - Preveja os resultados das seguintes expressões, depois verifique no console do navegador:
[] == false,[] == ![],null == 0. Explique por quê — se não conseguir, significa que você precisa revisar as regras de coerção implícita de==, e então abrace firmemente o===.