The Web Dev

When it comes to writing clean, concise code, every developer knows that the more you can reduce redundancy, the better.

In ECMAScript 2021 (ES12), JavaScript introduced Logical Assignment Operators, which combine logical operators with assignment operations. These new operators allow developers to streamline their code and make it more expressive.

In this article, we’ll explore these new operators in-depth and demonstrate how they can simplify your code, with real-world examples.

You’ll see how they can help reduce boilerplate code and improve readability in your day-to-day JavaScript development.

What Are Logical Assignment Operators?

The new Logical Assignment Operators are a combination of logical operators (&&, ||, and ??) and the assignment operator (=). They allow you to perform a logical operation and an assignment in a single, concise step.

There are three logical assignment operators:

Logical AND Assignment (&&=)

Logical OR Assignment (||=)

Logical Nullish Assignment (??=)

Each of these operators operates based on the result of a logical operation and assigns the result to the left-hand variable.

Logical AND Assignment (&&=)

The &&= operator assigns a value to a variable only if the variable is truthy. If the variable is falsy, the assignment doesn’t occur.

Syntax:

x &&= y;

This is equivalent to:

x = x && y;

Example 1: Simple Use Case

Suppose you have a variable that should only be updated if it’s already truthy:

let user = { name: "John" };

// Only update the name if the user object is not null or undefined
user &&= { name: "Jane" };

console.log(user); // { name: "Jane" }

In this case, user is an object, so the assignment happens. If user had been null or undefined, the assignment would have been skipped.

Example 2: Skipping Falsy Values

let config = {
  debug: false
};

// Update `debug` only if it's truthy
config.debug &&= true;

console.log(config.debug); // false (unchanged)

If config.debug had been true, it would have been updated to true, but since it was already false, no change happens.

Logical OR Assignment (||=)

The ||= operator assigns a value only if the left-hand side is falsy. This can be particularly useful for setting default values in a concise manner.

Syntax:

x ||= y;

This is equivalent to:

x = x || y;

Example 1: Setting Default Values

A common use case for ||= is setting default values for variables that may be undefined, null, or falsy.

let username = "";

// Set a default username if the current one is falsy (empty string in this case)
username ||= "Guest";

console.log(username); // "Guest"

Here, the empty string is falsy, so the value “Guest” is assigned to username.

Example 2: Simplifying Code Logic

let preferences = { theme: null };

// Use default theme if not set
preferences.theme ||= "light";

console.log(preferences.theme); // "light"

In this case, if preferences.theme were null, it would be updated to “light”. If it already had a value (even an empty string or false), it would stay the same.

Logical Nullish Assignment (??=)

The ??= operator is similar to the logical OR assignment (||=), but it only assigns a value when the left-hand side is null or undefined, not other falsy values like 0, NaN, or “”.

Syntax:

x ??= y;

This is equivalent to:

x = x ?? y;

Example 1: Defaulting Only When Null or Undefined

let user = { name: null };

// Only update `name` if it's null or undefined
user.name ??= "Anonymous";

console.log(user.name); // "Anonymous"

Here, the name property is null, so the assignment happens. If it had been an empty string, 0, or false, the value would not have been changed.

Example 2: Avoiding Unnecessary Changes

let config = { timeout: 0 };

// Don't overwrite existing value if not null or undefined
config.timeout ??= 5000;

console.log(config.timeout); // 0 (unchanged)

Since timeout is 0 (which is a falsy value but not null or undefined), the assignment doesn’t take place.

Why Use Logical Assignment Operators?

Conciseness: These operators help reduce repetitive code, making assignments cleaner and more expressive.

Readability: By combining logical operations and assignments, you can convey your intent more directly.

Performance: Although the performance improvement is minimal, using these operators in specific scenarios can reduce unnecessary operations (e.g., redundant checks or assignments).

Real-World Example: Dynamic Form Validation

Consider a scenario where you’re working with a dynamic form. You want to set default values for form fields only if they are missing or falsy, but not overwrite the user’s input if it’s already provided.

Code:

let formData = { email: "", username: null, phone: undefined };

// Set defaults only if values are null or undefined
formData.email ||= "user@example.com";
formData.username ??= "GuestUser";
formData.phone ??= "123-456-7890";

console.log(formData);
/* Output:
{
  email: "user@example.com",
  username: "GuestUser",
  phone: "123-456-7890"
}
*/

Here, the logical assignment operators ensure that only missing or falsy values are updated with default values, keeping the user’s input intact.

Conclusion

JavaScript’s Logical Assignment Operators provide a clean and efficient way to simplify conditional assignments.

With &&=, ||=, and ??=, you can streamline your code, making it more readable and less prone to errors.

Whether you’re dealing with default values, conditional updates, or just trying to write more expressive code, these operators can save you valuable time and improve the quality of your codebase.

As a full-stack developer, being up-to-date with these new JavaScript features helps you write more elegant and efficient code, ultimately improving the performance and maintainability of your applications.

Asynchronous programming is a core part of JavaScript development, especially when dealing with tasks like network requests, file operations, or any I/O-bound tasks.

But until recently, writing asynchronous code at the top level of a module wasn’t as straightforward as it could be. Developers had to wrap await in an async function, even for the simplest operations.

