jQuery<\/a> to merge JavaScript objects. It provides several functions for this purpose such as extend().<\/p>\n\n\n\n$.extend(object1, object2);<\/pre>\n\n\n\nHere is an example to merge two objects using this function.<\/p>\n\n\n\n
$.extend(d1,d2);
console.log(d1); \/\/ output is { a: 1, b: 3, d: 4 }
console.log(d2); \/\/ output is { b: 3, d: 4 }<\/pre>\n\n\n\nPlease note, the extend() function, when used as shown above will also modify the original object d1. This is because it merges d2 into d1 and stores the result into d1.<\/p>\n\n\n\n
Even if you store the result explicitly in another object, it will still modify one of the original objects.<\/p>\n\n\n\n
d3=$.extend(d1,d2);
console.log(d3); \/\/ output is { a: 1, b: 3, d: 4 }
console.log(d1); \/\/ output is { a: 1, b: 2 }
console.log(d2); \/\/ output is { b: 3, d: 4 }<\/pre>\n\n\n\nSo if you do not want the original objects to be modified, then you need to modify the above function as shown below. You need to provide an extra empty object {} as the first argument.<\/p>\n\n\n\n
$.extend({},object1, object2);<\/pre>\n\n\n\nHere is how you can merge two objects using extend() function.<\/p>\n\n\n\n
d3=$.extend({},d1,d2);
console.log(d3); \/\/ output is {a: 1, b: 3, d: 4}
console.log(d1); \/\/ output is {a: 1, b: 2}
console.log(d2); \/\/ output is {b: 3, d: 4}<\/pre>\n\n\n\n