Logical assignment operators

Prerequisites

To grasp the content of this article, you should be comfortable with the following concepts:

Introduction

Logical operators, excluding the unary NOT operator, are binary operators which toggle between two expressions depending on the operation being performed. Popular logical operators include the following:

logical OR operator (||)
logical AND operator (&&)
nullish coalescing operator (??)

When logical operators coalesce with the assignment operator (=), the resulting entity is called a logical assignment operator. Logical assignment operators employ short circuit evaluation to assign the result of an expression to a variable. This technique provides a concise way to default to a value when the left side operand fails the condition set by the logical operation.

A logical assignment operator will do the following:

Perform a logical operation which takes in two operands - a variable (left side operand) and a value of any valid data type (right side operand).
Store the output of the operation in the variable.

A nuance associated with logical assignment operators is that the variable would only be updated if its initial value fails the condition set by the logical operation. On the other hand, if the value passes the test, the right hand operand would be ignored, and the variable unaltered. The success or failure of the variable (left hand operand) upon evaluation by the logical operator is dependent on the logical operation being performed.

Logical OR assignment

Depending on the value of the left side operand, we can switch between two values using the OR operator as illustrated below:

let username;
username = username || 'stranger';

In the snippet above, username would always be assigned a value regardless of the output obtained from the OR operation. However, using the logical OR assignment (||=) operator, the variable is modified conditionally - for cases where its initial value is falsy.

let username = '';

username ||= 'stranger';

/// Equivalent to:
username || (username = 'stranger');

From the example above, username is initialized with an empty string - a falsy value. Thus, when the OR assignment operator is applied as shown, the value of username will be overwritten by the right side operand.

Logical AND operator

Similar to the OR assignment operator, the AND assignment (&&=) operator updates a variable only when the left side operand is truthy. Otherwise, the variable would be left unchanged.

let isUserValidated = true;

isUserValidated &&= 'User is validated.';

// This would produce the same result as:
isUserValidated && (isUserValidated = 'User is validated.');

isUserValidated is modified from true to 'User is validated.' because true is truthy, so the right hand operand will be returned automatically.

Logical nullish assignment

The logical nullish assignment (??=) operator updates the value of a variable if the left side operand reduces to a nullish value. Conversely, the right side operand would be discarded.

let userEmail;
userEmail ??= 'test@mail.com';

// Same as:
userEmail ?? (userEmail = 'test@mail.com');

userEmail in the preceding code block is updated to a value of 'test@mail.com' since the left side operand evaluates to a nullish value.

Conclusion

In summary, logical assignment operators utilize short circuit evaluation to update a variable conditionally. This condition is tested on the initial value of the variable by the logical operation. The possible outcomes upon testing the condition include:

Success: the initial value of the variable is used and the right hand operand is ignored.
Failure: the right hand operand replaces the initial value of the variable.

Ayobami's Blog