By James Skidmore


2009-07-22 23:21:51 8 Comments

Here is my object literal:

var obj = {key1: value1, key2: value2};

How can I add {key3: value3} to the object?

22 comments

@Willem van der Veen 2018-08-16 09:15:56

Simply adding properties:

And we want to add prop2 : 2 to this object, these are the most convenient options:

  1. Dot operator: object.prop2 = 2;
  2. square brackets: object['prop2'] = 2;

So which one do we use then?

The dot operator is more clean syntax and should be used as a default (imo). However, the dot operator is not capable of adding dynamic keys to an object, which can be very useful in some cases. Here is an example:

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

Merging objects:

When we want to merge the properties of 2 objects these are the most convenient options:

  1. Object.assign(), takes a target object as an argument, and one or more source objects and will merge them together. For example:

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

  1. Object spread operator ...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

Which one do we use?

  • The spread syntax is less verbose and has should be used as a default imo. Don't forgot to transpile this syntax to syntax which is supported by all browsers because it is relatively new.
  • Object.assign() is more dynamic because we have access to all objects which are passed in as arguments and can manipulate them before they get assigned to the new Object.

@Bram Vanroy 2018-08-23 18:58:31

At the top of your post: those aren't curly brackets but square brackets.

@Willem van der Veen 2018-08-23 20:01:44

Thanks for pointing out ;)

@PPing 2018-02-16 11:10:08

Since its a question of the past but the problem of present. Would suggest one more solution: Just pass the key and values to the function and you will get a map object.

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}

@Quentin 2018-02-16 11:15:11

This doesn't seem to relate to the question that was asked at all.

@7vujy0f0hy 2017-11-04 23:51:48

Year 2017 answer: Object.assign()

Object.assign(dest, src1, src2, ...) merges objects.

It overwrites dest with properties and values of (however many) source objects, then returns dest.

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

Live example

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

Year 2018 answer: object spread operator {...}

obj = {...obj, ...pair};

From MDN:

It copies own enumerable properties from a provided object onto a new object.

Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().

Note that Object.assign() triggers setters whereas spread syntax doesn’t.

Live example

It works in current Chrome and current Firefox. They say it doesn’t work in current Edge.

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

Year 2019 answer

Object assignment operator +=:

obj += {key3: "value3"};

Oops... I got carried away. Smuggling information from the future is illegal. Duly obscured!

@Mehi Shokri 2018-01-11 18:22:06

obj+= sounds awesome

@Haroon Khan 2018-01-31 12:58:54

i am gonna love += :hungry: cool answer though!! doche

@digiwebguy 2018-08-16 13:14:07

This man is from the future. Best answer +1

@Sayed Tauseef Haider Naqvi 2017-12-16 16:10:44

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
    var injectObj = {isActive:true, timestamp:new Date()};

    // function to inject key values in all object of json array

    function injectKeyValueInArray (array, keyValues){
        return new Promise((resolve, reject) => {
            if (!array.length)
                return resolve(array);

            array.forEach((object) => {
                for (let key in keyValues) {
                    object[key] = keyValues[key]
                }
            });
            resolve(array);
        })
    };

//call function to inject json key value in all array object
    injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
        console.log(newArrOfObj);
    });

Output like this:-

[ { name: 'eve',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'john',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'jane',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z } ]

@xyxyber 2017-11-25 10:17:41

A short and elegant way in next Javascript specification (candidate stage 3) is:

obj = { ... obj, ... { key3 : value3 } }

A deeper discussion can be found in Object spread vs Object.assign and on Dr. Axel Rauschmayers site.

It works already in node.js since release 8.6.0.

Vivaldi, Chrome, Opera, and Firefox in up to date releases know this feature also, but Mirosoft don't until today, neither in Internet Explorer nor in Edge.

@sgajera 2017-11-21 04:19:41

Best way to achieve same is stated below:

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);

@Vicky 2013-10-27 17:49:39

var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

@Roly 2015-02-28 09:53:35

This is for arrays, not objects.

@Miraj Hamid 2017-09-07 03:36:55

We can do this in this way too.

var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }

@Sanchay Kumar 2017-01-13 06:14:37

Two most used ways already mentioned in most answers

obj.key3 = "value3";

obj["key3"] = "value3";

One more way to define a property is using Object.defineProperty()

Object.defineProperty(obj, 'key3', {
  value: "value3",       // undefined by default
  enumerable: true,      // false by default
  configurable: true,    // false by default
  writable: true         // false by default
});

This method is useful when you want to have more control while defining property. Property defined can be set as enumerable, configurable and writable by user.

@relipse 2016-12-08 22:24:04

In order to prepend a key-value pair to an object so the for in works with that element first do this:

    var nwrow = {'newkey': 'value' };
    for(var column in row){
        nwrow[column] = row[column];
    }
    row = nwrow;

@Sir.Nathan Stassen 2014-11-24 18:11:22

I have grown fond of the LoDash / Underscore when writing larger projects.

Adding by obj['key'] or obj.key are all solid pure JavaScript answers. However both of LoDash and Underscore libraries do provide many additional convenient functions when working with Objects and Arrays in general.

