Dynamically adding a number of properties to a JavaScript object

Question

The scenario is to dynamically add some properties to JavaScript object at once.

For example, there is an object "data"

var data = {
    PropertyA: 1,
    PropertyB: 2,
    PropertyC: 3,
}

Then add extra data to "data"

if(true){
    var extraData = {
        PropertyD: 4,
        PropertyE: 5,
        PropertyF: 6,
    }
} else {
    var extraData = {
        PropertyX: 4,
        PropertyY: 5,
        PropertyZ: 6,
    }
}

What is the best way or the easiest to add "extraData" to "Data"?

See https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically — RaphaMex, Dec 04 '17 at 02:20
Possible duplicate of [How can I merge properties of two JavaScript objects dynamically?](https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) — ibrahim mahrir, Dec 04 '17 at 02:25
`Object.assign(data, condition? extraDataDEF: extraDataXYZ);`. — ibrahim mahrir, Dec 04 '17 at 02:30

score 1 · Answer 1 · answered Dec 04 '17 at 02:28

1

Object.assign(data, extraData);

If you don't want to mutate the value of data, you can do something like this instead:

var newData = Object.assign({}, data, extraData);

answered Dec 04 '17 at 02:28

Giovanni Lobitos

852
7
19

Carl Edwards · Accepted Answer · 2017-12-04T02:30:05.727

-1

The most modern approach would be to use ES6's spread:

const moreData = { ...data, extraData };

Alternatively this would be the traditional way of doing it:

var moreData = Object.assign({}, data, extraData);

edited Dec 04 '17 at 02:30

answered Dec 04 '17 at 02:24

Carl Edwards

13,826
11
57
119

Yes, this is ES6. – Carl Edwards Dec 04 '17 at 02:27
What library do I need to include for this? – Salomon Zhang Dec 04 '17 at 02:31
Adding to this answer, you can read about the difference between assign and spread here https://stackoverflow.com/questions/32925460/object-spread-vs-object-assign – Pato Salazar Dec 04 '17 at 02:31
You would use something like Babel: https://babeljs.io/docs/setup#installation. If that isn't an option I've provided an alternative solution in my updated answer. – Carl Edwards Dec 04 '17 at 02:33
@PatoSalazar Aside from the risk of mutation there really is no difference. – Carl Edwards Dec 04 '17 at 02:39
Object spread is not on ES6. Is currently in stage 3 https://github.com/tc39/proposal-object-rest-spread/blob/master/README.md – André Werlang Dec 04 '17 at 03:03
Should I even ask why there's downvotes on this answer...? smh – Carl Edwards Dec 04 '17 at 03:16
@CarlEdwards 1) It's not ES6, as suggested; 2) OP asked to add to `Data`, not create a new object with new properties. IRL these 2 are different things. 3) There's not explanation at all. – André Werlang Dec 04 '17 at 13:07

score -2 · Answer 3 · answered Dec 04 '17 at 02:25

Here is a good way to do that:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(function(){
       var data = {
            PropertyA: 1,
            PropertyB: 2,
            PropertyC: 3,
        };
        if(true){
            var extraData = {
                PropertyD: 4,
                PropertyE: 5,
                PropertyF: 6,
            };
        } else {
            var extraData = {
                PropertyX: 4,
                PropertyY: 5,
                PropertyZ: 6,
            };
        }

        var object = $.extend({}, data, extraData);

        console.log(object);

    });
</script>

Why bring in an entire library like jQuery when something like this can be easily done in Javascript? — Carl Edwards, Dec 04 '17 at 02:26
Good question! Why does jQuery even exist, javascript is there. — slon, Dec 04 '17 at 02:29

Dynamically adding a number of properties to a JavaScript object

3 Answers3