What is Logical AND Operator (&&) in JavaScript?

Javascript Web Development Front End Technology

In this article, we will discuss the logical AND (&&) operator in JavaScript. You have to make sure that the logical AND operator (&&) has nothing to do with the bitwise (&) operator, these are completely different operators in context to their working and uses.

Logical AND (&&) Operator in JavaScript

The logical AND (&&) operator is one of the binary operators because it requires two operands to perform the operation. The logical AND operator takes two operands they could be in the form of an expression or any comparison, but the AND operator will return true only if both the operands of the operator become true. Otherwise, it will return false, either both the operands become false, or any one of them become false. The logical AND (&&) operator is mostly used inside the conditional statements to execute the block of code inside it if the condition turns true.

How does it work?

The logical AND (&&) operator starts evaluating the expressions or the operands from the left operand, and it will immediately return false if the left operand is false, otherwise, it will check for the operand on the right side if the right operand is also true it will return true, else it will return false even if the first expression or the operand is true.

Syntax

The following syntax will help you understand the use of the AND (&&) operator in JavaScript −

operand1 && operand2
        OR
expression1 && expression2

Let us understand the working of the logical AND (&&) operator practically by implementing it inside a code example.

Algorithm

Step 1 − In the first step, we will define two input elements with number type to get the input from the user in form of the numbers.

Step 2 − In this step, we will define a button element with onclick event which calls a function when the user clicks the button and the results will be visible to the user.

Step 3 − In the third step, we will define the callback function for the onclick event of the button inside which we will use the logical AND operator.

Step 4 − In the last step, we will grab the value of inputs that are given by the user and compare them with some conditions that use the logical AND operator and show the result to the user associated with the particular condition statement whose conditions are met.

Example 1

The example below will explain the use of the logical AND (&&) operator by using it inside the code −


<!DOCTYPE html>
<html>
<body>
   <h2>Logical AND 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 AND 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 have used the logical AND operator inside the conditional statements with some expressions, and the result is varying according to the conditions of the statement, different results will be shown for the different conditions. We are using the inputs given by the user to evaluate the result and show the different outputs for the different scenarios.

Example 2

If both the operands are non-zero, then the condition becomes true with Logical AND Operator. You can try to run the following code to learn how to work with Logical AND Operator −


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

In this tutorial, we have learned about the logical AND operator in JavaScript. We have discussed and understood the use of this operator practically with help of the code example, with the help of this example you can easily understand the working of the logical AND operator with more than one expression, where it will only show the result for the statement, who’s both the operands or the expressions that are used with the AND operator comes true. Otherwise, it returns false.