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
x | y | x && y |
---|---|---|
false | false | false |
false | true | false |
true | false | false |
true | true | true |
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
x | y | x && y |
---|---|---|
false | false | false |
false | true | true |
true | false | true |
true | true | true |
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
x | !x |
---|---|
false | true |
true | false |
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 anAND
function evaluates tofalse
. - The overall value must be
true
when the first argument of anOR
function evaluates totrue
.
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:
- Student achieved 50 or higher mark in written examination and 50 or higher mark in oral examination.
- 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:
- Written examination mark (
wEx
) 50 or higher:(wEx >= 50)
- Oral examination mark (
wEx
) 50 or higher:(oEx >= 50)
- Conditional expression combined with logical AND operator:
(wEx >= 50 && oEx >= 50)
- Apply additional logical AND operator to include
cheated
:(wEx >= 50 && oEx >= 50 && cheated)
- 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:
- Written examination mark (
wEx
) 30 or higher:(wEx >= 30)
- Oral examination mark (
wEx
) 70 or higher:(oEx >= 70)
- Conditional expression combined with logical AND operator:
(wEx >= 30 && oEx >= 70)
- Apply additional logical AND operator to include
cheated
:(wEx >= 30 && oEx >= 70 && cheated)
- 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.