In Javascript how to conditionally add a member to an object

Question

I would like to create an object with a member added conditionally  The simple approach is   var a       if  someCondition      a b   5    Now  I would like to write a more idiomatic code  I am trying   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 handy solution   Update  I seek for a solution that could handle the general case with several 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

User · Answer

What about using Enhanced Object Properties and only set the property if it is truthy, e.g.:

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

So if the condition is not met it doesn't create the preferred property and thus you can discard it. See: http://es6-features.org/#ComputedPropertyNames

UPDATE: It is even better to follow the approach of Axel Rauschmayer in his blog article about 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'} : {})
};

Quite helped me a lot.

User · Answer

You can add all your undefined values with no condition and then use JSON stringify to remove them all    const person       name  undefined    age  22    height  null    const cleaned   JSON parse JSON stringify person        Contents of cleaned      cleaned          age  22       height  null

User · Answer

Using lodash library  you can use   merge  var a     merge           b  conditionB   4   undefined      c  conditionC   5   undefined        If conditionB is false  amp  conditionC is true  then a     c  5   If both conditionB  amp  conditionC are true  then a     b  4  c  5   If both conditionB  amp  conditionC are false  then a

User · Answer

If the goal is to have the object appear self-contained and be within one set of braces  you could try this   var a   new function          if  conditionB          this b   5       if  conditionC          this c   5       if  conditionD          this d   5

User · Answer

Define a var by let and just assign new property  let msg         to   hito email com       from   hifrom email com       subject   Contact form           if  file uploaded in form       the condition goes here     msg attachments        here  attachments  is the new property added to msg Javascript object                 content   attachment           filename   filename           type   mime type           disposition   attachment                        Now the msg become        to   hito email com       from   hifrom email com       subject   Contact form       attachments                    content   attachment           filename   filename           type   mime type           disposition   attachment                      In my opinion this is very simple and easy solution

User · Answer

Better answer  const a            someCondition    b  5

User · Answer

var a             condition    b  1           if condition is true  b  will be added      I hope this is the much efficient way to add an entry based on the condition  For more info on how to conditionally add entries inside an object literals

User · Answer

more simplified        const a             condition  amp  amp   b  1      if condition is true  b  will be added

User · Answer

With EcmaScript2015 you can use Object assign   Object assign a  conditionB     b  1     null                   conditionC     c  2     null                   conditionD     d  3     null      x000D   x000D  var a  conditionB  conditionC  conditionD  x000D  conditionC   true  x000D  a       x000D  Object assign a  conditionB     b  1     null  x000D                   conditionC     c  2     null  x000D                   conditionD     d  3     null   x000D   x000D  console log a   x000D   x000D   x000D    Some remarks    Object assign modifies the first argument in-place  but it also returns the updated object  so you can use this method in a bigger expression that further manipulates the object  Instead of null you could pass undefined or     with the same result  You could even provide 0 instead  because primitive values are wrapped  and Number has no own enumerable properties    Even more concise  Taking the second point further  you could shorten it as follows  as  Jamie has pointed out   as falsy values have no own enumerable properties  false  0  NaN  null  undefined      except document all    Object assign a  conditionB  amp  amp    b  1                     conditionC  amp  amp    c  2                     conditionD  amp  amp    d  3        x000D   x000D  var a  conditionB  conditionC  conditionD  x000D  conditionC    this is truthy   x000D  conditionD   NaN     falsy x000D  a       x000D  Object assign a  conditionB  amp  amp    b  1    x000D                   conditionC  amp  amp    c  2    x000D                   conditionD  amp  amp    d  3     x000D  console log a   x000D   x000D   x000D

User · Answer

I think your first approach to adding members conditionally is perfectly fine  I don t really agree with not wanting to have a member b of a with a value of undefined  It s simple enough to add an undefined check with usage of a for loop with the in operator  But anyways  you could easily write a function to filter out undefined members   var filterUndefined   function obj      var ret         for  var key in obj        var value   obj key       if  obj hasOwnProperty key   amp  amp  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 could also use the delete operator to edit the object in place

User · Answer

i prefere  using code this it  you can run this code const three       three  3       you can active this code  if you use object  three is null    const three       const number       one  1    two  2          three  amp  amp  three     four  4    console log number

User · Answer

If you wish to do 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

User · Answer

This has long been answered  but looking at other ideas I came up with some interesting derivative   Assign undefined values to the same property and delete it afterwards  Create your object using an anonymous constructor and always assign undefined members to the same dummy member which you remove at the very end  This will give you a single line  not too complex I hope  per member   1 additional 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

User · Answer

