Stopping Errors Before They Stop You: The Safe Assignment Operator (?=) and Handling Promises Gracefully

As JavaScript evolves, new features and proposals keep rolling in, aiming to make coding more efficient and error-proof. One such feature is the Safe Assignment Operator (?=), a proposed addition to the language. While we're still waiting for its official release, we can implement similar functionality today to safeguard our code from common issues like null or undefined values.

In this article, we’ll explore the ?= operator, build our own version using existing JavaScript, and introduce practical ways to handle promises more gracefully in asynchronous operations.

Understanding the Safe Assignment Operator (?=)

What is the ?= Operator?

The Safe Assignment Operator (?=) allows developers to assign a value to a variable only if the target is null or undefined. It’s a more concise way of saying, "Assign this value if the variable is empty."

Here's how it works:

let username = null;
username ?= "Shahar"; 
console.log(username); // Output: "Shahar"

In this case, the variable username gets assigned "Shahar" because its value was null. If username had an existing value, the operator would simply pass over the assignment.

Why It's Useful

The ?= operator simplifies code by reducing the need for explicit if checks or ternary operations to ensure safe assignment. However, this operator is still in the proposal stage within ECMAScript, meaning it could change before becoming part of the JavaScript language. You can track its development here.

Crafting a Safe Assignment Function

Rolling Out safeAssign

While we're waiting for ?= to become official, we can mimic its behavior today using a custom utility function called safeAssign. This function uses the nullish coalescing operator (??), which is already widely supported in modern environments.

Here’s our safeAssign function:

function safeAssign(target, value) {
  return target ?? value;
}

Example in Action

Let’s see how it works:

let username = undefined;
username = safeAssign(username, "Shahar");
console.log(username); // Output: "Shahar"

This is effectively what the ?= operator would do. If the variable is null or undefined, we assign it a value; otherwise, we leave it untouched.

Limitations of safeAssign

While safeAssign provides similar functionality to ?=, it has limitations:

• Simplicity: safeAssign is a utility function and cannot provide the same level of syntactic elegance as the native ?= operator. Overusing custom functions can lead to more verbose code.
• Performance: Although the performance impact of safeAssign is negligible in small-scale applications, native operators like ?= will likely be faster in larger-scale systems due to engine optimizations.
• Browser Support: The nullish coalescing operator (??) used in safeAssign is supported in most modern browsers and environments, but older environments may not support it without polyfills.

A Quick Comparison with Other Languages

Many other languages offer similar features to the proposed ?= operator:

• C# has the null-coalescing assignment operator (??=), which behaves similarly to JavaScript’s ?= proposal.
• Python uses the or keyword for safe assignments, where a = a or value is a common pattern to assign a value only if a is falsy.

These operators make handling potentially empty values more straightforward, reducing boilerplate code.

Handling Asynchronous Operations with safeAwait

Introducing safeAwait

When working with asynchronous operations in JavaScript, it’s easy to run into rejected promises or unexpected results. Instead of manually handling every rejection with .catch(), we can streamline the process using a custom function called safeAwait, which wraps promises in a cleaner, safer structure.

Here’s the safeAwait function:

async function safeAwait(promise, errorHandler) {
  try {
    const data = await promise;
    return [null, data]; // Success: No error, return the data
  } catch (error) {
    if (errorHandler) errorHandler(error); // Optional error handler
    return [error, null]; // Error occurred, return error with null data
  }
}

Example: Fetching Data with Error Handling

Let’s use safeAwait to fetch data from an API and handle potential errors:

async function getData() {
  const [error, response] = await safeAwait(
    fetch("https://api.example.com"),
    (err) => console.error("Request failed:", err)
  );

  if (error) return; // Exit if there's an error
  return response; // Return response if successful
}

In this example, safeAwait handles both the success and error cases, allowing the calling function to handle the result in a more predictable way.

Variations of safeAwait

We can also extend safeAwait for different use cases. For instance, here’s a version that retries the promise once before failing:

async function safeAwaitWithRetry(promise, errorHandler, retries = 1) {
  let attempt = 0;
  while (attempt <= retries) {
    const [error, data] = await safeAwait(promise, errorHandler);
    if (!error) return [null, data];
    attempt++;
  }
  return [new Error("Max retries reached"), null];
}

This variation retries the promise up to a specified number of times before throwing in the towel.

Best Practices for Error Handling in JavaScript

When working with asynchronous code, proper error handling is crucial. Here are some best practices:

1. Always handle rejected promises: Unhandled promise rejections can lead to crashes or undefined behavior. Use try/catch or .catch() to ensure promises are properly handled.
2. Centralize error handling: Utility functions like safeAwait allow you to centralize error handling, making it easier to manage and debug your code.
3. Graceful degradation: Ensure that your application can recover from errors gracefully without crashing or leaving the user in an undefined state.
4. Use custom error messages: When throwing errors, provide meaningful error messages to help with debugging.

Before and After: Clean Code with safeAssign and safeAwait

Here’s a quick comparison of how these utilities can clean up your code.

Without safeAssign:

if (user === null || user === undefined) {
  user = "Shahar";
}

With safeAssign:

user = safeAssign(user, "Shahar");

Without safeAwait:

try {
  const response = await fetch("https://api.example.com");
} catch (error) {
  console.error("Request failed:", error);
}

With safeAwait:

const [error, response] = await safeAwait(fetch("https://api.example.com"), (err) => console.error("Request failed:", err));

Conclusion

In summary, while the Safe Assignment Operator (?=) is still a proposal, we can replicate its behavior today using the safeAssign function for nullish values and safeAwait for more complex asynchronous operations. Both utilities simplify your code, making it more readable and maintainable.

Key Takeaways:

• The ?= operator simplifies safe assignments but is still in the proposal stage.
• You can replicate ?= functionality with safeAssign using the nullish coalescing operator (??), which is widely supported.
• For asynchronous operations, safeAwait provides a cleaner way to handle promise rejections and errors.
• Keep an eye on ECMAScript proposals for future updates.

By leveraging these patterns, you can handle errors like a pro and keep your code clean, readable, and safe.