O operador OR lógico do JavaScript: como funciona?

O operador lógico OR (ou || ) em JavaScript é um operador que retorna o lado esquerdo se o lado esquerdo for truey , mas, caso contrário, o padrão retorna o lado direito.

Isso significa que ele pode ser usado para testar ambas as declarações lógicas e também para retornar o operando do lado direito caso o esquerdo seja falsy .

Vamos dar uma olhada em como ele funciona.

O que Truthy e Falsy realmente significam em JavaScript

Antes de continuarmos, vamos primeiro entender o que significa falsy . Pode parecer uma afirmação vaga, mas na verdade tem uma definição muito específica. Os seguintes valores são falsy em JavaScript:

• false
• 0 ou -0 ou 0n
• any string vazia, ou seja, ""
• null
• undefined
• NaN

Da mesma forma, truthy significa simplesmente qualquer coisa que não seja falsy .

Como falsy pode significar 0 e "" , às vezes pode ser uma má escolha para definir valores padrão.

Por exemplo, em alguns cenários, se o seu valor for realmente 0 e você quiser mostrá-lo, não será possível com o || operador. Para esses casos, é melhor considerar o operador de coalescência nula.

Como funciona o operador OR lógico em JavaScript?

Como mencionado, o || operador tem duas funções principais em JavaScript. Mais comumente, é encontrado em instruções lógicas if..else , onde retorna true se um ou mais de seus operandos for truthy , mas também é usado para retornar o primeiro valor se for truthy , ou padrão para o lado direito operando se não.

O || funciona de ambas as maneiras porque, na verdade, retorna um valor.

Usando Lógico OU Com Lógica

Você provavelmente já deve ter visto || mais comumente usado em declarações lógicas como if e else . Nesses casos, normalmente estamos testando uma instrução lógica, então || retornará true se um ou mais de seus operandos for truthy .

O que está acontecendo abaixo é o || o operador retorna um valor, que a instrução if converte em true ou false

 let x = 100; // This returns true, since both of these statements are correct. if(x > 5 || x > 10) { // ... } // Since both "1" and "2" can be converted to true, this also returns true in this context. if("1" || "2") { // ... } // Since both "" and null are falsy, they are converted to false, and as such this returns false. if("" || null) { // ... }

Esta é uma das principais formas de usar || em seu código, mas também é frequentemente usado para retornar valores com base em quão truthy ou falsy eles são.

Valores de retorno

Vejamos outro exemplo agora, fora das declarações lógicas. Como mencionado, || retorna seu lado esquerdo se for truthy , mas, caso contrário, retorna seu lado direito.

Isso soa um pouco confuso, então vamos ver alguns exemplos.

 // Is set to 1, since the first operand is falsy let x = false || 1; // Is set to hello, since "hello" is truthy let y = "hello" || true;

No exemplo acima, como x tem seu lado esquerdo definido como false , x se torna 1. Da mesma forma, em y , como "hello" não é falsy , o valor de y é "hello" . Essa funcionalidade é diferente de sua aplicação em instruções lógicas e instruções if..else , mas pode ser útil em muitas situações.

Curiosamente, mesmo que o último item fornecido seja falsy , o JavaScript ainda o retornará.

Por exemplo:

 // Is set to null since false is falsy let x = false || null; // Is set to false since 0 is falsy let y = 0 || false;

Encadeando o Operador OR

É possível encadear o || operador em JavaScript. Ao encadear instruções lógicas (em cláusulas if..else ), a instrução retornará true se qualquer item truthy for verdadeiro:

 // This works since both "1" and true are truthy if("1" || true || false) { // ... console.log('this works') } // This doesn't work since all values are falsy if(false || null || undefined) { console.log('this does not work'); }

Quando usamos || encadeado fora das declarações lógicas, ele usará o primeiro valor truthy encontrado ou o padrão para o valor final. Por exemplo, abaixo, x é igual a 3 , y é true e z é {} . Se você está se perguntando por que z é {} , é porque qualquer coisa que não seja falsy , é truthy , o que significa que um objeto é truthy !

 // x is set to 3 let x = false || 0 || 3; // y is set to true let y = false || true || 3; // z is set to {} let z = {} || [] || x;

Conclusão

O || O operador é frequentemente usado em declarações lógicas, bem como o padrão para valores não falsy , se um for encontrado. É um operador flexível que é essencial para entender o JavaScript. Se você estiver interessado em outro operador semelhante, também pode querer ler sobre o operador de coalescência nullish .