lodash._merge vs Defu

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: https://lodash.com/docs/#merge https://github.com/unjs/unbuild/blob/main/src/build.ts#L93 https://github.com/unjs/defu#readme

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 }] }

import { defu } from "defu";

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

// 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 } ] }

Related Posts

Securing Connection Strings: Best Practices for Develop...

Jan 13, 2025  0

The Ultimate Guide to AI, ML, DL, and Data Science: Und...

Jan 8, 2025  0

AI Agents: Revolutionizing Automation and Decision-Making

Jan 12, 2025  0