# JavaScript: Logical Operators

Document Reference: TN200912002 - Rev: 4.30 - Last Update: 17-03-2014 20:48 GMT - Downloaded: 22-Jun-2024 17:02 GMT

## 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 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

`` <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.

Enter Marks

This website uses cookies to give you the best experience on our website, to personalise content and to analyse our website traffic. Some cookies may have been set already. To find out more about our use of cookies you can visit our Privacy Statement. By browsing this website, you agree to our use of cookies.

Hide this message