CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 0
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; fwd=miss
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 13 Oct 2025 09:05:50 GMT
etag: "2170e55398541d0a6e46ae977fa8a399-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7ED38Q8WS060YMCFDEYQ3TQ
Lodash's `merge()` Function - Mastering JS
Differences Between
Lodash's `merge()` Function
Apr 9, 2020
Given two objects destination
and source
, Lodash's merge()
function copies the 2nd object's own properties and inherited properties into the first object.
const destination = { name: 'Will Riker', rank: 'Commander' };
const source = { ship: 'USS Enterprise' };
_.merge(destination, source);
destination.name; // 'Will Riker'
destination.rank; // 'Commander'
destination.ship; // 'USS Enterprise'
Sounds a lot like Object.assign()
, right? While merge()
is very
similar to Object.assign()
and _.assign()
, there are a couple
minor differences.
Differences Between merge()
and assign()
The first detail is that merge()
copies objects recursively,
so _.merge()
is a deep copy
whereas _.assign()
is a shallow copy.
const obj = {
name: {
first: 'Will',
last: 'Riker'
}
};
const deepClone = _.merge({}, obj);
deepClone.name === obj.name; // false
deepClone.name.first = 'Thomas';
obj.name.first; // 'Will'
const shallowClone = _.assign({}, obj);
shallowClone.name === obj.name; // true
shallowClone.name.first = 'Thomas';
obj.name.first; // 'Thomas'
The second detail is how merge()
handles undefined
. If the source
has a key whose value is strictly equal to undefined
, merge()
will
not overwrite that key in the destination
.
let destination = {
firstName: 'Will',
lastName: 'Riker',
rank: 'Commander'
};
// Since `source.rank` is undefined, `merge()` won't overwrite
// `destination.rank`.
_.merge(destination, { firstName: 'Thomas', rank: undefined });
destination.firstName; // 'Thomas'
destination.rank; // 'Commander'
destination = {
firstName: 'Will',
lastName: 'Riker',
rank: 'Commander'
};
// But `_.assign()` and `Object.assign()` overwrite `destination.rank`.
_.assign(destination, { firstName: 'Thomas', rank: undefined });
destination.firstName; // 'Thomas'
destination.rank; // undefined
Another difference comes in when you consider how merge()
handles classes.
class Ship {};
Ship.prototype.shipName = 'USS Enterprise';
const ship = new Ship();
// `merge()` copies inherited properties, so it will copy
// `shipName`
const merged = _.merge({ name: 'Will Riker', rank: 'Commander' }, ship);
merged.shipName; // 'USS Enterprise'
// `assign()` does **not** copy inherited properties.
const assigned = Object.assign({ name: 'Will Riker', rank: 'Commander' }, ship);
assigned.shipName; // undefined
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!