How Does The Lodash Merge Function Work?

Tim Mouskhelichvili
Tim Mouskhelichvili
3 minutes to read

Lodash is the most used JavaScript library in the world. It provides a lot of useful utility functions (for example, the Lodash debounce function, the get function, etc...) that help developers simplify common tasks. One of those useful methods is the merge function.

The Lodash merge function merges two or more objects into one.

Here is an example of the merge function in action:

javascriptimport { merge } from 'lodash';

const obj1 = { startYear: 2000 };
const obj2 = { endYear: 2022 };
const merged = merge(obj1, obj2);

// Outputs: '{ endYear: 2022, startYear: 2000 }'
console.log(merged);

In this article, I will explain everything to know about the Lodash merge function, how and when to use it, as well as answer some of the most common questions.

Let’s get to it 😎.

lodash merge

The definition

The merge function creates a merged object from two or more objects.

The syntax

javascript_.merge(object, [sources])

This function accepts two or more parameters.

  • The first argument (object) holds the destination object.
  • The second and subsequent arguments hold the source objects.

If two or more keys are the same, the generated object will take the value from the rightmost argument.

How to import the merge function?

When it comes to the bundle size, Lodash is a very big package. That's why, I recommend not using the default import, but rather importing the functions that you need individually. There are two ways of importing Lodash functions individually.

The first way is to use the curly braces:

javascriptimport { merge } from 'lodash';

The second way is to use the one-by-one method:

javascriptimport merge from 'lodash/merge';

The one-by-one import will result in the smallest bundle size.

How to use this function?

Here is a small example for you of how to use this function.

javascriptimport { merge } from 'lodash';

const obj1 = { a: 'a', b: 'b' };
const obj2 = { c: 'c', d: 'd' };
const obj3 = { a: 'z', f: 'f' };

// Outputs: '{ a: "a", b: "b", c: "c", d: "d" }
console.log(merge(obj1, obj2));

// Outputs: '{ a: "z", c: "c", d: "d", f: "f" }'
console.log(merge(obj2, obj3));

// Outputs: '{ a: "z", b: "b", c: "c", d: "d", f: "f" }'
console.log(merge(obj1, obj2, obj3));

Differences between merge and assign in Lodash?

As you can see, the merge function is very similar to the assign function, however, they still have some differences between them.

The biggest difference between them is:

  • the assign function uses shallow copy.
  • the merge function uses deep copy.

A shallow copy creates a newly copied object with references to its original object.

A deep copy creates a newly copied object without references to its original object which makes the copied object truly independent.

There are also smaller differences between them:

  • The merge function will copy inherited properties from a class, but the assign function will not.
  • The merge function will not override values equal to undefined, but the assign function will.

When to use the merge function?

Use the Lodash merge function if you want the final generated object created from deep copies. Use it to deep merge two or more objects.

Are there alternatives to the merge function?

lodash merge

If you do not need the deep copy feature you can use:

  • The Object.assign function.
  • The ES6 spread operator.
  • The Lodash assign function.

However, all of those functions are using shallow copies.

Final thoughts

As you can see the Lodash merge function is very straight and forward and easy to understand.

For my part, I use this function when I need to deep merge two or more objects.

If you are interested in learning more, I have written more tutorials on Lodash on this website.

Don’t hesitate to ask your questions about Lodash in the comments section. It will be a pleasure for me to answer them.

Thank you very much for reading this article.

Please share it with your fellow developers and colleagues.

Comments (3)
Reply to:
Ninepercent April 09, 2023 16:27PM
I wonder why is this the output:// Outputs: \'{ a: \"z\", c: \"c\", d: \"d\", f: \"f\" }\'console.log(merge(obj2, obj3));Neither obj2 nor obj3 shares a same key. My assumption would bethat the output should look like this:{ c: \"c\", d: \"d\", a: \"z\", f: \"f\" }
REPLY
Hassan February 10, 2023 01:08AM
Brother, I'm also a React.js Django Laravel .NET developer, but I'm thinking about the difference between merge and spread operators.
REPLY
Tim Mouskhelichvili February 27, 2023 20:41PM
Merge does a deep copy, and the spread operator does a shallow copy. Use the spread operator on primitives and Merge on complex objects.
REPLY