What is the difference between shallow and deep merge in JavaScript?

What is the difference between shallow and deep merge in JavaScript?

A shallow merge copies properties from one object to another, but nested objects are shared. A deep merge copies all properties, including nested objects.

Can you give me an example of a shallow merge?

Sure! Using Object.assign, a shallow merge looks like this: const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { b: { d: 3 } }; const merged = Object.assign({}, obj1, obj2); Here, merged.b will reference the same object as obj1.b.

And how would a deep merge work?

For a deep merge, you can use libraries like Lodash. For example: _.merge({}, obj1, obj2); This will create a new object where merged.b is a new object containing both c and d.

Are there any performance considerations between the two?

Yes, shallow merges are generally faster since they only copy references for nested objects. Deep merges can be slower due to the need to recursively copy all properties.