.push() is for Arrays, not for objects.

Depending what you are looking for, there are two specific functions that may be nice to utilize and give functionality similar to the the feel of arr.push(). For more info check the docs, they have some great examples there.

_.merge (Lodash only)

The second object will overwrite or add to the base object. undefined values are not copied.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"} 

_.extend / _.assign

The second object will overwrite or add to the base object. undefined will be copied.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_.defaults

The second object contains defaults that will be added to base object if they don't exist. undefined values will be copied if key already exists.

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$.extend

In addition, it may be worthwhile mentioning jQuery.extend, it functions similar to _.merge and may be a better option if you already are using jQuery.

The second object will overwrite or add to the base object. undefined values are not copied.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign()

It may be worth mentioning the ES6/ ES2015 Object.assign, it functions similar to _.merge and may be the best option if you already are using an ES6/ES2015 polyfill like Babel if you want to polyfill yourself.

The second object will overwrite or add to the base object. undefined will be copied.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

@A.D 2015-12-08 23:24:43

I believe _.merge is now _.extend(destination, others)

@Sir.Nathan Stassen 2015-12-09 05:10:20

Ah, you're correct, _.extend is a more universal alias since the underscore library is still using extend not merge. I'll update my answer.

@Armfoot 2015-06-08 17:17:04

Either obj['key3'] = value3 or obj.key3 = value3 will add the new pair to the obj.

However, I know jQuery was not mentioned, but if you're using it, you can add the object through $.extend(obj,{key3: 'value3'}). E.g.:

var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));

$.extend(obj,{key3: 'value3'});

$('#ext').append(JSON.stringify(obj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

jQuery.extend(target[,object1][,objectN]) merges the contents of two or more objects together into the first object.

And it also allows recursive adds/modifications with $.extend(true,object1,object2);:

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
$("#ini").append(JSON.stringify(object1));    

$.extend( true, object1, object2 );
 
$("#ext").append(JSON.stringify(object1));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

@Eduen Sarceno 2013-12-28 01:34:25

You can create a class with the answer of @Ionuț G. Stan

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

Creating a new object with the last class:

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

Printing the object

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"} 

Printing a Key

console.log(my_obj.obj["key3"]) //Return value3

I'm newbie in javascript, comments are welcome. Works for me.

@Chen Yang 2013-08-02 03:51:40

According to Property Accessors defined in ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67), there are two ways you can do to add properties to a exists object. All these two way, the Javascript engine will treat them the same.

The first way is to use dot notation:

obj.key3 = value3;

But this way, you should use a IdentifierName after dot notation.

The second way is to use bracket notation:

obj["key3"] = value3;

and another form:

var key3 = "key3";
obj[key3] = value3;

This way, you could use a Expression (include IdentifierName) in the bracket notation.

@sadmicrowave 2013-06-26 18:34:00

I know there is already an accepted answer for this but I thought I'd document my idea somewhere. Please [people] feel free to poke holes in this idea, as I'm not sure if it is the best solution... but I just put this together a few minutes ago:

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

You would utilize it in this way:

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

Since, the prototype function is returning this you can continue to chain .push's to the end of your obj variable: obj.push(...).push(...).push(...);

Another feature is that you can pass an array or another object as the value in the push function arguments. See my fiddle for a working example: http://jsfiddle.net/7tEme/

@sadmicrowave 2013-06-26 18:43:20

maybe this isn't a good solution, I seem to be getting errors in jquery1.9: TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)') which is weird because it works in jsfiddle even with jquery1.9

@Justin R. 2013-10-03 16:54:32

You should not extend Object.prototype; this breaks the "object-as-hashtables" feature of JavaScript (and subsequently a lot of libraries such as the Google Maps JS API). See discussion: stackoverflow.com/questions/1827458/…

@nottinhill 2012-08-01 14:28:41

In case you have multiple anonymous Object literals inside an Object and want to add another Object containing key/value pairs, do this:

Firebug' the Object:

console.log(Comicbook);

returns:

[Object { name="Spiderman", value="11"}, Object { name="Marsipulami", value="18"}, Object { name="Garfield", value="2"}]

Code:

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

will add Object {name="Peanuts", value="12"} to the Comicbook Object

@Avia Afer 2016-03-22 07:44:57

nicely & clearly explained other option which is more suitable to address objects with an id or name property then assigning it while adding , good one. specially when it has or could have in future more props same method will apply just put another coma and it's ready for change in plans

@seth 2009-07-22 23:22:21

You could use either of these (provided key3 is the acutal key you want to use)

arr[ 'key3' ] = value3;

or

arr.key3 = value3;

If key3 is a variable, then you should do:

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

After this, requesting arr.a_key would return the value of value3, a literal 3.

@DevAntoine 2012-07-18 12:27:25

This is not an array but an object. JS arrays are indexed only by integer. Try to do arr.length and it'll return 0. More reading about this: less-broken.com/blog/2010/12/…

@Thế Anh Nguyễn 2018-03-14 05:01:45

@DevAntoine's link is not accessible. If you want to get the "length" of this array type, use: Object.keys(your_array).length More reading about this problem, see: stackoverflow.com/questions/21356880/array-length-returns-0

