What is Logical OR Operator (||) in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will discuss the logical OR (||) operator in JavaScript.

The logical OR operator is used with a set of operands, and it will return true if any of those operands is true, else it returns false when all the operands are not true. If the logical OR operator is used with the Boolean values, it returns a Boolean value. Otherwise, if it is used with non-boolean values, it will return non-boolean values or the values of the operands that are true out of that set as they all must have values in binary form, 1 for true and 0 for false.

Syntax

The following syntax will be used to implement the logical OR operator in JavaScript to check for any set of operands −

operand1 || operand2

In the above syntax, if either operand1 or operand2 or both are true, then the logical OR operator will return true. Otherwise, it will return false, when all the operands are not-true.

A few non-boolean values, but the Logical OR operator will return false if they appear as the value of the non-boolean operand −

0
NaN
null
undefined
empty string ( " ", ' ' , ` `)

Let us understand the practical implementation of the Logical OR operator with help of the code examples.

Example 1

If any of the two operands is non-zero, then the condition becomes true. Here’s how you can use the operator || in JavaScript −


<html>
<body>
   <script>
      var a = true;
      var b = false;
      document.write("(a || b) => ");
      result = (a || b);
      document.write(result);
   </script>
</body>
</html>

Example 2

The following example will show you how you can use the Logical OR operator with non-boolean values −


<!DOCTYPE html>
<html>
<body>
   <h2>Logical OR operator (||) in JavaScript</h2>
   <p> Enter two numbers: </p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br>
   <p> Click to see the result of Logical OR Operator (||) of above inputs. </p>
   <button onclick = "display()"> Show Result </button>
   <p id = "result"></p>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var val2 = Number(inp2.value);
         var res = val1||val2
         result.innerHTML += "<br>Result: " + res ;
      }
   </script>
</body>
</html>

In the above example, we defined the isEven() function which returns the non-boolean values, 0 if the number is odd and 1 if the number is even. Further, we have used this function inside the display() function with logical OR operator associated with two operands one is this isEven() function, and another is the input number is equal to zero. If any one of these operands or the conditions becomes true, the logical OR operator will return true.

Let us see one more example of implementing the logical OR operator where it is used with the Boolean values.

Algorithm

The algorithm of the above example and this example is almost similar; you just need to perform some minor changes. You need to replace the return values of the isEven() function with true and false. You have to replace the return 1 with return true and return 0 with return false, as did in the below example.

Example 3

The below example will illustrate the behavior or the use of the Logical OR operator with the Boolean values −


<!DOCTYPE html>
<html>
<body>
   <h2> Check if number if odd or even using Logical OR operator (||)</h2>
   <input type="number" id="inp1"> <br>
   <p> Click to see the result of Logical OR Operator (||) of above input. </p>
   <p id="result"></p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function isEven(num) {
         if (num % 2 == 0) {
            return true;
         } else {
            return false;
         }
      }
      function display() {
         var inp1 = document.getElementById("inp1");
         var val1 = Number(inp1.value);
         if (isEven(val1) || val1 == 0) {
            result.innerHTML += " <b> The number " + val1 + " you entered as the input is an even number. </b> <br> ";
         } else {
            result.innerHTML += " <b> The number " + val1 + " you entered as the input is an odd number. </b> <br> ";
         }
      }
   </script>
</body>
</html>

In this example, we have used the Boolean values to check whether the input number is odd or even with the isEven() function. You can clearly see, that the example is working similarly to the previous example even after changing the return values.

In this tutorial, we have seen what is the logical OR (||) operator in JavaScript and how we can use it with help of two different code examples to see the behavior of the logical OR operator with different types of return values, one in the case of Boolean values and another is implemented using the non-boolean values.