How can we leverage the nullish coalescing operator (`??`) when destructuring object properties?

Question

How can we leverage the nullish coalescing operator (`??`) when destructuring object properties?

When working with ReactJS, I often find myself using a common pattern of destructuring props:

export default function Example({ ExampleProps }) {
  const {
    content,
    title,
    date,
    featuredImage,
    author,
    tags,
  } = ExampleProps || {};

To add an extra layer of safety, I can set default values during the destructuring process:

export default function Example({ ExampleProps }) {
  const {
    content = "",
    title = "Missing Title",
    date = "",
    featuredImage = {},
    author = {},
    tags = [],
  } = ExampleProps || {};

However, after transitioning to TypeScript strict mode, I encountered some difficulties. My props are typed using GraphQl codegen, and most properties are wrapped in a Maybe<T> type, resulting in values like actualValue | null | undefined when unwrapped.

To address cases where the value is undefined, I used default values

({ maybeUndefined = ""} = props)

. However, issues arose with null values slipping through, leading to numerous instances of optional chaining like tags?.nodes?.length.

This reliance on optional chaining made me apprehensive, especially considering discussions about its drawbacks highlighted in articles such as The Costs of Optional Chaining.

I am now seeking a pattern, potentially utilizing the ?? operator, that satisfies the TS compiler while reducing the need for lengthy chains such as very?.long?.optional?.chains.

javascript typescript optional-chaining nullish-coalescing

Answer 1

Answer №1

There are two potential approaches to consider:

Implement nullish coalescing property-by-property
Utilize a utility function

Property by Property Method

This method involves checking each individual property, which can be quite tedious:

// Default `ExampleProps` here −−−−−−−−−−−−−−−vvvvv
export default function Example({ ExampleProps = {} }) {
    // Perform nullish coalescing operation for each item
    const content = ExampleProps.content ?? "";
    const title = ExampleProps.title ?? "Missing Title";
    const date = ExampleProps.date ?? "";
    const featuredImage = ExampleProps.featuredImage ?? {},
    const author = ExampleProps.author ?? {},
    const tags = ExampleProps.tags ?? [];
    // ...

Utility Function Approach

Alternatively, you can use a utility function like the one below to convert null values to undefined, allowing you to set defaults during destructuring:

type NullToUndefined<Type> = {
    [key in keyof Type]: Exclude<Type[key], null>;
}

The utility function itself could look something like this:

function nullToUndefined<
    SourceType extends object,
    ResultType = NullToUndefined<SourceType>
>(object: SourceType) {
    return Object.fromEntries(
        Object.entries(object).map(([key, value]) => [key, value ?? undefined])
    ) as ResultType;
}

An alternative implementation that may offer better runtime performance:

function nullToUndefined<
    SourceType extends object,
    ResultType = NullToUndefined<SourceType>
>(object: SourceType) {
    const source = object as {[key: string]: any};
    const result: {[key: string]: any} = {};
    for (const key in object) {
        if (Object.hasOwn(object, key)) {
            result[key] = source[key] ?? undefined;
        }
    }
    return result as ResultType;
}

Keep in mind that Object.hasOwn is a newer feature, but can easily be polyfilled or substituted with

Object.prototype.hasOwn.call(object, key)

.

(Please note that some type assertions are applied within the nullToUndefined function. For a small utility function like this, it's generally an acceptable trade-off assuming clear input and output definitions.)

Finally, when using this approach:

export default function Example({ ExampleProps }) {
    const {
        content = "",
        title = "Missing Title",
        date = "",
        featuredImage = {},
        author = {},
        tags = [],
    } = nullToUndefined(ExampleProps || {});
    //  ^^^^^^^^^^^^^^^^−−−−−−−−−−−−−−−−−−^
    // ...

Playground link

Answer 2

There are two potential approaches to consider:

Implement nullish coalescing property-by-property
Utilize a utility function

Property by Property Method

This method involves checking each individual property, which can be quite tedious:

// Default `ExampleProps` here −−−−−−−−−−−−−−−vvvvv
export default function Example({ ExampleProps = {} }) {
    // Perform nullish coalescing operation for each item
    const content = ExampleProps.content ?? "";
    const title = ExampleProps.title ?? "Missing Title";
    const date = ExampleProps.date ?? "";
    const featuredImage = ExampleProps.featuredImage ?? {},
    const author = ExampleProps.author ?? {},
    const tags = ExampleProps.tags ?? [];
    // ...

Utility Function Approach

Alternatively, you can use a utility function like the one below to convert null values to undefined, allowing you to set defaults during destructuring:

type NullToUndefined<Type> = {
    [key in keyof Type]: Exclude<Type[key], null>;
}

The utility function itself could look something like this:

function nullToUndefined<
    SourceType extends object,
    ResultType = NullToUndefined<SourceType>
>(object: SourceType) {
    return Object.fromEntries(
        Object.entries(object).map(([key, value]) => [key, value ?? undefined])
    ) as ResultType;
}

An alternative implementation that may offer better runtime performance:

function nullToUndefined<
    SourceType extends object,
    ResultType = NullToUndefined<SourceType>
>(object: SourceType) {
    const source = object as {[key: string]: any};
    const result: {[key: string]: any} = {};
    for (const key in object) {
        if (Object.hasOwn(object, key)) {
            result[key] = source[key] ?? undefined;
        }
    }
    return result as ResultType;
}

Keep in mind that Object.hasOwn is a newer feature, but can easily be polyfilled or substituted with

Object.prototype.hasOwn.call(object, key)

.

(Please note that some type assertions are applied within the nullToUndefined function. For a small utility function like this, it's generally an acceptable trade-off assuming clear input and output definitions.)

Finally, when using this approach:

export default function Example({ ExampleProps }) {
    const {
        content = "",
        title = "Missing Title",
        date = "",
        featuredImage = {},
        author = {},
        tags = [],
    } = nullToUndefined(ExampleProps || {});
    //  ^^^^^^^^^^^^^^^^−−−−−−−−−−−−−−−−−−^
    // ...

Playground link

How can we leverage the nullish coalescing operator (`??`) when destructuring object properties?

Answer №1

Property by Property Method

Utility Function Approach

Similar questions

The jQuery included does not function properly in production mode and results in an error stating that it is not a function

In Typescript, we can streamline this code by assigning a default value of `true` to `this.active` if `data.active

What is the best way to manage destroyed objects?

Creating multiple instances of an object

The route seems to be downloading the page instead of properly rendering it for display

Tips on displaying the menu only when scrolling through the webpage

MUI: Transforming the uncontrolled value state of Select into a controlled one with a new component

Locating the chosen value from a dropdown within a div: A step-by-step

Eliminate the classes that were inserted through Jquery

Mapped TypeScript type requiring scalar properties and allowing optional objects

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

Optimizing Midnight UTC+0 Setting in JavaScript Date Functions

Retrieve the attribute from the element that is in the active state

In Ruby on Rails, ensure to trigger the ajax:beforeSend and ajax:complete events when using the link_to method with the remote

Tips for displaying an input element across multiple cells in ObservableHQ

The default selected item in Material Select does not function properly on the second attempt

Troubleshooting: Why is Spring MVC failing to return results on ajax call?

Tips for adjusting the default selection in a second dropdown menu

Enhancing the visual display of a webpage using AngularJS

Determine the employees' salaries and display any salaries that are below 5000