The shortest way to conditional insert properties into an object literal

Hi, nice to meet you 😄!
You can find this article in my personal blog here.

Comments

[Marc Hanisch]

I'm a year to late at the party, but thank you very much for the good explanation. I was in search for exactly this feature and it is an elegant and modern solution!

[Andrea Simone Costa]

Thanks!

[evandrix]

~semplicity~ simplicity

[Tom Pegler]

For added fun with this, I tried a couple of things:

var state = 'tom';
var o = {
  name: 'test',
  state: state,
  ...( ( true && ( this.state = 'jamie' ) ) && false ) && { state } 

}

[Jeff Lindholm]

Personally, I would do it like ...(obj && { props: foo}) so it is obvious how the operators work, people who don't immediately know that && has precedence over ...won't read the code as easily.

[David Sharp]

This seems much nicer than my current const obj = { ...{ condition? { prop: value }: {} }}; 🤔

While it's not entirely clear at first glance how it works, I think the intent is clear enough for someone stumbling across it (excusing any bugs caused by gotchas)

[Cees Timmerman]

I know how && works, but wtf does ... do?

[Andrea Simone Costa]

Google rest/spread operators 😆

[Cees Timmerman]

It unpacks stuff, like * in Python, which "spread" could be a synonym for, but "rest operator"? googles Ah, as in "remaining parameters".

[Chad Kirby]

Mind blown!

[Stan Lindsey]

Basically, it evaluates like this:
...(condition && { prop: value }),

[Carlos]

Very helpful what Stan posted here. Parenthesis really help. Actually they are a default lint recommendation in this specific case. I think adding them to the code in the article would help a lot.

[Andrea Simone Costa]

But it wouldn't be the shortest anymore ;)

[Carlos]

hey man! I'm trying to help you here! lol...great article!

[Dale Anderson]

It's a useful trick! There are a bunch of others at blog.bitsrc.io/6-tricks-with-resti... (not my post), including a concise way to remove properties from objects.

[Konstantin Rouda]

Interesting trick, but what if our value is 0 which can be a valid value to use? So our code:

𝐯𝐚𝐫 𝐜𝐨𝐢𝐧𝐬 = 𝟎;
𝐯𝐚𝐫 𝐨𝐛𝐣 = {
  𝐧𝐚𝐦𝐞: "𝐉𝐨𝐡𝐧",
  ...𝐜𝐨𝐢𝐧𝐬 && { 𝐜𝐨𝐢𝐧𝐬𝐀𝐦𝐨𝐮𝐧𝐭: 𝐜𝐨𝐢𝐧𝐬 }
}

won't copy anything.

[Reply guy 🤷‍♂️]

Just make sure to internalize what JavaScript considers truthy and you won't think this is a "gotcha" anymore.

So in your specific case you'd probably want to do something like

const coins = 0;
const obj = {
  name: "John",
  ...typeof coins === "number" && !isNaN(coins) && {coins},
};

[Konstantin Rouda]

AFAIK, this is considered as a bad practice to use typeof to check the number, as NaN is also has type number (e.g. typeof NaN === "number"; // -> true). Moreover, typeof when used against number will return number, as a result, in lower case (i.e. not Number but number).

[Reply guy 🤷‍♂️]

Yeah the casing of number was just a typo. Adjusted it to check for NaN.

[tkane2000]

you could pass coins to a method that checks for false, null, and undefined only (or something along those lines)

[Andrea Simone Costa]

So there is no point to use the trick in this way if 0 is a valid amount as well.

Remember that on the left you put the condition, so you may write like the following:

𝐯𝐚𝐫 𝐜𝐨𝐢𝐧𝐬 = 𝟎;
𝐯𝐚𝐫 𝐨𝐛𝐣 = {
  𝐧𝐚𝐦𝐞: "𝐉𝐨𝐡𝐧",
  ...𝐜𝐨𝐢𝐧𝐬>=0 && { 𝐜𝐨𝐢𝐧𝐬𝐀𝐦𝐨𝐮𝐧𝐭: 𝐜𝐨𝐢𝐧𝐬 }
}