37

I want to add multiple attributes to an existing object with existing attributes. Is there a more concise way than one line per new attribute?

myObject.name = 'don';
myObject.gender = 'male';

Everything on MDN shows how to do new objects with bracket notation, but not existing objects: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects

1
  • 2
    You could make a function that receives your object and an object with the new props/values, and enumerates the new object, updating the old one. That'll be a little more concise. update(obj, {name:"don", gender:"male"}) Commented May 7, 2013 at 19:49

6 Answers 6

55

In ES6/ ES2015 you can use the Object.assign method

let obj = {key1: true};
console.log('old obj: ', obj);
let newObj = {key2: false, key3: false};

Object.assign(obj, newObj);
console.log('modified obj: ', obj);

Sign up to request clarification or add additional context in comments.

Comments

23

I'm not sure if that's helpful, but there is a trick using JS ES6 spread syntax:

let obj = {a: 1, b: 2};
obj = {...obj, b: 3, c: 4};
console.log(obj); // {a: 1, b: 3, c: 4}

You can try to use this somehow... In general, that's a single liner to add or override object properties using js destructuring method.

Edit: Notice that the placement of ...obj in the new object is cruicial, as placing it first would allow overriding it with the following params (b: 3, c: 4 in my example), and placing it last will give priority to the members that are already in the object.

1 Comment

You can improve your answer by stating that your example uses JavaScript ES6 Spread Syntax.
8

From How can I merge properties of two JavaScript objects dynamically?

var obj2 = {name: 'don', gender: 'male'};
for (var attrname in myobject) { myobject[attrname] = obj2[attrname]; }

EDIT

To be a bit clearer about how you could extend Object to use this function:

//Extend the protype so you can make calls on the instance
Object.prototype.merge = function(obj2) {
    for (var attrname in obj2) {
        this[attrname] = obj2[attrname];
    }
    //Returning this is optional and certainly up to your implementation.  
    //It allows for nice method chaining.
    return this;
};
//Append to the object constructor function so you can only make static calls
Object.merge2 = function(obj1, obj2) {
    for (var attrname in obj2) {
        obj1[attrname] = obj2[attrname];
    }
    //Returning obj1 is optional and certainly up to your implementation
    return obj1;
};

Usage:

var myObject1 = { One: "One" };
myObject1.merge({ Two: "Two" }).merge({ Three: "Three" });
//myObject1 is { One: "One", Two: "Two", Three: "Three", merge: function }


var myObject2 = Object.merge2({ One: "One" }, { Two: "Two" });
Object.merge2(myObject2, { Three: "Three" });
//myObject2 is { One: "One", Two: "Two", Three: "Three" }

Note: You certainly could implement a flexible merge conflict strategy depending on your needs.

1 Comment

good answer but it's a hack and ES6/ ES2015 has a better option mentioned bellow.
7

Use jQuery library

jQuery.extend(myObject, { name : 'don', gender : 'male' });

2 Comments

Can't use jQuery unfortunately. (Like majorly unfortunate) Although this looks super clean...
This question isn't tagged jquery.
6

Sometimes I do it like this:

var props = {
   name : 'don',
   gender : 'male',
   age : 12,
   other : false
};
for(var p in props) myObject[p] = props[p];

Comments

3

In ECMAscript 5 you can make us of defineProperties:

Object.defineProperties(myobject, {  
  name: {  
    value: 'don' 
  },  
  gender: {  
    value: 'male' 
  }  
});

4 Comments

Unfortunately that syntax is pretty verbose, making it even longer than the original that OP is hoping to streamline.
Yeah, I guess you're right, this has more use when you want to protect against mutation of your objects. Hehe,I always do that... =P
I agree. It's a nice feature, just clunky.
Also worth checking the ECMAScript v5 browser compatibility depending on your target audience - kangax.github.io/es5-compat-table - in this case nothing below IE9.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.