Deep and shallow merge in javascript

Question

What is the difference between deep and shallow merge of objects in javascript? As far as I understand, deep merge recursively copies all the source object enumerable properties into target object. But what does shallow merge do?

Answer 1

In a shallow merge, the properties of the first object are overwritten with the same property values of the second object.

Lets look at an example. Setup:

var obj1 = {   foo: {     prop1: 42,   }, };  var obj2 = {   foo: {     prop2: 21,   },   bar: {     prop3: 10,   }, }; 

Shallow:

var result = {   foo: {          // `foo` got overwritten with the value of `obj2`     prop2: 21,   },   bar: {     prop3: 10,   }, }; 

Deep:

var result = {   foo: {     prop1: 42,     prop2: 21,    // `obj2.foo` got merged into `obj1.foo`.   },   bar: {     prop3: 10,   }, };