Is there a better way to add optional values to an object?

Viewed 73

Currently I'm doing the optional addition using something like this

  ...(!!providerId && { providerId }),
  ...(!!practiceId && { practiceId }),

Is there some shorthand logic to replace this logic in a graceful manner like

 yield createRemarkRequest.post(PATIENT_REMARK, {
  patientId,
  ?providerId,
  ?practiceId,
  noteTypeCode,
  note,
})
3 Answers

What you're doing is fine (assuming you don't need to include 0 or "", etc.; if you do, you'll want something other than a !! check). It relies on the fact there aren't any own, enumerable properties on Boolean objects, but that's okay, there aren't. :-) I've definitely done that in some code, though not frequently.

But it might be clearer just to make it explicit:

const appropriateNameHere = {
    patientId,
    noteTypeCode,
    note,
};
if (providerId) {
    appropriateNameHere.providerId = providerId;
}
if (practiceId) {
    appropriateNameHere.practiceId = practiceId;
}
yield createRemarkRequest.post(PATIENT_REMARK, appropriateNameHere);

(That also makes debugging a bit easier.)

Or if createRemarkRequest.post ignores undefined property values, you could do:

yield createRemarkRequest.post(PATIENT_REMARK, {
    patientId,
    providerId: providerId ? providerId : undefined,
    practiceId: practiceId ? practiceId : undefined,
    noteTypeCode,
    note,
});

There is Nullish coalescing operator in JavaScript.

You can call your function like below

yield createRemarkRequest.post(PATIENT_REMARK, {
  patientId,
  providerId??null, //null or whatever value you want to pass
  practiceId??null,
  noteTypeCode,
  note,
})

The key would be to use variable || undefined

yield createRemarkRequest.post(PATIENT_REMARK, {
  patientId,
  providerId: providerId || undefined,
  practiceId: practiceId || undefined,
  noteTypeCode,
  note,
})

Be care, that conditional doesn't work with empty arrays or empty objects as a value. Example:

const resultValueOption3 = {
    propZero: propZero || undefined,
    propNull: propNull || undefined,
    propEmptyArray: propEmptyArray || undefined,
    propEmptyObject: propEmptyObject || undefined,
    propEmptyString: propEmptyString || undefined,
    propFalse: propFalse || undefined,
    propTrue: propTrue || undefined,
  };

result: {"propEmptyArray":[],"propEmptyObject":{},"propTrue":true}

Finally, I write the whole code with multiple combinations and the results:

export function Question11() {

  const propZero = 0;
  const propNull = null;
  const propEmptyArray = [];
  const propEmptyObject = {};
  const propEmptyString = "";
  const propFalse = false;
  const propTrue = true;

  const resultValueOption1 = {
    propZero: propZero ?? null,
    propNull: propNull ?? null,
    propEmptyArray: propEmptyArray ?? null,
    propEmptyObject: propEmptyObject ?? null,
    propEmptyString: propEmptyString ?? null,
    propFalse: propFalse ?? null,
    propTrue: propTrue ?? null,
  };

  const resultValueOption2 = {
    propZero: propZero ?? undefined,
    propNull: propNull ?? undefined,
    propEmptyArray: propEmptyArray ?? undefined,
    propEmptyObject: propEmptyObject ?? undefined,
    propEmptyString: propEmptyString ?? undefined,
    propFalse: propFalse ?? undefined,
    propTrue: propTrue ?? undefined,
  };

  const resultValueOption3 = {
    propZero: propZero || undefined,
    propNull: propNull || undefined,
    propEmptyArray: propEmptyArray || undefined,
    propEmptyObject: propEmptyObject || undefined,
    propEmptyString: propEmptyString || undefined,
    propFalse: propFalse || undefined,
    propTrue: propTrue || undefined,
  };

  const resultValueOption4 = {
    propZero: propZero || null,
    propNull: propNull || null,
    propEmptyArray: propEmptyArray || null,
    propEmptyObject: propEmptyObject || null,
    propEmptyString: propEmptyString || null,
    propFalse: propFalse || null,
    propTrue: propTrue || null,
  };

  return (
    <div>
      <div>Option1</div>
      <div>{JSON.stringify(resultValueOption1)}</div>
      <div>Option2</div>
      <div>{JSON.stringify(resultValueOption2)}</div>
      <div>Option3</div>
      <div>{JSON.stringify(resultValueOption3)}</div>
      <div>Option4</div>
      <div>{JSON.stringify(resultValueOption4)}</div>
    </div>
  );
}

/*
  results:
    Option1
     {"propZero":0,"propNull":null,"propEmptyArray":[],"propEmptyObject":{},"propEmptyString":"","propFalse":false,"propTrue":true}
    Option2
     {"propZero":0,"propEmptyArray":[],"propEmptyObject":{},"propEmptyString":"","propFalse":false,"propTrue":true}
    Option3
     {"propEmptyArray":[],"propEmptyObject":{},"propTrue":true}
    Option4
     {"propZero":null,"propNull":null,"propEmptyArray":[],"propEmptyObject":{},"propEmptyString":null,"propFalse":null,"propTrue":true}
*/

I hope I've helped you.

Related