Imagine writing 15+ lines of code just to handle default values and conditional assignments, only to come back months later and spend an hour debugging because you couldn’t remember what all those if-statements were doing 😅

Sounds familiar? We’ve all been there! That’s why in this post, I’m going to show you how logical assignment operators in JavaScript can turn those verbose conditional assignments into elegant one-liners that are not only more readable but also safer and more maintainable.

What Are Logical Assignment Operators?

Logical assignment operators are a relatively new addition to JavaScript (ES2021) that combine logical operations (||, &&, ??) with assignment (=) to create powerful shorthand expressions. They’re like those 2-in-1 shampoo and conditioner bottles, but for your code – doing two jobs at once and saving you time!

These operators are especially useful when you need to check a variable’s value before potentially assigning a new one. Instead of writing multi-line conditional statements, you can now achieve the same result with a concise, single-line expression.

Let’s dive into the three logical assignment operators that JavaScript provides:

1. Logical OR Assignment (||=)

The logical OR assignment operator assigns a value to a variable only if that variable is falsy (false, 0, empty string ”, null, undefined, or NaN).

// Before: The old way
if (!user.theme) {
  user.theme = "light";
}

// After: With logical OR assignment
user.theme ||= "light";

This operator is perfect for setting default values when a variable hasn’t been initialized. However, it’s important to note that it will overwrite values like 0, '', or false, which might be intentionally set.

2. Logical AND Assignment (&&=)

The logical AND assignment operator assigns a value to a variable only if that variable is truthy (anything that’s not falsy).

// Before: The old way
if (user.isLoggedIn) {
  user.isLoggedIn = checkPermissions(user);
}

// After: With logical AND assignment
user.isLoggedIn &&= checkPermissions(user);

This is particularly helpful when you want to conditionally update a value based on an existing truthy value. An important thing to understand here is that the right-hand side is only evaluated if the left-hand side is truthy, and its actual result becomes the new value, even if that result is falsy.

For example:

let isEnabled = true;
isEnabled &&= false;
console.log(isEnabled); // Output: false

In this example, the original value (true) acts as a gate, but it’s the result of the right-hand expression (false) that becomes the new value.

3. Nullish Coalescing Assignment (??=)

The nullish coalescing assignment operator assigns a value to a variable only if that variable is nullish (null or undefined).

// Before: The old way
if (settings.timeout === null || settings.timeout === undefined) {
  settings.timeout = 3000;
}

// After: With nullish coalescing assignment
settings.timeout ??= 3000;

This operator is particularly useful when you want to assign defaults only if the value is truly missing (null or undefined), not just any falsy value. Unlike the logical OR assignment, it preserves valid values like 0, false, and empty strings ('').

Real-World Use Cases

Let’s explore some practical scenarios where logical assignment operators can significantly improve your code:

Default Component Props

When working with components (whether in React, Vue, or any other framework), you often need to set default values for props that haven’t been provided:

function renderUserProfile(props) {
  // Set defaults for missing props
  props.showAvatar ??= true;
  props.displayName ||= "Anonymous";
  props.role ??= "user";

  // Now use the props with their default values
  // ...
}

Here, the nullish coalescing assignment operator (??=) ensures that showAvatar and role get default values only if they’re null or undefined. The logical OR assignment (||=) sets a default display name if one wasn’t provided or was an empty string.

Form Data Validation

When processing form submissions, you often need to trim whitespace from inputs but only if they exist:

function processFormData(formData) {
  // Trim whitespace from text fields if they exist
  formData.username &&= formData.username.trim();
  formData.email &&= formData.email.trim().toLowerCase();

  // Set defaults for missing fields
  formData.notificationPreference ??= "email";

  // Continue processing...
}

The logical AND assignment (&&=) ensures we only attempt to call methods like trim() or toLowerCase() if the field actually has a value, preventing potential errors.

Configuration Management

When working with configuration objects that might be partially defined:

function initializeApp(config) {
  // Set essential defaults without overwriting provided values
  config.apiBase ??= "/api/v1";
  config.timeout ??= 5000;
  config.retryAttempts ??= 3;

  // Feature flags - use ||= because we want to default to false
  config.enableExperimentalFeatures ||= false;

  return config;
}

Things to Keep in Mind

While logical assignment operators are powerful, there are a few caveats to be aware of:

1. Side Effects

Because these operators short-circuit (they don’t evaluate the right-hand side if not needed), be careful with side effects:

let count = 0;
let value = null;

// The function call happens only if value is null/undefined
value ??= incrementAndReturn();

function incrementAndReturn() {
  count++;
  return "new value";
}

If you rely on the right-hand side always executing for its side effects, logical assignment operators might not behave as expected.

2. No Optional Chaining on the Left

You can’t use optional chaining (?.) on the left side of a logical assignment:

// This will cause a SyntaxError:
user?.settings ||= {};

This is because optional chaining returns a value, not a reference, and assignment requires a reference to the property itself.

3. Mutation vs. Immutability

Logical assignment operators modify the original object or variable directly. This can be useful in stateful logic but might cause issues in immutable workflows (like Redux). If you need to preserve state history, make sure to clone your objects first.

Browser Support

Logical assignment operators are part of the ECMAScript 2021 (ES12) specification and are supported in all modern browsers and Node.js versions 15.0.0 and above. If you need to support older environments, you’ll need to use transpilers like Babel.

Conclusion

Logical assignment operators are one of those small syntax additions that can have a big impact on your code’s readability and maintainability. By reducing conditional boilerplate code, they help you express your intent more clearly and reduce the chance of errors.

Next time you’re about to write an if statement just to conditionally assign a value, remember that there’s probably a logical assignment operator that can do the job in a single line!

That’s all folks! I hope this helps you become a better dev!

@khriztianmoreno 🚀