Here is my object literal:
var obj = {key1: value1, key2: value2};
How can I add field key3
with value3
to the object?
This question is related to
javascript
object-literal
There are two ways to add new properties to an object:
var obj = {
key1: value1,
key2: value2
};
obj.key3 = "value3";
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:
var arr = [];
var arr = new Array();
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);
}
You can create a new object by using the {[key]: value}
syntax:
const foo = {_x000D_
a: 'key',_x000D_
b: 'value'_x000D_
}_x000D_
_x000D_
const bar = {_x000D_
[foo.a]: foo.b_x000D_
}_x000D_
_x000D_
console.log(bar); // {key: 'value'}_x000D_
console.log(bar.key); // value_x000D_
_x000D_
const baz = {_x000D_
['key2']: 'value2'_x000D_
}_x000D_
_x000D_
console.log(baz); // {key2: 'value2'}_x000D_
console.log(baz.key2); // value2
_x000D_
With the previous syntax you can now use the spread syntax {...foo, ...bar}
to add a new object without mutating your old value:
const foo = {a: 1, b: 2};_x000D_
_x000D_
const bar = {...foo, ...{['c']: 3}};_x000D_
_x000D_
console.log(bar); // {a: 1, b: 2, c: 3}_x000D_
console.log(bar.c); // 3
_x000D_
var employees = [];
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});
Today 2020.01.14 I perform tests on MacOs HighSierra 10.13.6 on Chrome v78.0.0, Safari v13.0.4 and Firefox v71.0.0, for chosen solutions. I divide solutions to mutable (first letter M) and immutable (first letter I). I also provide few immutable solutions (IB,IC,ID/IE) not yet published in answers to this question
Conclusions
obj.key3 = "abc"
(MA,MB) is fastest{...obj, key3:'abc'}
and Object.assign
(IA,IB) are fastestIn snippet below there are presended tested solution, you can prefrom test on your machine HERE
var o = {_x000D_
key1: true,_x000D_
key2: 3,_x000D_
};_x000D_
_x000D_
var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);_x000D_
_x000D_
_x000D_
_x000D_
function MA(obj) {_x000D_
obj.key3 = "abc";_x000D_
return obj;_x000D_
}_x000D_
_x000D_
function MB(obj) {_x000D_
obj['key3'] = "abc";_x000D_
return obj;_x000D_
}_x000D_
_x000D_
function MC(obj) {_x000D_
Object.assign(obj, {key3:'abc'});_x000D_
return obj;_x000D_
}_x000D_
_x000D_
function MD(obj) {_x000D_
Object.defineProperty(obj, 'key3', {_x000D_
value: "abc", // undefined by default_x000D_
enumerable: true, // false by default_x000D_
configurable: true, // false by default_x000D_
writable: true // false by default_x000D_
});_x000D_
return obj;_x000D_
}_x000D_
_x000D_
function IA(obj) {_x000D_
return {...obj, key3:'abc'};_x000D_
}_x000D_
_x000D_
function IB(obj) {_x000D_
return Object.assign({key3:'abc'}, obj);_x000D_
}_x000D_
_x000D_
function IC(obj) {_x000D_
let ob= JSON.parse(JSON.stringify(obj))_x000D_
ob.key3 = 'abc';_x000D_
return ob;_x000D_
}_x000D_
_x000D_
_x000D_
function ID(obj) {_x000D_
let ob= Object.fromEntries(Object.entries(obj));_x000D_
ob.key3 = 'abc';_x000D_
return ob;_x000D_
}_x000D_
_x000D_
function IE(obj) {_x000D_
return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
log('MA',MA);_x000D_
log('MB',MB);_x000D_
log('MC',MC);_x000D_
log('MD',MD);_x000D_
log('IA',IA);_x000D_
log('IB',IB);_x000D_
log('IC',IC);_x000D_
log('ID',ID);_x000D_
log('IE',IE);
_x000D_
This snippet only presents code - it not perform tests itself!
_x000D_
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.
var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});
document.body.innerHTML = JSON.stringify(obj);
_x000D_
{...}
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.
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);
_x000D_
Object assignment operator +=
:
obj += {key3: "value3"};
Oops... I got carried away. Smuggling information from the future is illegal. Duly obscured!
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;
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/
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
.
We can add a key/value pair to a JavaScript object in many ways...
CASE - 1 : Expanding an object
Using this we can add multiple key: value
to the object at the same time.
const rectangle = { width: 4, height: 6 };
const cube = {...rectangle, length: 7};
const cube2 = {...rectangle, length: 7, stroke: 2};
console.log("Cube2: ", cube2);
console.log("Cube: ", cube);
console.log("Rectangle: ", rectangle);
_x000D_
CASE - 2 : Using dot
notation
var rectangle = { width: 4, height: 6 };
rectangle.length = 7;
console.log(rectangle);
_x000D_
CASE - 3 : Using [square]
notation
var rectangle = { width: 4, height: 6 };
rectangle["length"] = 7;
console.log(rectangle);
_x000D_
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);
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}];
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'};_x000D_
$('#ini').append(JSON.stringify(obj));_x000D_
_x000D_
$.extend(obj,{key3: 'value3'});_x000D_
_x000D_
$('#ext').append(JSON.stringify(obj));
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<p id="ini">Initial: </p>_x000D_
<p id="ext">Extended: </p>
_x000D_
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 = {_x000D_
apple: 0,_x000D_
banana: { weight: 52, price: 100 },_x000D_
cherry: 97_x000D_
};_x000D_
var object2 = {_x000D_
banana: { price: 200 },_x000D_
durian: 100_x000D_
};_x000D_
$("#ini").append(JSON.stringify(object1)); _x000D_
_x000D_
$.extend( true, object1, object2 );_x000D_
_x000D_
$("#ext").append(JSON.stringify(object1));
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<p id="ini">Initial: </p>_x000D_
<p id="ext">Extended: </p>
_x000D_
And we want to add prop2 : 2
to this object, these are the most convenient options:
object.prop2 = 2;
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 = {_x000D_
prop1: 1_x000D_
}_x000D_
_x000D_
const key = Math.random() > 0.5 ? 'key1' : 'key2';_x000D_
_x000D_
obj[key] = 'this value has a dynamic key';_x000D_
_x000D_
console.log(obj);
_x000D_
When we want to merge the properties of 2 objects these are the most convenient options:
Object.assign()
, takes a target object as an argument, and one or more source objects and will merge them together. For example:const object1 = {_x000D_
a: 1,_x000D_
b: 2,_x000D_
};_x000D_
_x000D_
const object2 = Object.assign({_x000D_
c: 3,_x000D_
d: 4_x000D_
}, object1);_x000D_
_x000D_
console.log(object2);
_x000D_
...
const obj = {_x000D_
prop1: 1,_x000D_
prop2: 2_x000D_
}_x000D_
_x000D_
const newObj = {_x000D_
...obj,_x000D_
prop3: 3,_x000D_
prop4: 4_x000D_
}_x000D_
_x000D_
console.log(newObj);
_x000D_
Which one do we use?
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.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 } ]
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.
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
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.
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'
.
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;
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);
}
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.
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"}
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}
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"}
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"}
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 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.
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.
supported by most of browsers, and it checks if object key available or not you want to add, if available it overides existing key value and it not available it add key with value
example 1
let my_object = {};
// now i want to add something in it
my_object.red = "this is red color";
// { red : "this is red color"}
example 2
let my_object = { inside_object : { car : "maruti" }}
// now i want to add something inside object of my object
my_object.inside_object.plane = "JetKing";
// { inside_object : { car : "maruti" , plane : "JetKing"} }
example 3
let my_object = { inside_object : { name : "abhishek" }}
// now i want to add something inside object with new keys birth , gender
my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";
// { inside_object :
// { name : "abhishek",
// birth : "8 Aug",
// gender : "Male"
// }
// }
Source: Stackoverflow.com