在对象字面量中使用带有三元运算符的展开语法

Question

Consider following code, where one object is composed from two parts: values and their corresponding descriptions:

let flagConfigObj = {};

const features = {
  f1: {
    value: 1,
    type: 'type1'
  },
  f2: {
    value: 2,
    type: 'type2'
  }
};

let featuresDescription = {
  f1: {
    description: 'desc 1'
  },
  f2: {
    description: 'desc 2'
  }
};

Object.keys(features).forEach(key => {
  flagConfigObj[key] = {
    ...features[key],
    ...(featuresDescription[key] || { some: 'backup' })
  };
});

console.log(flagConfigObj);

As you might notice, when composite is constructed, there is || operator preventing form spreading non-existing object and replacing it with some default templates. And so, output for this code will be:

{ 
  f1: { value: 1, type: 'type1', description: 'desc 1' },
  f2: { value: 2, type: 'type2', description: 'desc 2' } 
}

But when corresponding description field in featuresDescription is missing, it's replaced to:

{ 
  f1: { value: 1, type: 'type1', description: 'desc 1' },
  f2: { value: 2, type: 'type2', some: 'backup' } 
}

The question

How to replace || syntax with ternary operator ?: ? I've tried some funny combinations like

featuresDescription[key] ? ...featuresDescription[key] : {some: 'backup'}
{featuresDescription[key]} ? ...featuresDescription[key] : {some: 'backup'}

But all of them gives syntax error, and I'm feeling now like just blindly randomizing positions of [,],},{,... instead of truly understanding it...

Any help as always is appreciated!

Answer 1

The spread syntax is part of the object initializer grammar but not part of the general expression grammar, so your entire ? : ? : has to be to the right:

 ... featuresDescription[key] ? featuresDescription[key] : { some: "backup" }

In this particular case, there's not any effective difference between this and the original with the simple ||. The expression

expr1 ? expr1 : expr2

means, "if expr1 evaluates to a "truthy" value, use its value; otherwise use the value of expr2". That is precisely the same as what

expr1 || expr2

means. (Well, ignoring possible side-effects of expr1 , which would be an even stronger incentive to using the simpler || form unless you're laying booby-traps for some future programmer.)

Answer 2

I think this would work

...(featuresDescription[key] ? featuresDescription[key] : { some: 'backup' })

full example:

 let flagConfigObj = {}; const features = { f1: { value: 1, type: 'type1' }, f2: { value: 2, type: 'type2' }, f3: { value: 3, type: 'type3' } }; let featuresDescription = { f1: { description: 'desc 1' }, f2: { description: 'desc 2' }, }; Object.keys(features).forEach(key => { flagConfigObj[key] = { ...features[key], ...(featuresDescription[key] ? featuresDescription[key] : { some: 'backup' }) }; }); console.log(flagConfigObj);

However, I still prefer using || as below

...(featuresDescription[key] || { some: 'backup' })

because it is simpler and not repetitive regarding featuresDescription[key]

Hope it helps

Answer 3

I think this might be the syntax you are looking for;

Object.keys(features).forEach(key => {
        flagConfigObj[key] = {
            ...features[key],
            ...(featuresDescription[key] ? featuresDescription[key] : {some: 'backup'})
    }
})

Answer 4

You could wrap the default expression in parenthese before spreading the object.

 let flagConfigObj = {}; const features = { f1: { value: 1, type: 'type1' }, f2: { value: 2, type: 'type2' } }; let featuresDescription = { f1: { description: 'desc 1' }, f2: { description: 'desc 2' } }; Object.keys(features).forEach(key => { flagConfigObj[key] = { ...features[key], ...(featuresDescription[key] || { some: 'backup' }) } }) console.log(flagConfigObj)