Enter Top-Level Await, a feature introduced in ECMAScript 2022 (ES13), which allows you to use await directly at the top level of your JavaScript modules.

This seemingly small change brings significant improvements to the language, making asynchronous code cleaner, more intuitive, and easier to reason about.

In this article, we’ll explore Top-Level Await, how it works, the problems it solves, and showcase real-world examples of how you can take advantage of this powerful feature in your projects.

What is Top-Level Await?

In previous versions of JavaScript, await could only be used inside an async function. If you wanted to use await outside of a function (such as at the top level of your module), you had to wrap it in an async function. This added unnecessary boilerplate and made your code harder to follow.

With Top-Level Await, you can now use await directly at the module’s top level, making asynchronous operations more seamless and reducing the need for additional function wrappers.

The Key Difference

Without Top-Level Await:

// This required wrapping async code in a function.
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

With Top-Level Await:

// No need to wrap in a function anymore.
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

In this example, the asynchronous fetch operation is now directly accessible at the top level of the module, improving readability and simplifying the code structure.

Why Top-Level Await Matters

Cleaner, More Readable Code

One of the most significant benefits of Top-Level Await is the reduction in boilerplate code. As we saw in the example above, there’s no need to wrap asynchronous calls in an async function when using await. This not only makes your code more concise but also makes it easier to understand.

Better for Modular Code

In a module-based JavaScript environment (like when working with ES modules),

Top-Level Await helps streamline asynchronous logic at the module level. You no longer need to manage asynchronous operations inside a separate function just to await a promise.

This allows you to write asynchronous code directly where it belongs — at the top level of the module, reducing the need for excessive nesting and improving the clarity of your codebase.

Simplified Error Handling

With Top-Level Await, error handling becomes simpler. You no longer need to manage promise rejection inside an async function. Instead, you can use try…catch directly at the top level of your module to handle errors in a clean, non-nested way.

How Does Top-Level Await Work?

Asynchronous Modules

Top-Level Await only works in modules (i.e., files that are imported using the import keyword). Traditional scripts won’t support Top-Level Await, so to use this feature, you need to use ES Modules.

To ensure you’re working with an ES module, make sure your file has a .mjs extension or add “type”: “module” in your package.json.

Example of Using Top-Level Await in a Module

// app.mjs

// Awaiting a network request at the top level of the module
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const todo = await response.json();

console.log(todo);

Important Notes: Top-Level Await only works in ES modules.

The module’s execution is paused until the await resolves, meaning that other code in the module won’t run until the awaited promises are resolved.

Modules that use Top-Level Await must be loaded asynchronously. This means the file will be fetched and parsed as a module, not as a traditional script.

Real-World Example: Fetching API Data One of the most common use cases for Top-Level Await is fetching data from an API, such as when you’re loading data for a web page. Here’s how Top-Level Await can simplify this process.

Without Top-Level Await (Old Way)

// app.js
async function loadData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

loadData();

With Top-Level Await (New Way)

// app.mjs (ES module)
try {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  console.log(posts);
} catch (error) {
  console.error('Error fetching data:', error);
}

In this updated code, you no longer need to wrap the await calls inside an async function. The code is simpler, and we directly handle the asynchronous operations.

Key Considerations When Using Top-Level Await

Error Handling

Even though Top-Level Await simplifies your code, it’s still important to manage errors effectively. Since the module is paused while awaiting the promise, a failure in one asynchronous call can block the entire module. This means you must always handle rejections using try…catch blocks.

try {
  const data = await fetchDataFromApi();
  console.log(data);
} catch (error) {
  console.error("Failed to fetch data:", error);
}

Module Loading Order

Since the execution of your module is paused until the awaited promise resolves, ensure that you manage dependencies carefully. If your module depends on several promises, they may run in sequence, potentially introducing delays in loading other resources.

To mitigate this, consider using concurrent promises when possible.

// Concurrently fetching two resources
const [userData, postData] = await Promise.all([
  fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json()),
  fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json())
]);

console.log(userData, postData);

When Should You Use Top-Level Await?

While Top-Level Await is a fantastic feature for simplifying asynchronous code, it’s not always appropriate for every situation. Here’s when it’s most beneficial:

Fetching Data or Resources at the Module Level

Top-Level Await works great when you need to fetch data or resources before running any logic in your module.

Simplifying Module-Scoped Asynchronous Logic

If your module is self-contained and doesn’t rely on external scripts or functions, Top-Level Await is perfect for handling asynchronous code in a natural way.

Keeping Code Clean and Readable

If you want to avoid nested async functions and make your module more concise and readable, Top-Level Await can significantly reduce complexity.

Conclusion

Top-Level Await is a powerful feature that brings JavaScript closer to a more synchronous-like experience when working with asynchronous code.

It simplifies your code, reduces boilerplate, and enhances readability, all while preserving the non-blocking nature of JavaScript.

As a full-stack developer, embracing this feature will help you write cleaner, more intuitive code when dealing with asynchronous operations.

Whether you’re fetching data, loading resources, or working with dynamic imports, Top-Level Await is an excellent tool in your JavaScript toolkit.

By keeping up with the latest JavaScript features like this, you can stay ahead of the curve, build more efficient applications, and make your code more maintainable.