Lógica: &&, || e o ternário

Muitas decisões dependem de mais de uma condição ao mesmo tempo. Os operadores lógicos combinam perguntas, e o ternário deixa as decisões curtas mais elegantes.

Estudar esta lição interativa →

Nem toda decisão cabe em uma pergunta só. "Pode entrar na festa?" costuma depender de duas coisas ao mesmo tempo: ter 18 anos e ter convite. "Ganha frete grátis?" pode valer para quem é membro ou comprou acima de 100 reais. Para juntar perguntas assim, o JavaScript tem os operadores lógicos. São três, todos com símbolos que estreiam agora no curso (repare em como se digita cada um):

E

&&

Dois "e comerciais" seguidos (Shift + 7, duas vezes). Só dá true se AS DUAS condições forem verdadeiras.

OU

||

Duas barras verticais seguidas (Shift + a tecla da barra, ao lado do Shift esquerdo). Dá true se PELO MENOS UMA for verdadeira.

NÃO

!

Um ponto de exclamação antes do valor: ele inverte o booleano. !true vira false, e !false vira true.

Na prática, eles moram dentro das condições do if que você acabou de aprender:

const idade = 20;
const temIngresso = true;

// && (E): precisa que AS DUAS coisas sejam verdadeiras
if (idade >= 18 && temIngresso) {
  console.log("Pode entrar na festa");
}

// || (OU): basta UMA ser verdadeira
const ehVip = false;
if (ehVip || idade >= 18) {
  console.log("Acesso liberado");
}

// ! (NÃO): inverte o valor
console.log(!true);  // false

Todas as combinações de uma vez (A e B são duas condições; V é verdadeiro, F é falso). Repare no padrão: na coluna do E só existe um V; na do OU, só existe um F.

Para fechar o módulo, dois atalhos que você vai reencontrar em muito código por aí. O primeiro é o operador ternário, um if/else compacto que cabe em uma linha. Ele estreia mais dois símbolos, o ponto de interrogação e os dois-pontos, neste formato: condição ? valorSeSim : valorSeNão. A leitura em voz alta ajuda: "a condição vale? Então fica o primeiro valor; senão, fica o segundo". O outro atalho é usar o || para definir um valor padrão: em digitado || "Visitante", se digitado estiver vazio, entra "Visitante" no lugar. Veja os dois funcionando:

const saldo = 150;

// Atalho 1: o ternário, um if/else curtinho em 1 linha.
// condição ? valor_se_sim : valor_se_não
const status = saldo >= 0 ? "no azul" : "no vermelho";
console.log("Saldo " + status);

// Atalho 2: valor padrão com ||
const nome = "";
const exibir = nome || "Visitante"; // vazio? então entra "Visitante"
console.log(exibir);

Espere um instante: "se estiver vazio"? Um texto vazio não é true nem false, e mesmo assim o || soube o que fazer. Isso acontece porque, dentro de uma condição, o JavaScript aceita qualquer valor e trata cada um como se fosse verdadeiro ou falso. Os que contam como falso ganharam até apelido: são os valores falsy. A lista é curta, e vale conhecer de vista:

O falso original

false

Naturalmente: ele já é o próprio falso.

Zero

0

Zero é falsy (além dele, só o NaN e as raridades -0 e 0n). Qualquer outro número, inclusive negativo, conta como verdadeiro.

Texto vazio

""

Aspas sem nada dentro. Qualquer texto com conteúdo, até um espaço, conta como verdadeiro.

Os dois vazios

null, undefined

Velhos conhecidos do módulo passado: o vazio de propósito e o vazio por falta de valor.

Conta que deu errado

NaN

Estreando por aqui: sigla de "Not a Number", o resultado de uma conta sem sentido, como multiplicar um texto.

Todo o resto é truthy, ou seja, conta como verdadeiro. E é por isso que o truque do valor padrão funciona: um nome preenchido ("Ana") é truthy e passa direto pelo ||; um campo vazio ("") é falsy, então o || parte para a alternativa.

// Sua vez! Mude os valores e veja a decisão mudar.
const idade = 20;
const temConvite = false;

// Só entra quem tem 18 anos ou mais E tem convite:
if (idade >= 18 && temConvite) {
  console.log("Pode entrar");
} else {
  console.log("Não pode entrar ainda");
}

Mude os valores, rode e observe a decisão mudar.

← Voltar ao índice do curso