javascript tutorial - [Solved-5 Solutions] Add a key/value - javascript - java script - javascript array



Problem:

How can I add a key/value pair to a JavaScript object?

Solution 1:

var obj = {key1: value1, key2: value2};
click below button to copy the code. By JavaScript tutorial team

Solution 2:

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

var obj = {
    key1: value1,
    key2: value2
};
click below button to copy the code. By JavaScript tutorial team

Using dot notation:

obj.key3 = "value3";
click below button to copy the code. By JavaScript tutorial team

Using square bracket notation:

obj["key3"] = "value3";
click below button to copy the code. By JavaScript tutorial team

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");
click below button to copy the code. By JavaScript tutorial team

A real JavaScript array can be constructed using either:

The Array literal notation:

var arr = [];
click below button to copy the code. By JavaScript tutorial team

The Array constructor notation:

var arr = new Array();
click below button to copy the code. By JavaScript tutorial team

Solution 3:

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

arr[ 'key3' ] = value3;
click below button to copy the code. By JavaScript tutorial team

or

arr.key3 = value3;
click below button to copy the code. By JavaScript tutorial team

If key3 is a variable, then we should do:

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;
click below button to copy the code. By JavaScript tutorial team

Solution 4:

(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"} 


click below button to copy the code. By JavaScript tutorial team

_.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}

click below button to copy the code. By JavaScript tutorial team

_.defaults

The second object contains defaults that will be added to base object if they don't exist. undefinedvalues 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"}
click below button to copy the code. By JavaScript tutorial team

$.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"}
click below button to copy the code. By JavaScript tutorial team

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}
click below button to copy the code. By JavaScript tutorial team

Solution 5:

arr.key3 = value3;
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}];
click below button to copy the code. By JavaScript tutorial team

Related Searches to javascript tutorial - Add a key/value