In one of the previous week’s articles, I noticed Defu is used in unbuild source code to merge objects. This got me wondering how this is different to lodash._merge. In this article, we will look at their differences. I created a Codesandbox repository for the purposes of this article. Let’s get started.

lodash._merge

Below is definition picked from official docs.

This method is like _.assign except that it recursively merges own and inherited enumerable string keyed properties of source objects into the destination object. Source properties that resolve to undefined are skipped if a destination value exists. Array and plain object properties are merged recursively. Other objects and value types are overridden by assignment. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.

Example

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

Arrays and objects are merged recursively.

So far so good, now let’s look at Defu

I study large open-source projects and provide insights, give my repository a star.

Defu

Below definition is picked from Defu’s npm page.

Assign default properties, recursively. Lightweight and Fast.

Example

import { defu } from "defu";
 
console.log(defu({ a: { b: 2 } }, { a: { b: 1, c: 3 } }));
// => { a: { b: 2, c: 3 } }

At this point, I would investigate if arrays are merged in defu or if it only deals with objects. Let’s pick the example from lodash._merge and see the results.

In this sandbox example — https://codesandbox.io/p/devbox/yn9ds8, I have setup the defu and lodash._merge and below is a screenshot of my attempt to merge arrays recursively using Defu.

Defu cannot merge arrays recrusively, I would use Defu stricly to merge objects only. The key difference here is:

// Using lodash._merge
var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
 
// Using the same example in defu
defu(
    {
      a: [{ b: 2 }, { d: 4 }],
    },
    {
      a: [{ c: 3 }, { e: 5 }],
    }
  )
// { a: [ { b: 2 }, { d: 4 }, { c: 3 }, { e: 5 } ] }

What’s the count of array items in these two examplse? lodash._merge has only two items, whereas defu has four items, each item being an object. Something to keep in mind, I guess.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

1. https://lodash.com/docs/#merge

2. https://github.com/unjs/unbuild/blob/main/src/build.ts#L93

3. https://github.com/unjs/defu#readme