Is there a shorter syntax for conditionally setting properties in an object?

Question

I'm trying to achieve a solution to this problem that has both form and function. Below are two examples of the problem, one is dysfunctional but has the level of form I'd like to achieve, and the other is functional but tedious.

const foo = "Spam";
const bar = () => "Ham";
const qux = (bool) => bool ? "Eggs" : "Beans";

// This is roughly the level of succintless I'd like to achieve
function genObjectPretty(request) { 
  return {
    foo: request.foo && foo,
    bar: request.bar && bar(),
    qux: request.qux && qux(true),
  }
}

console.log("BAD results, with SHORT code.  (bar should not be included)")
console.log(genObjectPretty({foo: true, qux: true}));


// This is the working code which I'd like to make less verbose
function genObjectFunctional(request) { 
  const out = {};
  if (request.foo) { out.foo = foo; }
  if (request.bar) { out.bar = bar(); }
  if (request.qux) { out.qux = qux(true); }
  return out;
}

console.log("GOOD results, but LONG code")
console.log(genObjectFunctional({foo: true, qux: true}));

The example above is a very shortened version of what I'm doing, including only 3 properties. In practice, I have many more, so the amount of if(thing) { this = that } is getting... not out of hand, but ugly. I'd like it to be less hairy looking.

Anyways, are there any js tricks for conditionally not setting properties of an object?

I'm open to using helper functions, or having a few lines at the end. Like I said, in practice, it's not just 3 lines I'm trying to clean up.

in particular shows trickier way to achieve [`this answer`](https://stackoverflow.com/a/55396398/9624435), but you should keep your code as readable as possible — Code Maniac, Sep 15 '19 at 18:00

Nina Scholz · Accepted Answer · 2019-09-15T18:20:14.493

5

You could spread undefined/false or take an object with the wanted property/value. The result is either no property or the wanted property with a value.

function genObjectPretty(request) { 
    return {
        foo: request.foo && foo,
        ...request.bar && { bar: bar() },
        qux: request.qux && qux(true),
    };
}

const foo = "Spam";
const bar = () => "Ham";
const qux = (bool) => bool ? "Eggs" : "Beans";

console.log(genObjectPretty({ foo: true, qux: true }));

edited Sep 15 '19 at 18:20

answered Sep 15 '19 at 17:53

Nina Scholz

376,160
25
347
392

This answer has a similar sytnax, though slightly improved IMO. https://stackoverflow.com/questions/11704267/in-javascript-how-to-conditionally-add-a-member-to-an-object/51200448#51200448 – Seph Reed Sep 15 '19 at 18:12

Is there a shorter syntax for conditionally setting properties in an object?

1 Answers1