Como usar operadores lógicos em JavaScript

A lógica é a base de qualquer programa, então você vai querer dominar os operadores lógicos para estruturar seu código de forma eficiente.

Os operadores lógicos permitem que você execute operações lógicas em valores booleanos. Eles permitem que você combine, negue ou compare valores booleanos e tome decisões lógicas em seu código com base no resultado.

Explore os vários operadores lógicos suportados pelo JavaScript, incluindo o operador de coalescência ES6 Nullish.

O operador lógico AND (&&)

O operador AND (&&) é um operador lógico que retorna true se ambos os operandos forem avaliados como true e false caso contrário.

Aqui está a sintaxe do operador AND:

a && b

Aqui está um exemplo do operador AND em uso:

const a = 5;
const b = 10;
const c = 15;

const result_1 = (a < b) && (b < c);
console.log(result_1); // true

const result_2 = (a > b) && (b < c);
console.log(result_2); // false

Neste exemplo, result_1 é avaliado como true porque os dois operandos na expressão são avaliados como true . No entanto, result_2 é avaliado como false porque o primeiro operando ( a > b ) retorna false .

Se ambos os operandos não forem booleanos, o JavaScript tentará convertê-los em valores booleanos antes de avaliar a expressão. Para convertê-los em booleanos, o JavaScript primeiro avalia se os valores são verdadeiros ou falsos.

JavaScript considera qualquer valor que não seja explicitamente falso, um valor verdadeiro. Quando convertidos, eles são avaliados como um booleano true .

No entanto, certos valores e tipos de dados em JavaScript são falsos, portanto, quando o JavaScript os converte, eles são avaliados como um booleano false .

Os valores falsos em JavaScript são:

• falso
• nulo
• indefinido
• NaN (não é um número)
• 0
• BigInt (0n)
• String vazia ( “” ou ” ou “ )
• indefinido

Quando você usa o operador AND para avaliar valores não booleanos, a expressão retorna imediatamente o valor do primeiro operando se o operando for falso sem avaliar o segundo. Esse comportamento é conhecido como curto-circuito e você pode usá-lo para escrever instruções condicionais em JavaScript.

No entanto, se o primeiro operando for verdadeiro, a expressão procede para avaliar o segundo operando. Se o segundo operando for verdadeiro, ele o retorna.

Por exemplo:

const a = 5;
const b = 'Hello';
const c = null;

const result_1 = a && b;
console.log(result_1); // "Hello"

const result_2 = c && b;
console.log(result_2); // null

Neste exemplo, result_1 é avaliado como “Hello” porque ambos os operandos na expressão são verdadeiros. No entanto, result_2 entra em curto-circuito e retorna nulo sem avaliar o segundo operando.

Observe que se houver mais operandos, o operador AND continuará avaliando-os até encontrar um valor falso. Se não encontrar um valor falso, ele retornará o último valor verdadeiro que encontrar.

O operador lógico OU (||)

O operador OR (||) é um operador lógico que retorna true se e somente se um ou mais de seus operandos for true . Ele só retorna false quando ambos os operandos são false .

Aqui está a sintaxe do operador OR:

a || b

Aqui está um exemplo do operador OR em uso:

const a = 5;
const b = 10;
const c = 15;

const result_1 = (a < b) || (b < c);
console.log(result_1); // true

const result_2 = (a > b) || (b < c);
console.log(result_2); // true

const result_3 = (a > b) || (b > c);
console.log(result_3); // false

No exemplo acima, result_1 é avaliado como true porque ambos os operandos na expressão são avaliados como true . result_2 é avaliado como true porque o segundo operando é avaliado como true . result_3 é avaliado como false porque os dois operandos na expressão são avaliados como false .

Quando você usa o operador OR em contextos não booleanos, o JavaScript tenta converter em valores booleanos antes de avaliar a expressão.

Quando a expressão é avaliada, se o primeiro operando for verdadeiro, o operador causa um curto-circuito e o retorna. No entanto, se for falso, ele avalia o próximo operando até encontrar um operando verdadeiro. Se não houver operandos verdadeiros na expressão, ela retornará o último valor falso encontrado.

Por exemplo:

const a = 5;
const b = 'Hello';
const c = null;

const result_1 = a || b;
console.log(result_1); // 5

const result_2 = c || b;
console.log(result_2); // "Hello"

const result_3 = c || " ";
console.log(result_3); // " "

No exemplo acima, result_1 entra em curto-circuito e retorna 5 porque é um valor verdadeiro. result_2 retorna “Hello” porque é o primeiro valor verdadeiro que encontra na expressão. result_3 retorna uma string vazia porque é o último valor falso na expressão.

O operador lógico NOT (!)

O operador lógico NOT (!) é um operador unário que retorna o valor booleano oposto de seu operando.

Aqui está a sintaxe do operador NOT:

!x

Onde x é um valor booleano ou verdadeiro ou falso.

Aqui está um exemplo do operador NOT em uso:

const a = 5;
const b = '';
const c = true;

const result_1 = !a;
console.log(result_1); // false

const result_2 = !b;
console.log(result_2); // true

const result_3 = !c;
console.log(result_3); // false

No exemplo acima, o operador NOT retorna o valor inverso dos operandos booleanos. Quando você usa o operador NOT em contextos não booleanos ( result_1 & result_2 ), ele converte valores true no valor inverso de true e converte os valores false no valor inverso de false .

O Operador Coalescente Nulo (??)

O operador de coalescência nullish é um operador lógico que avalia dois operandos e retorna o primeiro operando se não for nulo ou indefinido . Caso contrário, retorna o segundo operando.

À primeira vista, o operador de coalescência nula pode parecer idêntico ao operador lógico OR (||), mas esse não é o caso. A principal diferença é que o operador OR retorna o operando do lado direito se o operando esquerdo for “qualquer” valor falso, não apenas nulo ou indefinido .

Ele fornece uma maneira concisa de escolher um valor padrão ao encontrar valores nulos ou indefinidos .

Aqui está a sintaxe para o operador de coalescência nullish:

x ?? y

Aqui está um exemplo do operador de coalescência nullish em uso:

const name = null;
const defaultName = "John Doe";

const result_1 = name ?? defaultName;
console.log(result_1); // "John Doe"

const age = 0;
const defaultAge = 25;

const result_2 = age ?? defaultAge;
console.log(result_2); // 0

No exemplo acima, result_1 retorna “John Doe” porque o primeiro operando tinha um valor null . result_2 retorna 0 porque, embora seja um valor falso, não é null nem undefined .

Usando operadores lógicos em seu código

Os operadores lógicos são comumente usados ​​para escrever instruções condicionais, atribuir valores padrão ou alternar valores booleanos com base em condições.

Ao utilizar esses operadores lógicos, você pode escrever um código mais conciso e expressivo que lida com diferentes cenários com base na veracidade ou falsidade dos valores.