Operadores lógicos e o ternário

E, ou, não

const idade = 15;
const temAutorizacao = true;

console.log(idade >= 14 && temAutorizacao); // → true  (os dois)
console.log(idade >= 18 || temAutorizacao); // → true  (pelo menos um)
console.log(!temAutorizacao); // → false (o inverso)

Operador	Nome	Verdadeiro quando
&&	e	os dois lados são
||	ou	pelo menos um lado é
!	não	o valor é falso

Valores falsy

Em contexto de condição, alguns valores contam como falso mesmo não sendo false. São exatamente seis:

false;
0;
""; // texto vazio
null;
undefined;
NaN;

Todo o resto é truthy; inclusive coisas que enganam:

"0"; // truthy: é um texto, e não vazio
"false"; // truthy: idem
[]; // truthy: lista vazia é um objeto
{}; // truthy: objeto vazio também

Avaliação curta

Os operadores param assim que a resposta está decidida:

// Se o primeiro for falso, nem olha o segundo
const nome = usuario && usuario.nome;

// Se o primeiro for truthy, nem olha o segundo
const exibicao = apelido || "Visitante";

O segundo padrão, valor padrão com ||, é comum e tem uma armadilha:

const desconto = 0;
const aplicado = desconto || 10; // → 10  ← errado!

Zero é falsy, então o desconto real de 0% foi substituído pelo padrão.

??, que resolve isso

const desconto = 0;
const aplicado = desconto ?? 10; // → 0   ← certo

?? só substitui quando o valor é null ou undefined. Zero, texto vazio e false passam.

const quantidade = 0;
console.log(quantidade || 1); // → 1  (trocou o zero)
console.log(quantidade ?? 1); // → 0  (preservou)

?., para o que pode não existir

const inscricao = {
  aluno: { nome: "Ana" },
};

console.log(inscricao.responsavel.nome); // TypeError!
console.log(inscricao.responsavel?.nome); // → undefined
console.log(inscricao.responsavel?.nome ?? "Não informado"); // → "Não informado"

Se o valor à esquerda for null ou undefined, a expressão inteira para e devolve undefined: em vez de estourar.

Serve também para métodos e para elementos da página:

elemento?.focus(); // só chama se o elemento existir
lista?.[0]; // só acessa se a lista existir

Numa página, é o antídoto para o erro mais comum de todos:

// Estoura se o id não existir
document.getElementById("total").textContent = "R$ 10,00";

// Não estoura
const total = document.getElementById("total");
total?.setAttribute("data-pronto", "sim");

O ternário

const idade = 20;
const situacao = idade >= 18 ? "maior" : "menor";

Lê-se: condição ? valor se verdadeiro : valor se falso.

const vagas = 3;
const aviso = vagas === 1 ? "Última vaga" : `${vagas} vagas`;

const total = 3750;
const frete = total >= 5000 ? 0 : 500;

Um exemplo inteiro

const inscricao = {
  aluno: { nome: "Ana", idade: 15 },
  responsavel: null,
  desconto: 0,
};

const idade = inscricao.aluno?.idade ?? 0;
const precisaAutorizacao = idade < 18;
const temResponsavel = inscricao.responsavel !== null;
const podeMatricular = !precisaAutorizacao || temResponsavel;

const desconto = inscricao.desconto ?? 10;
const nomeResponsavel = inscricao.responsavel?.nome ?? "Não informado";

console.log(`Aluno: ${inscricao.aluno.nome}, ${idade} anos`);
console.log(`Responsável: ${nomeResponsavel}`);
console.log(`Desconto: ${desconto}%`);
console.log(`Pode matricular: ${podeMatricular ? "sim" : "não"}`);

Exercícios

1. Escreva a condição "tem 14 anos ou mais e trouxe documento".
2. Teste cada um dos seis valores falsy num Boolean().
3. Compare 0 || 10 com 0 ?? 10 e explique a diferença.
4. Use ?. para ler uma propriedade de um objeto que pode ser null.
5. Escreva um ternário que mostre "Última vaga" ou "N vagas".
6. Pegue um ternário aninhado e reescreva com if.

Referências

• Operadores lógicos - MDN - &&, ||, ! e a avaliação curta
• Nullish coalescing - MDN - o ?? e quando ele ganha do ||
• Optional chaining - MDN - o ?.