Expressões Condicionais - JavaScript

Expressões condicionais operam com condições - expressões que retornam um valor do tipo Booleano - true (condição verdadeira) ou false (condição falsa). Existem dois tipos de operações condicionais: operações de comparação e operações lógicas.

Operações de Comparação

Os operadores de comparação comparam dois valores e retornam verdadeiro ou falso:

• ==

  O operador de igualdade compara dois valores, e se eles são iguais, retorna true, caso contrário, retorna false: x == 5

• ===

  O operador de identidade também compara dois valores e seus tipos, e se ambos são iguais, retorna true, caso contrário, retorna false: x === 5

• !=

  Compara dois valores, e se eles não são iguais, retorna true, caso contrário, retorna false: x != 5

• !==

  Compara dois valores e seus tipos, e se eles não são iguais, retorna true, caso contrário, retorna false: x !== 5

• >

  Compara dois valores, e se o primeiro é maior que o segundo, retorna true, caso contrário, retorna false: x > 5

• <

  Compara dois valores, e se o primeiro é menor que o segundo, retorna true, caso contrário, retorna false: x < 5

• >=

  Compara dois valores, e se o primeiro é maior ou igual ao segundo, retorna true, caso contrário, retorna false: x >= 5

• <=

  Compara dois valores, e se o primeiro é menor ou igual ao segundo, retorna true caso contrário, retorna false: x < 5

Todos os operadores são bastante simples, talvez com exceção do operador de igualdade e do operador de identidade. Ambos comparam dois valores, mas o operador de identidade também leva em conta o tipo do valor. Por exemplo:

const income = 100;
const strIncome = "100";
const result = income == strIncome;
console.log(result); // true

Os operadores de desigualdade != e !== funcionam de maneira similar.

Operações Lógicas

As operações lógicas geralmente são aplicadas a valores do tipo Booleano - true e false. O resultado das operações lógicas também é normalmente um valor Booleano - true ou false. Esse tipo de operação é frequentemente usado para verificar condições. No JavaScript, existem as seguintes operações lógicas:

Lógico E (AND)

A operação && retorna true se ambos os operandos forem true, caso contrário, retorna false:

console.log(true && true);  // true
console.log(true && false); // false
console.log(false && false); // false

Esse tipo de operação é comum quando é necessário verificar a verdade de duas condições, e ambas devem ser verdadeiras:

const money = 1000;
const age = 21;
// verifica se age é maior que 18 e money é maior que 100
const access1 = age > 18 && money > 100;
console.log(access1); // true
  
// verifica se age é maior que 18 e money é maior que 1000
const access2 = age > 18 && money > 1000;
console.log(access2); // false

Neste caso, a constante access1 será true se, ao mesmo tempo, age for maior que 18 e money for maior que 100. Ou seja, se a pessoa tem mais de 18 anos e mais de 100 unidades monetárias, então o acesso é concedido. Aqui, ambas as condições são verdadeiras, então access1 é true.

Por outro lado, a constante access2 será true se, ao mesmo tempo, age for maior que 18 e money for maior que 1000. Neste caso, a segunda condição não é atendida, ela é falsa, portanto access2 é false.

Lógico OU (OR)

A operação || retorna true se pelo menos um dos operandos for true; caso contrário, retorna false:

console.log(true || true);  // true
console.log(true || false); // true
console.log(false || false); // false

Esta operação é frequentemente usada para verificar duas condições, quando é suficiente que apenas uma das condições seja verdadeira, por exemplo:

const money = 1000;
const age = 21;
// verifica se age é maior que 18 ou money é maior que 1000
const access1 = age > 18 || money > 1000;
console.log(access1); // true
  
// verifica se age é maior que 22 ou money é maior que 1000
const access2 = age > 22 || money > 1000;
console.log(access2); // false

Neste caso, a constante access1 será verdadeira se, ou age for maior que 18, ou money for maior que 1000. Ou seja, é suficiente que uma das condições seja verdadeira. Aqui, a primeira condição é verdadeira, portanto access1 é verdadeira.

No entanto, a constante access2 será verdadeira se, ou age for maior que 22, ou money for maior que 1000. Como nem a primeira nem a segunda condição são atendidas, elas são falsas, portanto access2 é falsa.

Lógico NÃO (NOT)

A operação ! retorna true se o operando for false, e retorna false se o operando for true:

console.log(!true);     // false
console.log(!false);    // true

const isAlive = true;
const isDead = !isAlive;
console.log(isDead);    // false

Operações Lógicas com Valores Arbitrários

Embora tenha sido mencionado que as operações lógicas geralmente envolvem operandos do tipo Booleano - true ou false - e o resultado dessas operações também é geralmente um valor Booleano, na realidade, os operandos e resultados dessas operações podem ser valores arbitrários. Às vezes, o JavaScript pode automaticamente converter certos valores para o tipo Booleano:

