How to Use Logical Operators in JavaScript

Logical operators allow you to perform logical operations on boolean values. They let you combine, negate, or compare boolean values and make logical decisions in your code based on the result.

Explore the various logical operators that JavaScript supports, including the ES6 Nullish coalescing operator.

The Logical AND (&&) Operator

The AND (&&) operator is a logical operator that returns true if both operands evaluate to true and false otherwise.

Here’s the syntax of the AND operator:

        a && b

Here’s an example of the AND operator in use:

        const a = 5;
const b = 10;
const c = 15;

const result_1 = (a < b) && (b < c);
console.log(result_1);  // true

const result_2 = (a > b) && (b < c);
console.log(result_2);  // false

In this example, result_1 evaluates to true because the two operands in the expression evaluate to true. However, result_2 evaluates to false because the first operand (a > b) returns false.

If both operands are not booleans, JavaScript will attempt to convert them into boolean values before evaluating the expression. To convert them into booleans, JavaScript first evaluates if the values are truthy or falsy.

JavaScript considers any value that is not explicitly falsy, a truthy value. When converted, they evaluate to a boolean true.

However, certain values and data types in JavaScript are falsy, so when JavaScript converts them, they evaluate to a boolean false.

The falsy values in JavaScript are:

false
null
undefined
NaN (Not a Number)
0
BigInt (0n)
Empty string ("" or '' or ``)
undefined

When you use the AND operator to evaluate non-boolean values, the expression immediately returns the first operand’s value if the operand is falsy without evaluating the second. This behavior is known as short-circuiting, and you can use it to write conditional statements in JavaScript.

However, If the first operand is truthy, the expression proceeds to evaluate the second operand. If the second operand is truthy, it returns it.

For example:

        const a = 5;
const b = 'Hello';
const c = null;

const result_1 = a && b;
console.log(result_1);  // "Hello"

const result_2 = c && b;
console.log(result_2);  // null

In this example, result_1 evaluates to “Hello” because both operands in the expression are truthy. However, result_2 short-circuits and returns null without evaluating the second operand.

Note that if there are more operands, the AND operator will continue to evaluate them until it encounters a falsy value. If it does not encounter a falsy value it returns the last truthy value it encounters.

The Logical OR (||) Operator

The OR (||) operator is a logical operator that returns true if and only if one or more of its operands is true. It only returns false when both operands are false.

Here’s the syntax of the OR operator:

        a || b

Here’s an example of the OR operator in use:

        const a = 5;
const b = 10;
const c = 15;

const result_1 = (a < b) || (b < c);
console.log(result_1);  // true

const result_2 = (a > b) || (b < c);
console.log(result_2);  // true

const result_3 = (a > b) || (b > c);
console.log(result_3);  // false

In the example above, result_1 evaluates to true because both operands in the expression evaluate to true. result_2 evaluates to true because the second operand evaluates to true. result_3 evaluates to false because the two operands in the expression evaluate to false.

When you use the OR operator in non-boolean contexts, JavaScript attempts to convert into boolean values before evaluating the expression.

When the expression is evaluated, if the first operand is truthy, the operator short-circuits and returns it. However, if it is falsy, it proceeds to evaluate the next operand until it encounters a truthy operand. If there are no truthy operands in the expression, it returns the last falsy value it encounters.

For example:

        const a = 5;
const b = 'Hello';
const c = null;

const result_1 = a || b;
console.log(result_1);  // 5

const result_2 = c || b;
console.log(result_2);  // "Hello"

const result_3 = c || " ";
console.log(result_3);  // " "

In the example above, result_1 short-circuits and returns 5 because it is a truthy value. result_2 returns “Hello” because it is the first truthy value it encounters in the expression. result_3 returns an empty string because it is the last falsy value in the expression.

The Logical NOT (!) Operator

The logical NOT (!) operator is a unary operator that returns the opposite boolean value of its operand.

Here’s the syntax of the NOT operator:

!x

Where x is a boolean or a truthy or falsy value.

Here’s an example of the NOT operator in use:

        const a = 5;
const b = '';
const c = true;

const result_1 = !a;
console.log(result_1);  // false

const result_2 = !b;
console.log(result_2);  // true

const result_3 = !c;
console.log(result_3);  // false

In the example above, the NOT operator returns the inverse value of the boolean operands. When you use the NOT operator in non-boolean contexts (result_1 & result_2), it converts truthy values to the inverse value of true and converts the falsy values to the inverse value of false.

The Nullish Coalescing (??) Operator

The nullish coalescing operator is a logical operator that evaluates two operands and returns the first operand if it is not null or undefined. Otherwise, it returns the second operand.

At a glance, the nullish coalescing operator might seem identical to the logical OR (||) operator, but that is not the case. The key difference is the OR operator returns the right-hand side operand if the left operand is ”any” falsy value, not only null or undefined.

It provides a concise way of choosing a default value when encountering null or undefined values.

Here’s the syntax for the nullish coalescing operator:

        x ?? y

Here’s an example of the nullish coalescing operator in use:

        const name = null;
const defaultName = "John Doe";

const result_1 = name ?? defaultName;
console.log(result_1);  // "John Doe"

const age = 0;
const defaultAge = 25;

const result_2 = age ?? defaultAge;
console.log(result_2);  // 0

In the example above, result_1 returns “John Doe” because the first operand had a value of null. result_2 returns 0 because, although it’s a falsy value, it is neither null nor undefined.

Using Logical Operators in Your Code

Logical operators are commonly used to write conditional statements, assign default values, or toggle boolean values based on conditions.

By utilizing these logical operators, you can write more concise and expressive code that handles different scenarios based on the truthiness or falsiness of values.