Difference between .extend() / .assign() and .merge() in Lodash library.

The Lodash library is a JavaScript utility library that provides helpful functions for working with arrays, strings, objects, numbers, and more. This article compares three important object merging methods: Object.assign(), _.extend(), and _.merge().

The Object.assign() Method

Object.assign() is a native JavaScript method that performs shallow copying of enumerable properties from source objects to a target object. It modifies the target object and returns it.

Syntax

Object.assign(target, source1, source2, ...)

Example

var employee = {
   emp_name: "Abdul Rawoof",
   company: "Tutorials Point",
   salary: 18000,
   job: "Software Engineer-Intern"
}

console.log("The original object employee is:", employee);
var cpyEmployee = Object.assign({}, employee);
console.log("The copied object cpyEmployee is:", cpyEmployee);

cpyEmployee.emp_name = "Jason";
cpyEmployee.job = "Content writer-Intern";
console.log("The copied object with some different name and role is:", cpyEmployee);
console.log("Original object remains unchanged:", employee);

The original object employee is: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
The copied object cpyEmployee is: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
The copied object with some different name and role is: { emp_name: 'Jason', company: 'Tutorials Point', salary: 18000, job: 'Content writer-Intern' }
Original object remains unchanged: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }

The _.extend() Method

The _.extend() method from Lodash is similar to Object.assign(), but it also iterates over inherited properties. It performs shallow copying and mutates the destination object.

Syntax

_.extend(object, [sources])

Example

const _ = require('lodash');

var obj1 = {
   content_writing: 18000,
   UI_editor: 20000,
   marketing: 15000
};

var obj2 = {
   UI_editor: 25000,
   tech_support: 10000
};

console.log("Before extend - obj1:", obj1);
_.extend(obj1, obj2);
console.log("After extend - obj1:", obj1);

The _.merge() Method

The _.merge() method recursively merges enumerable string keyed properties of source objects into the destination object. It performs deep merging for nested objects.

Syntax

_.merge(object, [sources])

Example

const _ = require('lodash');

let obj1 = {
   'apple': [{ 'ball': 20 }, { 'doll': 40 }]
};

let obj2 = {
   'apple': [{ 'cat': 30 }, { 'egg': 50 }]
};

console.log("Before merge:", JSON.stringify(obj1));
_.merge(obj1, obj2);
console.log("After merge:", JSON.stringify(obj1));

Key Differences Comparison

Practical Example: Deep vs Shallow Merging

const _ = require('lodash');

let destination = {
   a: { b: 1, c: 2 }
};

let source = {
   a: { d: 3, c: 4 }
};

// Using _.extend() (shallow)
let extendResult = _.extend({}, destination, source);
console.log("_.extend() result:", extendResult);

// Using _.merge() (deep)
let mergeResult = _.merge({}, destination, source);
console.log("_.merge() result:", mergeResult);

Output

_.extend() result: { a: { d: 3, c: 4 } }
_.merge() result: { a: { b: 1, c: 4, d: 3 } }

Conclusion

Use Object.assign() for simple shallow copying, _.extend() when you need inherited properties, and _.merge() for deep merging of nested objects. Choose based on whether you need shallow or deep merging behavior.