Operadores aritméticos e de comparação

As operações

const a = 10;
const b = 3;

console.log(a + b); // → 13
console.log(a - b); // → 7
console.log(a * b); // → 30
console.log(a / b); // → 3.3333333333333335
console.log(a % b); // → 1   (o resto)
console.log(a ** b); // → 1000 (potência)

O resto, que é mais útil do que parece

// Par ou ímpar
console.log(10 % 2 === 0); // → true, é par
console.log(7 % 2 === 0); // → false, é ímpar

// A cada quantos itens quebrar a linha
const posicao = 6;
console.log(posicao % 3 === 0); // → true, é a terceira da fila

// Converter minutos em horas e minutos
const minutos = 145;
const horas = Math.floor(minutos / 60); // → 2
const resto = minutos % 60; // → 25
console.log(`${horas}h${resto}min`); // → 2h25min

Atalhos

let total = 100;

total += 50; // total = total + 50  → 150
total -= 30; // → 120
total *= 2; // → 240
total /= 4; // → 60

let contador = 0;
contador++; // → 1
contador--; // → 0

O + que às vezes soma e às vezes junta

console.log(5 + 3); // → 8
console.log("5" + 3); // → "53"   ← concatenou
console.log("Farinha" + " " + "d'água"); // → "Farinha d'água"

Com texto de um lado, o + vira concatenação. E isso importa muito, porque o valor de um campo de formulário é sempre texto; mesmo com type="number":

const quantidade = document.getElementById("quantidade").value; // "3"
const preco = 12.5;

console.log(quantidade + preco); // → "312.5"  ← errado
console.log(Number(quantidade) + preco); // → 15.5   ← certo

Converter

Number("42"); // → 42
Number("12.5"); // → 12.5
Number("abc"); // → NaN
Number(""); // → 0     ← atenção

parseInt("42kg"); // → 42
parseFloat("12.5kg"); // → 12.5

String(42); // → "42"
(42).toFixed(2); // → "42.00"

NaN quer dizer "Not a Number": o resultado de uma conversão que não deu certo. Ele contamina toda conta seguinte, e é o motivo de um total aparecer como NaN na tela.

const valor = Number("abc"); // NaN
console.log(valor + 10); // → NaN
console.log(Number.isNaN(valor)); // → true, é assim que se testa

Comparação

console.log(10 > 5); // → true
console.log(10 < 5); // → false
console.log(10 >= 10); // → true
console.log(10 <= 9); // → false

=== e nunca ==

console.log(5 === 5); // → true
console.log("5" === 5); // → false, tipos diferentes
console.log("5" == 5); // → true,  converteu antes de comparar

console.log(0 == false); // → true    ← perigoso
console.log("" == false); // → true    ← perigoso
console.log(null == undefined); // → true

O == converte os tipos antes de comparar, e as regras dessa conversão são cheias de surpresa. Numa validação de formulário, 0 == false sendo verdadeiro significa que um campo preenchido com zero pode ser tratado como vazio.

Math

Math.round(4.6); // → 5
Math.floor(4.9); // → 4   (para baixo)
Math.ceil(4.1); // → 5   (para cima)
Math.abs(-7); // → 7
Math.max(3, 9, 2); // → 9
Math.min(3, 9, 2); // → 2
Math.random(); // → um número entre 0 e 1

Um cálculo de frete

const pesoEmKg = 8.3;
const precoPorKgEmCentavos = 350;
const taxaFixaEmCentavos = 500;

// Frete cobra por quilo arredondado para cima
const quilosCobrados = Math.ceil(pesoEmKg); // → 9
const freteEmCentavos = quilosCobrados * precoPorKgEmCentavos + taxaFixaEmCentavos;

const frete = (freteEmCentavos / 100).toLocaleString("pt-BR", {
  style: "currency",
  currency: "BRL",
});

console.log(`Frete para ${pesoEmKg} kg: ${frete}`); // → Frete para 8.3 kg: R$ 36,50

Exercícios

1. Calcule o total de uma compra na feira com três itens.
2. Descubra se um número é par usando %.
3. Converta 200 minutos em horas e minutos.
4. Some "5" + 3 e depois Number("5") + 3. Explique a diferença.
5. Compare "10" == 10 e "10" === 10 no console.
6. Escreva o cálculo de frete: R$ 3,50 por quilo arredondado para cima, mais R$ 5,00 fixos.

Referências

• Operadores - MDN - a lista completa
• Igualdade - MDN - as regras de == e por que evitá-lo
• Math - MDN - todos os métodos