Javascript Operators - Combining Nullish Coalescing with Ternary

Question

So I have some code where I'm essentially trying to do an if, else if, else statement in one line, but based on nullishness instead of truthiness.

Say I have a boolean value "status" on a person object:

let person = {
  status: true
}

I want to show text based on the following conditions:

True: 'Verified'
False: 'Not Verified'
Doesn't exist: 'Loading...'

I could use the ternary operator like this:

person?.status ? 'Verified' : 'Not Verified'

But if the person object doesn't exist, or if the "status" field doesn't exist, it will return a falsey value.

If I use the nullish coalescing operator like this:

person?.status ?? 'Loading...'

I can get the desired result in very condensed and readable code, but there is no way to format the text without using a helper function.

Is there anyway to combine these into one line of readable code, or am I stuck having a write a helper function or using a longer line of code like this:

person?.status == null ? 'Loading...' : (person.status ? 'Verified' : 'Not Verified')

Maybe I'm being picky, but I'm just wondering if someone out there has a more optimal, condensed way of doing this.

Thanks for your help!

If the person object doesn't exist the optional chaining won't save you, it will throw an error. — pilchard
– pilchard, Commented Jul 20, 2021 at 12:08

VLAZ · Accepted Answer · 2021-07-20 12:20:24Z

2

I'm just wondering if someone out there has a more optimal, condensed way of doing this.

You have this backwards. More condensed is not more readable. The more operations are in one line the harder it is to figure out what it does:

a ?? b ? c ?? d?.e : f || x

Is much harder to parse mentally than if it wasn't all in one line. Among other things, you need to keep in mind the order of operations - does the OR mean (f || x) or is it OR-ing the entire expression up to there?

It will be resolved as (a ?? b ? c ?? d?.e : f) || x. Yet it hardly helps with evaluating this in your head.

The more optimal and readable way of writing this would be using regular if/else statements

let status;
if (person?.status == null)
    status = 'Loading...';
else if (person.status)
    status = 'Verified';
else
    status = 'Not Verified';

If needed, it can be encapsulated in a function.

function status(person) {
    if (person?.status == null)
        return 'Loading...';
    if (person.status)
        return 'Verified';

    return 'Not Verified';
}

If you really need something short to use, you can have a simple lookup table that resolves the different possible values:

const lookup = {
    "null" : 'Loading...',
    "true" : 'Verified',
    "false": 'Not Verified',
}

/* ... */

const status = lookup[person?.status ?? null];

Also possible: drop the nullish coalescing operator and encode the undefined in the lookup:

const lookup = {
    "null"      : 'Loading...',
    "undefined" : 'Loading...',
    "true"      : 'Verified',
    "false"     : 'Not Verified',
}

/* ... */

const status = lookup[person?.status];

This is mostly irrelevant but somewhat fun. You can combine a lookup and a function to make a fairly minimal function that does not use if/else or switch-es to determine what to return:

const status = person => ({
    "null"      : 'Loading...',
    "undefined" : 'Loading...',
    "true"      : 'Verified',
    "false"     : 'Not Verified',
})[person?.status];

console.log( status() );                //Loading...
console.log( status(null) );            //Loading...
console.log( status({}) );              //Loading...
console.log( status({status: true}) );  //Verified
console.log( status({status: false}) ); //Not Verified

It is not the best practice but can be handy occasionally. It can aid prototyping things. It is then an easy refactor to extract the object out of the function which in turn would allow you to load it from configuration, for example. In this case it might help with translating this to different languages if you have something like

{
  'english': {
        "null"      : 'Loading...',
        "undefined" : 'Loading...',
        "true"      : 'Verified',
        "false"     : 'Not Verified',
    },
  'pig-lating': {
        "null"      : 'Oadinglay...',
        "undefined" : 'Oadinglay...',
        "true"      : 'Erifiedvay',
        "false"     : 'Otnay Erifiedvay',
    }
}

edited Jul 20, 2021 at 12:20

answered Jul 20, 2021 at 12:04

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pilchard Over a year ago

The function based examples are the only ones that completely guard against an error being thrown as they guarantee that person has been declared (in this case as a parameter). Otherwise the optional chaining is not sufficient to guard against this. person?. requires that person has at least been declared.

VLAZ Over a year ago

@pilchard in general, if a variable might be declared or not that is a huge problem. I would definitely not advice working with something that might be undeclared. Calling status(person) will still throw an error if person is undeclared as it still does a read and the variable still doesn't exist.

pilchard Over a year ago

I agree, but the OP specifically mentions 'But if the person object doesn't exist,' which seems to point to their misunderstanding of optional chaining. Otherwise, completely agree with your answer!

VLAZ Over a year ago

@pilchard OP uses the same term for the property. And also seems like OP's current implementation doesn't throw errors. Thus I assume OP means "exist" as in "it's not null or undefined". Or in other words "the variable has been assigned".

Collectives™ on Stack Overflow

Javascript Operators - Combining Nullish Coalescing with Ternary

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related