What does the operator || do in a var statement in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will discuss what the operator || does in a var statement in JavaScript.

The logical OR operator or logical disjunction on the operands returns true if any of the operand values are true, false,’’, null, undefined, 0, and NaN are the false values. All other values are true.

The logical OR operands must be either boolean, integer, or a pointer kind. The logical OR returns the latest operand if there is no true value. The logical OR executes from left to right.

Users can follow the syntax below for using the logical OR operator.

Syntax

expr1 || expr2

The above syntax has two expressions with a logical OR operation. If either expr1 or expr2 is true, the entire expression becomes true.

Use || operator with general statements

Example

We have taken various expressions with the logical OR operator in this example. The operator returns the output by left-to-right execution.


<html>
<head>
   <script type = "text/javascript">
      function logicalOrStatements()
      {
         var logicOrStmtBtn = document.getElementById("logicOrStmtBtnWrap");
         var logicOrStmtOut = document.getElementById("logicOrStmtOut");
         var logicOrStmtStr = "";
         var variable = "variable";
         var logicOrCbk = function(inp)
         {
            logicOrStmtStr += " <b>"+ inp + "</b></br></br>";
         };
         logicOrStmtStr += 'true || true';
         logicOrCbk(true || true);
         
         logicOrStmtStr += 'false || true';
         logicOrCbk(false || true);
         
         logicOrStmtStr += 'true || false';
         logicOrCbk(true || false);
         
         logicOrStmtStr += '(false || (3 === 4))';
         logicOrCbk(false || (3 === 4));
         
         logicOrStmtStr += "('One' || 'Two')";
         logicOrCbk('One' || 'Two');
         
         logicOrStmtStr += "(false || 'One')";
         logicOrCbk(false || 'One');
         
         logicOrStmtStr += "('One' || false)";
         logicOrCbk('One' || false);
         
         logicOrStmtStr += "('' || false)";
         logicOrCbk('' || false);
         
         logicOrStmtStr += "(false || '')";
         logicOrCbk(false || '');
         
         logicOrStmtStr += '(false || variable)';
         logicOrCbk(false || variable);
         
         const a = 30;
         const b = -2;
         console.log(a > 0 || b > 0);
         logicOrStmtStr += 'a=30, b=-2 (a > 0 || b > 0)';
         logicOrCbk((a > 0 || b > 0));
         
         logicOrStmtOut.innerHTML = logicOrStmtStr;
      }
   </script>
</head>
<body>
   <h2> Working of the logical OR || operator in statements </h2>
   <div id = "logicOrStmtBtnWrap">
      <p> Click the button </p>
      <button onclick = "logicalOrStatements()"> Click Me </button>
   </div>
   <div id = "logicOrStmtOut"> </div>
</body>
</html>

Use || operator with objects

We can also use the logical OR operator to get a default value when some object is unavailable.

Example

Here, people’s object has a name property. So it returns ‘Egan’. People object has no property age. So it returns ‘Nil’.


<html>
<head>
   <script type = "text/javascript">
      function logicalOrStatements()
      {
         var logicOrObjBtn = document.getElementById("logicOrObjBtnWrap");
         var logicOrObjOut = document.getElementById("logicOrObjOut");
         var logicOrPre = document.getElementById("logicOrPre");
         var logicOrObjStr = "";
         var variable = "variable";
         var logicOrCbk = function(inp)
         {
            logicOrObjStr += " <b>"+ inp + "</b></br></br>";
         };
         var people =
         {
            name: 'Egan'
         };
            logicOrPre.innerHTML = JSON.stringify(people);
            logicOrObjStr += ("people.name || 'Nil'");//Egan
            logicOrCbk(people.name || 'Nil');
            
            logicOrObjStr += ("people.age || 'Nil'");//Nil
            logicOrCbk(people.age || 'Nil');
            logicOrObjOut.innerHTML = logicOrObjStr;
         }
      </script>
   </head>
<body>
   <h2>Working of the logical OR || operator in objects </h2>
   <pre id = "logicOrPre"></pre>
   <div id = "logicOrObjBtnWrap">
      <p>Click the button</p>
      <button onclick = "logicalOrStatements()"> Click Me </button>
   </div>
   <div id = "logicOrObjOut">
</body>

Use || operator with functions

Here we use the logical OR operator in a function call.

Example

In this example, we call function Y first. So the output is the execution of function Y first. Execution stops here because logical OR runs from left to right.


<html>
<head>
   <script type="text/javascript">
      function logicalOrStatements()
      {
         var logicOrFnBtn = document.getElementById("logicOrFnBtnWrap");
         var logicOrFnOut = document.getElementById("logicOrFnOut");
         var logicOrPre = document.getElementById("logicOrPre");
         var logicOrFnStr = "";
         var variable = "variable";
         function X()
         {
            logicOrFnStr += 'function X';
            return false;
         }
         function Y()
         {
            logicOrFnStr += 'function Y';
            return true;
         }
         var output = (Y() || X());
         logicOrFnOut.innerHTML = "(Y() || X())" + "<br><br><b>"+ logicOrFnStr + "</b><br><b>" + output + "</b>";
      }
   </script>
</head>
<body>
   <h2>Working of the logical OR || operator in function calls</h2>
   <div id = "logicOrFnBtnWrap">
      <p> Click the button </p>
      <button onclick = "logicalOrStatements()"> Click Me </button>
   </div>
   <div id = "logicOrFnOut"> </div>
</body>
</html>

In this tutorial, we have discussed the purpose of the logical OR operator in var statement in JavaScript. We have gone through different examples to understand this better. The logical operator is useful when we need to run only one block of code which satisfies a true condition first.