DEV Community

Cover image for JavaScript Logical Operators
Bello Osagie
Bello Osagie

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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, 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
Enter fullscreen mode Exit fullscreen mode

Multiple || Operators

The || operator finds the first truthy value from left to right to evaluate as the result.

Syntax:

result = value1 || value2 || value3 || ... ValueN;
Enter fullscreen mode Exit fullscreen mode

See the example below:

const result = null || 0 || "" || 5 || 10 || 20 || 30;
console.log(result); // 5
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!');
}
Enter fullscreen mode Exit fullscreen mode

image.png


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
Enter fullscreen mode Exit fullscreen mode

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, 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
Enter fullscreen mode Exit fullscreen mode

Multiple && Operators

The && operator finds the first falsy value from left to right to evaluate as the result.

Syntax:

result = value1 && value2 && value3 && ... ValueN;
Enter fullscreen mode Exit fullscreen mode

See the example below:

const result = null && 0 && "" && 5 && 10 && 20 && 30;
console.log(result); // null
Enter fullscreen mode Exit fullscreen mode

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!');
}
Enter fullscreen mode Exit fullscreen mode

NOT (!) Operator

The ! (exclamation sign) operator reverses any value.

Syntax:

result = !a;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The operator, && has higher precedence than the || operator, meaning && gets evaluated first.

const age = (0 && 10) || 28; // (0 && 10) = 0
console.log(age); // 28
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The example above is the same as below:

let a = 0;
let b = 10;
a ||= b; 
console.log(a); 
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The example above is the same as below:

let a = 0;
let b = 10;
a &&= b; 
console.log(a);
Enter fullscreen mode Exit fullscreen mode

Recall: Falsy (false) values are 0, null, undefined, null, NaN, etc. All other numbers are true values.

Happy Coding!!!


Buy me a Coffee


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)