@John Smith 2018-04-17 05:31:48

One could also simple overwrite the length property of the array they're creating. Setting var myarray["length"] = numArrayFields solve this issue for me. Assuming you are keeping track of the number of fields your're adding to your array somehow that is.

@Ionuț G. Stan 2009-07-22 23:25:19

There are two ways to add new properties to an object:

var obj = {
    key1: value1,
    key2: value2
};

Using dot notation:

obj.key3 = "value3";

Using square bracket notation:

obj["key3"] = "value3";

The first form is used when you know the name of the property. The second form is used when the name of the property is dynamically determined. Like in this example:

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

A real JavaScript array can be constructed using either:

The Array literal notation:

var arr = [];

The Array constructor notation:

var arr = new Array();

@Ionuț G. Stan 2009-07-22 23:33:29

Yes Nosredna, you're right. I corrected after your comment on seth's answer. I know the implications, it was just the inertia of my mind :)

@Nosredna 2009-07-22 23:34:01

obj is an object. The part between (and including) the braces is the object literal. obj is not an object literal.

@Robert Koritnik 2012-08-29 13:36:02

...although it is recommended (also by JSLint) to use the first Array constructor notation... Just so we're clear about that...

@axel freudiger 2012-11-02 10:39:55

what if the key is a number? obj.123 = 456 doesn't work. obj[123] = 456 does work though

@Ionuț G. Stan 2012-11-02 10:42:58

@axelfreudiger indeed, anything that's not syntactically a valid variable identifier has to be used with bracket notation.

@Metropolis 2014-03-25 18:51:19

Using obj['newvalue'] = 'blah; does not append it to the end as far as i can see. It is adding it at the beginning

@Kent Johnson 2014-04-07 06:31:44

@Ionuț G. Stan Could the answer be improved by saying you can set the key of the object literal dynamically such as in the following for loop: for (var pIdx = 0; pIdx < products.length; pIdx ++) { var id = products[pIdx].id; productById[id] = products[pIdx]; }

@ayjay 2014-06-13 18:44:32

If the bracket notation is used, I'm guessing the key is stored as a string? What happens if the dot notation is used -- would the key be stored as string as well?

@Ian 2014-07-29 00:27:34

Probably not too important (especially overkill for such a simple question), but it might be good to include the ability to add a property with Object.defineProperty, since it's supported quite well in modern browsers

@Khalil Khalaf 2017-06-08 21:24:51

Can I sort by values? for ex I want to iterate keys starting from the key that has the smallest value

@Ionuț G. Stan 2017-06-09 06:50:36

@KyleKhalaf Object.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log);

@Khalil Khalaf 2017-06-09 15:53:27

Awesome! what if the value is an array of items, and I want to start with the key that has the smallest array?

@Ionuț G. Stan 2017-06-09 16:05:25

@KyleKhalaf Take a look at Array.sort, you can give it a custom compare function: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

@Haroon Khan 2018-01-31 13:04:13

this answer is not acceptable anymore.

@John Smith 2018-04-17 05:33:18

Did ya know that if you create an array with dynamic key/value pairs that it's length property will be zero? To solve this, one could simply overwrite the length property of the array they're creating. Setting var myarray["length"] = numArrayFields solved this issue for me. Assuming you are keeping track of the number of fields your're adding to your array somehow.

@Ionuț G. Stan 2018-04-17 06:09:50

@JohnSmith the length property isn't set because it's not an array, it's an object/map/dictionary.

@wombleton 2009-07-22 23:33:35

You can either add it this way:

arr['key3'] = value3;

or this way:

arr.key3 = value3;

The answers suggesting keying into the object with the variable key3 would only work if the value of key3 was 'key3'.

@bdukes 2009-07-22 23:25:57

Your example shows an Object, not an Array. In that case, the preferred way to add a field to an Object is to just assign to it, like so:

arr.key3 = value3;

@Robert Koritnik 2009-07-22 23:25:33

arr.key3 = value3;

because your arr is not really an array... It's a prototype object. The real array would be:

var arr = [{key1: value1}, {key2: value2}];

but it's still not right. It should actually be:

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

@dfa 2009-07-22 23:23:04

arr.push({key3: value3});

@Matthew 2012-01-26 18:50:33

This is wrong. That will add to an array, not to an object. You won't be able to reference the value using the key. Not directly, anyway.

@Afshin Mehrabani 2012-11-21 07:31:55

Wrong answer, push is one of Array functions, not Object.

Related Questions

Sponsored Content

36 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

18 Answered Questions

[SOLVED] Checking if a key exists in a JavaScript object?

69 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5130608 View
  • 6428 Score
  • 69 Answer
  • Tags:   javascript arrays

88 Answered Questions

[SOLVED] How do JavaScript closures work?

64 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

42 Answered Questions

[SOLVED] How do I check if an array includes an object in JavaScript?

53 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

39 Answered Questions

[SOLVED] Sort array of objects by string property value

73 Answered Questions

[SOLVED] How can I get query string values in JavaScript?

48 Answered Questions

Sponsored Content