JavaScript Logical Operators
Logical Operators
Logical operators are used to combine boolean expressions.
Logical operators can be used to modify the results of comparisons.
Typically, you will use a comparison operator to check a condition, and a logical operator to combine conditions into more complex logic.
Given that x = 6 and y = 3, the table below explains the logical operators:
| Operator | Description | Example | Try it |
|---|---|---|---|
| && | and | (x < 10 && y > 1) is true | Try it » |
| || | or | (x == 5 || y == 5) is false | Try it » |
| ! | not | !(x == y) is true | Try it » |
The Conditional (Ternary) Operator
The conditional operator is a shorthand for writing conditional
if...else statements.
It is called a ternary operator because it takes three operands.
Syntax
(condition) ? value1:value2
Example
let voteable = (age < 18) ? "Too young":"Old enough";
Try it Yourself »
If the variable age is a value below 18, the value of the variable voteable will be "Too young", otherwise the value of voteable will be "Old enough".
The Nullish Coalescing Operator (??)
The ?? operator returns the first argument if it is not nullish
(null or undefined).
Otherwise it returns the second argument.
Browser Support
?? is an ES2020 feature.
ES2020 is fully supported in all modern browsers since September 2020:
| Chrome 85 |
Edge 85 |
Firefox 79 |
Safari 14 |
Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
The Optional Chaining Operator (?.)
The ?. operator returns undefined if an object is
undefined or null (instead of throwing an error).
Example
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;
Try it Yourself »
Browser Support
?. is an ES2020 feature.
ES2020 is fully supported in all modern browsers since September 2020:
| Chrome 85 |
Edge 85 |
Firefox 79 |
Safari 14 |
Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
Learn More:
Study our JavaScript Logical Tutorial.
