JavaScript: Logical Operators

Logical operators are used with Boolean values (true/false). JavaScript offers three different logical operators: the AND (&&), the OR (||) and the NOT (!) operator.

Logical operators can be used to combine two or more conditional expressions.

Logical AND (&&) Operator

(x && y)

Returns true if x and y are true. Otherwise, if one operand is false it will return false.

Logical AND Truth Table

Logical OR (||) Operator

(x || y)

Returns true if x or y is true. Otherwise, if both operands are false it will return false.

Logical OR Truth Table

Logical NOT (!) Operator

(!x)

Negates the logic. Returns false if x is true. Otherwise, if x is false it will return true.

Logical NOT Truth Table

Short-Circuit Evaluation

Logical expressions are tested for possible "short-circuit" evaluation. The second argument (or following arguments) is only evaluated if the first argument (or previous arguments) does not suffice to determine the result of the complete expression, e.g.:

• The overall value must be false when the first argument of an AND function evaluates to false.
• The overall value must be true when the first argument of an OR function evaluates to true.

Logical expressions are evaluated from left to right.

Example

For this example, we use JavaScript to see if a student passed the end of year examination. A HTML form is used to allow examination marks entry. The JavaScript will read the HTML form, evalute examination marks, and alert with a 'Passed' or 'Not Passed' message.

A 'Passed' message will display if:

1. Student achieved 50 or higher mark in written examination and 50 or higher mark in oral examination.
2. Student achieved 30 or higher mark in written examination and 70 or higher mark in oral examination.

Students are not allowed to cheat.

Variable wEx will hold the written examination mark, variable oEx will hold oral examination mark and variable cheated will hold a Boolean value.

Conditional Expressions

Case #1, 50 or higher mark in written examination and 50 or higher mark in oral examination:

1. Written examination mark (wEx) 50 or higher: (wEx >= 50)
2. Oral examination mark (wEx) 50 or higher: (oEx >= 50)
3. Conditional expression combined with logical AND operator: (wEx >= 50 && oEx >= 50)
4. Apply additional logical AND operator to include cheated: (wEx >= 50 && oEx >= 50 && cheated)
5. Negate cheated with logical operator NOT: (wEx >= 50 && oEx >= 50 && !cheated)

Case #2, 30 or higher mark in written examination and 70 or higher mark in oral examination:

1. Written examination mark (wEx) 30 or higher: (wEx >= 30)
2. Oral examination mark (wEx) 70 or higher: (oEx >= 70)
3. Conditional expression combined with logical AND operator: (wEx >= 30 && oEx >= 70)
4. Apply additional logical AND operator to include cheated: (wEx >= 30 && oEx >= 70 && cheated)
5. Negate cheated with logical NOT operator: (wEx >= 30 && oEx >= 70 && !cheated)

Case #1 and case #2 combined with logical OR operator:

((wEx >= 50 && oEx >= 50 && !cheated) || (wEx >= 30 && oEx >= 70 && !cheated))

View line 17 of the JavaScript Sample Code below to see how we used the combined conditional expressions.

JavaScript Sample Code

Copy this code into the head element of your HTML document:

 <script>
 <!--
 /**********************************************************************
  * Source: www.mycourseresource.com sample script *
  * Title: logical operator sample script *
  * Cat No: TN200912002 Issue: Rev 1.00 - 22. December 2009 *
  * *
  * Description: *
  * Script to demonstrate the use of the logical AND, OR and NOT *
  * operators. Visit mycourseresource.com for more information. *
  **********************************************************************/
 
 function checkMarks() {
 var wEx = document.forms["enterMarks"]["wex"].value;
 var oEx = document.forms["enterMarks"]["oex"].value;
 var cheat = (document.forms["enterMarks"]["cheat"].value) == "true";
 if ((wEx >= 50 && oEx >= 50 && !cheat) || (wEx >= 30 && oEx >= 70 && !cheat)) {
 alert("Passed");
  }
 else {
 alert("Not Passed");
  }
  }
 //-->
 </script>

HTML Sample Code

Copy this code into the body element of your HTML document:

 <!-- **********************************************************************
  * Source: www.mycourseresource.com sample HTML code *
  * Title: logical operator sample HTML form code *
  * Cat No: TN200912002 Issue: Rev 1.00 - 22. December 2009 *
  * *
  * Description: *
  * Script to demonstrate the use of the logical AND, OR and NOT *
  * operators. Visit mycourseresource.com for more information. *
  ********************************************************************** -->
 <form name="enterMarks">
  <fieldset>
  <legend>Enter Marks</legend>
  <div>
  <label for="wex">Written Examination Mark:</label>
  <input type="text" name="wex" id="wex">
  </div>
  <div>
  <label for="oex">Oral Examination Mark:</label>
  <input type="text" name="oex" id="oex">
  </div>
  <div>
  <label for="cheat">Cheated:</label>
  <select name="cheat" id="cheat">
  <option value="false">No</option>
  <option value="true">Yes</option>
  </select>
  </div>
  <div>
  <input type="button" value="Passed?" onClick="checkMarks()">
  </div>
  </fieldset>
 </form>

HTML Marks Entry Form

This is how the HTML form should look and perform. Try it out.