JavaScript Logical Operators

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:

• Truthy values are true, "strings", 1, 2, numbers, except 0.
• Falsy values are false, "", null, undefined, NaN, and 0.

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 the floor function instead. They both round down figures to the nearest whole number. 23.7 becomes 23.

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:

• Truthy values are true, "strings", 1, 2, numbers, except 0.
• Falsy values are false, "", null, undefined, NaN, and 0.

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:

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:

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.