
Lodash’s merge function is a powerful utility for combining objects in JavaScript. Unlike a shallow merge, which only copies properties from the source object to the target object, merge performs a deep merge. This means that nested objects are merged recursively, allowing for a more comprehensive combination of properties.
When using merge, if properties in the source object have the same key as properties in the target object, Lodash will merge the values. If those values are also objects, Lodash will continue to merge them. If the values are not objects, the value from the source object will overwrite the value from the target object.
Here’s a basic example of how to use the merge function:
const _ = require('lodash');
const object1 = {
a: 1,
b: { x: 10, y: 20 },
};
const object2 = {
b: { y: 30, z: 40 },
c: 3,
};
const mergedObject = _.merge(object1, object2);
console.log(mergedObject);
In this example, the mergedObject will contain the properties from both object1 and object2. The property b in object1 will be merged with the property b in object2 resulting in a nested object that combines the values from both.
Understanding how merge handles conflicts is important. If you have a scenario where both objects contain the same key, the values will be combined if they are objects. This allows for greater flexibility when working with configurations or settings that might be spread across multiple sources.
Additionally, Lodash’s merge function does not create new properties but rather merges existing ones. If you need to create new properties based on certain conditions or logic, you might want to consider a different approach or preprocess the objects before merging.
As you work with merge, it is also worth noting that it does not perform any cloning of the objects. Instead, it modifies the target object directly. This means that if you need to keep the original objects intact, you’ll want to create a copy of the target object first.
Another interesting aspect is how merge deals with arrays. By default, if both objects contain arrays at the same key, Lodash will replace the target array with the source array, unlike how it handles objects. This behavior can lead to unexpected results if you’re not aware of it, so always check the structure of your data when merging.
ππππ ππ©π π«ππππ Magnetic Charging Cable for Apple Watch Charger,[USB C Port] Wireless Charging Cable Compatible with iWatch Series Ultra/10/9/8/7/6/SE/SE2/5/4/3/2[3.3FT/1M]-White
$8.99 (as of June 2, 2026 22:39 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)Practical examples of merging objects with Lodash
To illustrate the behavior of merge with arrays, consider the following example:
const objectA = {
items: [1, 2, 3],
};
const objectB = {
items: [4, 5],
};
const mergedResult = _.merge(objectA, objectB);
console.log(mergedResult);
In this case, the mergedResult will have items set to [4, 5], completely replacing the original array from objectA. This highlights the need to be cautious when merging objects that contain arrays.
For scenarios where you want to concatenate arrays instead of replacing them, you can use a customizer function with merge. This function allows you to define how the merging should occur. Hereβs an example:
const customizer = (objValue, srcValue) => {
if (Array.isArray(objValue)) {
return objValue.concat(srcValue);
}
};
const mergedWithCustomizer = _.mergeWith(objectA, objectB, customizer);
console.log(mergedWithCustomizer);
In this modified example, the mergedWithCustomizer will result in items being [1, 2, 3, 4, 5], as the customizer function concatenates the arrays instead of replacing them. This pattern can be quite useful when you require specific merging logic.
Moreover, when merging deeply nested objects, itβs essential to understand that merge will traverse the entire structure. If you have multiple layers of nested objects, each corresponding property will be merged accordingly. Take a look at the following example:
const deepObject1 = {
a: { b: { c: 1 } },
};
const deepObject2 = {
a: { b: { d: 2 } },
e: 3,
};
const deepMergedResult = _.merge(deepObject1, deepObject2);
console.log(deepMergedResult);
The output here will be:
{
a: { b: { c: 1, d: 2 } },
e: 3
}
This illustrates how merge effectively combines properties from both objects, ensuring that all nested properties are retained and merged as needed.
Itβs also worth mentioning that merge works seamlessly with more complex data structures. For instance, consider merging objects that contain functions or other non-primitive types. While the merging behavior remains consistent, itβs crucial to ensure that the merged structure still adheres to the intended logic of your application.
Mastering Lodash’s merge function can significantly enhance your ability to manage and manipulate object data in JavaScript. Understanding its nuances, especially regarding arrays and nested objects, will empower you to write cleaner and more efficient code.
