In Javascript, how to conditionally add a member to an object?

Question

I would like to create an object with an added member. Simple approach:

var a = {}; if (someCondition) ab = 5; 

Now I would like to write more idiomatic code. I'm trying to:

 a = { b: (someCondition? 5 : undefined) }; 

But now b is a member of a whose value is undefined . This is not the desired result.

Is there a convenient solution?

Update

I am looking for a solution that could handle a common case with multiple members.

 a = { b: (conditionB? 5 : undefined), c: (conditionC? 5 : undefined), d: (conditionD? 5 : undefined), e: (conditionE? 5 : undefined), f: (conditionF? 5 : undefined), g: (conditionG? 5 : undefined), }; 

Answer 1

In pure Javascript, I can't come up with anything more idiomatic than your first piece of code.

If, however, using the jQuery library is out of the question, then $. extend () should meet your requirements because, as the documentation says:

Undefined properties are not copied.

Therefore, you can write:

 var a = $.extend({}, { b: conditionB ? 5 : undefined, c: conditionC ? 5 : undefined, // and so on... }); 

And get the expected results (if conditionB is false , then b will not exist in a ).

Answer 2

I think @InspiredJW did this with ES5, and as @trincot pointed out, using es6 is the best approach. But we can add a little more sugar using the spread operator, and a logical AND short circuit:

 const a = { ...(someCondition && {b: 5}) } 

Answer 3

With EcmaScript2015 you can use Object.assign :

 Object.assign(a, conditionB ? { b: 1 } : null, conditionC ? { c: 2 } : null, conditionD ? { d: 3 } : null); 

 var a, conditionB, conditionC, conditionD; conditionC = true; a = {}; Object.assign(a, conditionB ? { b: 1 } : null, conditionC ? { c: 2 } : null, conditionD ? { d: 3 } : null); console.log(a); 

Some notes:

• Object.assign changes the first argument in place, but it also returns an updated object, so you can use this method in a larger expression that further controls the object.
• Instead of null you can pass undefined or {} with the same result. You could even provide 0 instead, because primitive values ​​are wrapped, and Number does not have its own enumerated properties .

Even more concise

Taking the second paragraph further, you can shorten it as follows (as @Jamie noted), since false values ​​do not have their own enumerated properties ( false , 0 , NaN , null , undefined , '' , except document.all ):

 Object.assign(a, conditionB && { b: 1 }, conditionC && { c: 2 }, conditionD && { d: 3 }); 

 var a, conditionB, conditionC, conditionD; conditionC = "this is truthy"; conditionD = NaN; // falsy a = {}; Object.assign(a, conditionB && { b: 1 }, conditionC && { c: 2 }, conditionD && { d: 3 }); console.log(a); 

Answer 4

Using extended syntax with a boolean value (as suggested here) is not a valid syntax. Propagation can only be used with iterations .

I suggest the following:

 const a = { ...(someCondition? {b: 5}: {} ) } 

Answer 5

 const obj = { ...(condition) && {someprop: propvalue}, ...otherprops } 

Answer 6

How about using the extended properties of an object and only set the property if it is true, for example:

 [isConditionTrue() && 'propertyName']: 'propertyValue' 

Therefore, if the condition is not met, it does not create a preferred property and, therefore, you can cancel it. See: http://es6-features.org/#ComputedPropertyNames

UPDATE: It's even better to follow Axel Rauschmeier's approach in his blog article on conditionally adding entries inside object literals and arrays ( http://2ality.com/2017/04/conditional-literal-entries.html ):

 const arr = [ ...(isConditionTrue() ? [{ key: 'value' }] : []) ]; const obj = { ...(isConditionTrue() ? {key: 'value'} : {}) }; 

They helped me a lot.

Answer 7

If the goal is for the object to be self-contained and within the same set of curly braces, you can try the following:

 var a = new function () { if (conditionB) this.b = 5; if (conditionC) this.c = 5; if (conditionD) this.d = 5; }; 

Answer 8

If you want to make this server side (without jquery) you can use lodash 4.3.0:

 a = _.pickBy({ b: (someCondition? 5 : undefined) }, _.negate(_.isUndefined)); 

---

And this works using lodash 3.10.1

 a = _.pick({ b: (someCondition? 5 : undefined) }, _.negate(_.isUndefined)); 

Answer 9

This has long been answered, but looking at other ideas, I came up with an interesting derivative:

Assign undefined values ​​to the same property and then delete it

Create your object using an anonymous constructor and always assign undefined members the same dummy element that you delete at the very end. This will give you one line (not too complicated, hopefully) per member + 1 extra line at the end.

 var a = new function() { this.AlwaysPresent = 1; this[conditionA ? "a" : "undef"] = valueA; this[conditionB ? "b" : "undef"] = valueB; this[conditionC ? "c" : "undef"] = valueC; this[conditionD ? "d" : "undef"] = valueD; ... delete this.undef; }; 

Answer 10

 var a = { ...(condition ? {b: 1} : '') // if condition is true 'b' will be added. } 

Hopefully this is a very effective way to add a condition based entry. Learn more about how to conditionally add entries inside object literals.

Answer 11

I would do it

 var a = someCondition ? { b: 5 } : {}; 

Edited with one version of string code

Answer 12

I think your first approach to adding members is conditional - that’s fine. I do not agree that I do not want to have a b of a member with an undefined value. It is simple enough to add an undefined check using a for loop with an in statement. But in any case, you can easily write a function to filter undefined members.

 var filterUndefined = function(obj) { var ret = {}; for (var key in obj) { var value = obj[key]; if (obj.hasOwnProperty(key) && value !== undefined) { ret[key] = value; } } return ret; }; var a = filterUndefined({ b: (conditionB? 5 : undefined), c: (conditionC? 5 : undefined), d: (conditionD? 5 : undefined), e: (conditionE? 5 : undefined), f: (conditionF? 5 : undefined), g: (conditionG? 5 : undefined), }); 

You can also use the delete operator to edit the object in place.

Answer 13

Using the lodash library, you can use _.omitBy

 var a = _.omitBy({ b: conditionB ? 4 : undefined, c: conditionC ? 5 : undefined, }, _.IsUndefined) 

This is useful if you have queries that are optional.

 var a = _.omitBy({ b: req.body.optionalA, //if undefined, will be removed c: req.body.optionalB, }, _.IsUndefined) 

Answer 14

You can add all your undefined values ​​without any conditions, and then use JSON.stringify to remove all of them:

 const person = { name:undefined, age:22, height:null } const cleaned = JSON.parse(JSON.stringify(person)); //cleaned = { // age:22, // height:null // } 

Answer 15

Wrap in object

Something like this is a little cleaner

  const obj = { X: 'dataX', Y: 'dataY', //... } const list = { A: true && 'dataA', B: false && 'dataB', C: 'A' != 'B' && 'dataC', D: 2000 < 100 && 'dataD', // E: conditionE && 'dataE', // F: conditionF && 'dataF', //... } Object.keys(list).map(prop => list[prop] ? obj[prop] = list[prop] : null) 

Wrap in an array

Or, if you want to use the Jamie Hill method and have a very long list of conditions, you have to write ... syntax several times. To make it a little cleaner, you can simply wrap them in an array and then use reduce() to return them as a single object.

 const obj = { X: 'dataX', Y: 'dataY', //... ...[ true && { A: 'dataA'}, false && { B: 'dataB'}, 'A' != 'B' && { C: 'dataC'}, 2000 < 100 && { D: 'dataD'}, // conditionE && { E: 'dataE'}, // conditionF && { F: 'dataF'}, //... ].reduce(( v1, v2 ) => ({ ...v1, ...v2 })) } 

Or using the map() function

 const obj = { X: 'dataX', Y: 'dataY', //... } const array = [ true && { A: 'dataA'}, false && { B: 'dataB'}, 'A' != 'B' && { C: 'dataC'}, 2000 < 100 && { D: 'dataD'}, // conditionE && { E: 'dataE'}, // conditionF && { F: 'dataF'}, //... ].map(val => Object.assign(obj, val)) 

Answer 16

Using the lodash library you can use _.merge

 var a = _.merge({}, { b: conditionB ? 4 : undefined, c: conditionC ? 5 : undefined, }) 

1. If the condition is false and the condition a = { c: 5 } true , then a = { c: 5 }
2. If both conditions a = { b: 4, c: 5 } & conditionC true , then a = { b: 4, c: 5 }
3. If both conditions B & conditionC false , then a = {}