Using spread syntax with boolean  as suggested here  is not valid syntax  Spread can only be use with iterables   I suggest the following   const a            someCondition   b  5

User · Answer

I would do this  var a   someCondition     b  5           Edited with one line code version

User · Answer

Using lodash library  you can use   omitBy  var a     omitBy       b  conditionB   4   undefined      c  conditionC   5   undefined       IsUndefined    This results handy when you have requests that are optional  var a     omitBy       b  req body optionalA     if undefined  will be removed     c  req body optionalB       IsUndefined

User · Answer

const obj            condition   amp  amp   someprop  propvalue         otherprops     Live Demo    x000D   x000D  const obj     x000D        true   amp  amp   someprop  42   x000D        false   amp  amp   nonprop   foo    x000D             amp  amp   tricky   hello    x000D    x000D   x000D  console log obj   x000D   x000D   x000D

User · Answer

In pure Javascript  I cannot think of anything more idiomatic than your first code snippet   If  however  using the jQuery library is not 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 obtain the results you expect  if conditionB is false  then b will not exist in a

User · Answer

Perfomance test Classic approach const a       if  someCondition      a b   5   VS spread operator approach const a2            someCondition  amp  amp   b  5      Results  The classic approach is much faster  so take in consideration that the syntax sugaring is slower   testClassicConditionFulfilled         234 9ms testClassicConditionNotFulfilled        493 1ms testSpreadOperatorConditionFulfilled        2649 4ms testSpreadOperatorConditionNotFulfilled        2278 0ms   x000D   x000D  function testSpreadOperatorConditionFulfilled       const value   5     console time  testSpreadOperatorConditionFulfilled      for  let i   0  i  lt  200000000  i          let a               value  amp  amp   b  value                console timeEnd  testSpreadOperatorConditionFulfilled       function testSpreadOperatorConditionNotFulfilled       const value   undefined     console time  testSpreadOperatorConditionNotFulfilled      for  let i   0  i  lt  200000000  i          let a               value  amp  amp   b  value                console timeEnd  testSpreadOperatorConditionNotFulfilled       function testClassicConditionFulfilled       const value   5     console time  testClassicConditionFulfilled      for  let i   0  i  lt  200000000  i          let a           if  value          a b   value        console timeEnd  testClassicConditionFulfilled       function testClassicConditionNotFulfilled       const value   undefined     console time  testClassicConditionNotFulfilled      for  let i   0  i  lt  200000000  i          let a           if  value          a b   value        console timeEnd  testClassicConditionNotFulfilled       testClassicConditionFulfilled         234 9ms testClassicConditionNotFulfilled        493 1ms testSpreadOperatorConditionFulfilled        2649 4ms testSpreadOperatorConditionNotFulfilled        2278 0ms x000D   x000D   x000D

User · Answer

This is probably the shortest solution with ES6 console log         true  amp  amp   foo   bar         Output   foo  bar    console log         false  amp  amp   foo   bar         Output

User · Answer

Wrap into an object  Something like this is a bit cleaner   const obj        X   dataX      Y   dataY                 const list        A  true  amp  amp   dataA      B  false  amp  amp   dataB      C   A      B   amp  amp   dataC      D  2000  lt  100  amp  amp   dataD         E  conditionE  amp  amp   dataE         F  conditionF  amp  amp   dataF                 Object keys list  map prop   gt  list prop    obj prop    list prop    null    Wrap into an array  Or if you want to use Jamie Hill s method and have a very long list of conditions then you must write     syntax multiple times  To make it a bit cleaner  you can just wrap them into an array  then use reduce   to return them as a single object   const obj       X   dataX     Y   dataY                   true  amp  amp    A   dataA      false  amp  amp    B   dataB       A      B   amp  amp    C   dataC      2000  lt  100  amp  amp    D   dataD         conditionE  amp  amp    E   dataE         conditionF  amp  amp    F   dataF                reduce   v1  v2     gt        v1     v2         Or using map   function  const obj       X   dataX     Y   dataY              const array       true  amp  amp    A   dataA      false  amp  amp     B   dataB       A      B   amp  amp    C   dataC      2000  lt  100  amp  amp    D   dataD         conditionE  amp  amp    E   dataE         conditionF  amp  amp    F   dataF                map val   gt  Object assign obj  val

User · Answer

This is the most succinct solution I can come up with       var a       conditionB  amp  amp  a b   5  conditionC  amp  amp  a c   5  conditionD  amp  amp  a d   5

User · Answer

I think  InspiredJW did it with ES5  and as  trincot pointed out  using es6 is a better approach   But we can add a bit more sugar  by using the spread operator  and logical AND short circuit evaluation   const a            someCondition  amp  amp   b  5

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

Examples related to javascript