JavaScript Logical Operators

Logical operators are typically used to determine the logic between variables or values. They return a Boolean value of true or false depending on the evaluation. There are three logical operators in JavaScript: || (OR), && (AND), ! (NOT).

They are called “logical”, but can be applied to values of any type, their result can also be of any type.

|| (OR)

The OR operator is performed with two vertical lines and can manipulate boolean values only. The logical || (OR) can manipulate boolean values only. In case any of its arguments are true, it returns true, if not, it returns false. With this operator, at least one of the statements has to evaluate to true, otherwise it returns false.

boolValue = a || b;

There are four possible logical combinations:

w3docs logo javascript OR operator
console.log( true || true ); // true console.log( false || true ); // true console.log( true || false ); // true console.log( false || false ); // false

As you see, the result is always true except for the case when both operands are false. If an operand isn’t a boolean, then it’s converted to a boolean for the rating.

For instance, the number 1 is attended as true, the number 0 as false:

w3docs logo javascript OR operator
if (1 || 0) { //works the same way( true || false ) console.log('true!'); }

Sometimes || (OR) is used in an if statement to test if any of the given conditions is true.

w3docs logo javascript OR operator
let age = 10; if (age > 0 || age < 18) { console.log('You are too young'); }

|| (OR) finds the first truthy value

Described above logic is classical. Now let’s discuss the “extra” attributes of JavaScript. The extended algorithm works as follows.

Given multiple OR’ed values:

result = value1 || value2 || value3;

The || (OR) operator executes the following things:

  • Evaluates operands from left to right.
  • For each operand, converts it to boolean. In case the result is true, it stops and returns the original value of that operand.
  • If all operands are false, it returns the last operand.

A value is returned in its initial form, without any changes.

w3docs logo javascript multiple OR operator
console.log( 0 || 1); // 1 (1 is truthy) console.log( true || 'anything' ); // (true is truthy) console.log( 1 || null ); // 1 (1 is truthy value) console.log( null || 0 || 1 ); // 1 (1 is the first truthy value) console.log( undefined || null || 0 ); // 0 ( returns the last value, because all falsy )

&& (AND)

The AND operator is performed with two ampersands &&and returns true if both operands are truthy and false otherwise:

w3docs logo javascript multiple AND operator
console.log( true && true ); // true console.log( false && true ); // false console.log( true && false ); // false console.log( false && false ); // false

Example of the AND operator with if:

w3docs logo javascript multiple AND operator
let hour = 11; if (hour > 10 && hour < 18) { console.log('We are open!'); }

&& (AND) finds the first falsy value

Given multiple AND’ed values:

result = value1 && value2 && value3;

The AND && operator makes the following:

  • Asses operands from left to right.
  • Converts it to a boolean for each operand. In case the result is false, it stops and returns the original value of that operand.
  • If all operands were truthy, it returns the last operand.

Shortly, AND returns the first falsy value or the last value if none were found.

The rules above are similar to OR. The difference between them is that AND returns the first falsy value while OR returns the first truthy one.

AND returns the second operand if the first operand is truthy:

w3docs logo javascript AND operator
console.log( 1 && 0 ); // 0 console.log( 1 && 6); // 6

AND returns the first operand, if it is false, the second operand is ignored:

w3docs logo javascript AND operator
console.log( null && 6 ); // null console.log( 0 && "anything" ); // 0

! (NOT)

The logical NOT operator is represented with an exclamation sign ! (NOT) . It reverses or negates the value of a boolean.

It’s syntax is very simple:

result = !value;

The operator accepts a single argument and does presented below functions:

  • Transforms the operand to boolean type: true/false.
  • Returns the opposite value.

Example of the NOT operator:

w3docs logo javascript Not operator
console.log( !false ); // true console.log( !1 ); // false

Sometimes we use a double !! (NOT) to convert a value to boolean type:

w3docs logo javascript Not operator
console.log( !!"not-empty string" ); // true console.log( !!null ); // false

The first NOT transforms the value to boolean and returns the opposite, the second NOT inverses it again. After all, we have a plain value-to-boolean conversion.

There’s a little more wordy way to do the same thing – a built-in Boolean function:

w3docs logo javascript Not operator
console.log( Boolean("not-empty string") ); // true console.log( Boolean(null) ); // false

The priority of ! (NOT) is the highest of all logical operators, that’s why it always executes first, before && or ||.


Do you find this helpful?