Logical operators are used to determining the logic between values. It is used between values of all types also, not only boolean.
The operators are:
- OR (
||
) operator, - AND (
&&
) operator, - NOT (
!
) operator.
OR ||
Operator
The ||
operators are the two vertical line symbols.
Syntax:
result = a || b
The above expression means if either a
or b
is true, the result becomes true also.
See the table below:
a | b | result |
---|---|---|
true | true | true |
true | false | true |
false | true | true |
false | false | false |
- Truthy values are
true
,"strings"
,1
,2
,numbers
, except0
. - Falsy values are
false
,""
,null
,undefined
,NaN
, and0
.
let a = true;
let b = false;
let x = 0;
let y = 5
let result;
result = a || b;
console.log(result); // true
result = x || y;
console.log(result); // 5
Multiple ||
Operators
The ||
operator finds the first truthy value from left to right to evaluate as the result.
Syntax:
result = value1 || value2 || value3 || ... ValueN;
See the example below:
const result = null || 0 || "" || 5 || 10 || 20 || 30;
console.log(result); // 5
The values null
, 0
, ''
are false, but the first true value is 5
.
That is null || 0 || ""
gets skipped because they all false.
The evaluated result is:
const result = 5 || 10 || 20 || 30;
// same as
// const result = 5;
result; // 5
All other values get ignored since the first true value is found.
When values or expressions get ignored, it is called short-circuit evaluation.
OR ||
operators in conditional expressions
The ||
operators in conditional expressions can determine the first true value in advance.
let num = Math.trunc(Math.random(34) * 3); // 0, 1, 2
console.log(num);
if (num && 1) {
console.log('A true value is found.');
} else {
console.log('It is all false!');
}
The
trunc
function is not available in the older JavaScript engine. For older browsers, use thefloor
function instead. They both round down figures to the nearest whole number.23.7
becomes23
.
AND &&
Operator
The &&
operators are the two ampersands symbols.
Syntax:
result = a && b
The above expression means both a
and b
must be true for the result to become true also.
See the table below:
a | b | result |
---|---|---|
true | true | true |
true | false | false |
false | true | false |
false | false | false |
- Truthy values are
true
,"strings"
,1
,2
,numbers
, except0
. - Falsy values are
false
,""
,null
,undefined
,NaN
, and0
.
const a = true;
const b = false;
const x = 0;
const y = 5
let result;
result = a && b;
console.log(result); // false
result = x && y;
console.log(result); // 0
Multiple && Operators
The &&
operator finds the first falsy value from left to right to evaluate as the result.
Syntax:
result = value1 && value2 && value3 && ... ValueN;
See the example below:
const result = null && 0 && "" && 5 && 10 && 20 && 30;
console.log(result); // null
null
is the first false value found by the engine. Therefore all other values get ignored.
When values or expressions get ignored, it is called short-circuit evaluation.
AND &&
operators in conditional expressions
The &&
operators in conditional expressions can determine the first false value in advance.
let num = Math.trunc(Math.random(34) * 3); // 0, 1, 2
console.log(num);
if (num && 1) {
console.log('A false value is found.');
} else {
console.log('It is all true!');
}
NOT (!
) Operator
The !
(exclamation sign) operator reverses any value.
Syntax:
result = !a;
See the table below:
a | result |
---|---|
true | false |
false | true |
It reverses boolean types.
See the example below:
const result = !true;
console.log(result); // false
It also converts any data type to a boolean.
See the example below:
const result = !45; // try null, undefined, 0, NaN, "string", etc
console.log(result); // false
A double NOT !!
is sometimes used for converting a value to its actual boolean:
const result = !!45; // try null, undefined, 0, NaN, "string", etc
console.log(result); // true
Mixed Logical Operators
Logical operators in the same expression are evaluated based on their precedence level. Higher precedence level operators are addressed first.
See the example below:
Logical Operators | Precedence |
---|---|
NOT !
|
17 |
AND &&
|
7 |
OR | 6 |
In the table,
- the highest precedence operator is
!
. - the lowest precedence operator is
||
.
See the example below:
const age = 0 && 10 || 45;
console.log(age); // 45
The operator, &&
has higher precedence than the ||
operator, meaning &&
gets evaluated first.
const age = (0 && 10) || 28; // (0 && 10) = 0
console.log(age); // 28
Logical assignment
We have the logical OR assignment, logical AND assignment, and logical Nullish Coalescing assignment. These operators were introduced in ECMAScript 2021.
The Nullish Coalescing operator needs to be discussed in the next article before considering the Nullish Coalescing assignment.
Logical OR assignment
The syntax of logical and operator is shown below:
a ||= b // a || (a = b)
The syntax above shows that if a
is falsy, a = b
, otherwise b
.
See the example below:
let a = 0;
let b = 10;
const result = a ||= b;
console.log(result); // 10
The example above is the same as below:
let a = 0;
let b = 10;
a ||= b;
console.log(a);
Recall: Falsy (false
) values are 0
, null
, undefined
, null
, NaN
, etc. All other numbers are true
values.
Logical OR assignment
The syntax of logical and operator is shown below:
a ||= b // a || (a = b)
The syntax above shows that if a
is truth, a = b
, otherwise a
.
See the example below:
let a = 0;
let b = 10;
const result = a &&= b;
console.log(result); // 0
The example above is the same as below:
let a = 0;
let b = 10;
a &&= b;
console.log(a);
Recall: Falsy (false
) values are 0
, null
, undefined
, null
, NaN
, etc. All other numbers are true
values.
Happy Coding!!!
TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free SSL certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
- 30-Day Money-Back Guarantee.
Top comments (0)