Quando alguns operandos não representam um valor Booleano, as operações lógicas no JavaScript operam de acordo com certas regras específicas, aproveitando a coerção de tipos.

Operação E Lógico (&&) com Valores Não-Booleanos

Se pelo menos um dos operandos da operação && não é um valor Booleano, o seguinte ocorre:

• Se o primeiro operando é avaliado como false (por exemplo, número 0, uma string vazia, null, undefined), então o operador retorna o primeiro operando.

• Nos demais casos, retorna o segundo operando.

Exemplos:

let isAlive;        // undefined
let name = "Tom";
      
const result = isAlive && name;
console.log(result);  // undefined

console.log(false && "Tom");  // false
console.log("Tom" && null);   // null
console.log(true && "Tom");   // Tom

No exemplo const result = isAlive && name;, a primeira variável isAlive é undefined, o que se traduz para false, portanto a operação retorna undefined.

Operação OU Lógico (||) com Valores Não-Booleanos

Quando um ou ambos os operandos da operação || não são valores Booleanos, a operação realiza os seguintes passos:

• Se o primeiro operando é avaliado como true (ou seja, não é 0, string vazia, null ou undefined), então retorna o primeiro operando.

• Em todos os outros casos, retorna o segundo operando.

Exemplos:

console.log(false || "Tom");  // Tom
console.log("Tom" || null);   // Tom
console.log(true || "Tom");   // true

Operação de Negação (!) com Valores Não-Booleanos

Quando o operando da operação de negação ! não é um valor Booleano, os seguintes passos são realizados:

• Se o operando é uma string vazia, retorna true; se a string não está vazia, retorna false.

• Se o operando é o número 0, retorna true; para todos os outros números, retorna false.

• Se o operando é um objeto, retorna false.

• Se o operando é um dos valores null, NaN, ou undefined, retorna true

Exemplos:

let isAlive;        // undefined
console.log(!isAlive);   // true
console.log(!null);      // true
console.log(!0);         // true
console.log(!10);        // false
console.log(!"");        // true (string vazia)
console.log(!"Tom");     // false

Estruturas Condicionais

As operações lógicas podem aceitar valores de tipos arbitrários, não apenas Booleanos. Isso pode parecer desnecessário à primeira vista, mas tais construções podem ser extremamente úteis quando precisamos verificar uma condição e, dependendo dessa verificação, executar uma ação específica. Por exemplo:

const age = 22;
age <= 17 && console.log("Você tem menos de 18 anos. Acesso negado.");
age > 17 && console.log("Você tem mais de 17 anos. Acesso permitido.");

Neste caso, dependendo do valor da constante age (que representa a idade condicional), uma mensagem diferente é exibida na console (condicionalmente permitindo ou negando acesso). Lembrando que && retorna o segundo operando se o primeiro for verdadeiro. A primeira operação && é:

Aqui, o primeiro operando, a expressão age <= 17, é verificado primeiro. Se for verdadeiro (ou seja, se age for menor que 18), então o método console.log() é executado. No entanto, como a condição do primeiro operando NÃO é verdadeira (já que age é maior que 17), o segundo operando não é executado, e a operação retorna false.

De forma semelhante, a segunda operação && funciona, mas verifica a veracidade da expressão age > 17 (ou seja, age deve ser maior que 17):

Aqui, a condição do primeiro operando é verdadeira, portanto, o segundo operando é executado, e a mensagem é exibida no console:

Você tem mais de 17 anos. Acesso permitido.

Para construções condicionais, também podemos usar a operação || mas ela retorna o segundo operando se o primeiro for false. Portanto, funciona ao contrário: && retorna o segundo operando se a condição do primeiro operando for verdadeira, e || se não for verdadeira. Poderíamos reescrever o exemplo anterior usando || da seguinte maneira:

const age = 12;
age <= 17 || console.log("Você tem mais de 17 anos. Acesso permitido.");
age > 17 || console.log("Você tem menos de 18 anos. Acesso negado.");

Operações de Atribuição

No JavaScript, também existem várias operações que combinam operações lógicas com atribuição:

• &&=

  a &&= b Semelhante à execução a = a && b:

  content_copy Copiar código

  let x = true;
  let y = false;
  y &&= x;
  console.log(y); // false
    
  let c = false;
  let d = true;
  c &&= d;
  console.log(c); // false
    
  let a = true;
  let b = true;
  a &&= b;
  console.log(a); // true
    
  let e = false;
  let f = false;
  e &&= f;
  console.log(e); // false

• ||=

  a ||= b é equivalente à expressão a = a || b:

  content_copy Copiar código

  let x = true;
  let y = false;
  y ||= x;
  console.log(y); // true
    
  let a = true;
  let b = true;
  a ||= b;
  console.log(a); // true
    
  let c = false;
  let d = true;
  c ||= d;
  console.log(c); // true
    
  let e = false;
  let f = false;
  e ||= f;
  console.log(e); // false