Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between .extend() / .assign() and .merge() in Lodash library.
The Lodash library is in JavaScript, which works on the top of ‘_.js’. It can be used while working with arrays, strings, objects, numbers, etc.
The assign() method
This function is used to copy the original object into a new object. The difference in this and the spread operator is when nested objects are present and if assign() is used to copy the object, then the nested object will not change and the other variables of the object can be changed.
There are two parameters to the assign() function. The first parameter is curly braces {} which is used to ensure that the new object will not mutate the original object. The second parameter is the name of the original object which is to be copied into new object.
Syntax
The syntax for the above mentioned method is as follows −
Object.assign({},originalObjectName)
Example
Now, let us see an example of the assign() method in JavaScript −
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)
The _.extend() method
The, _.extend() and assign() methods are similar but the _.extend() will iterate over its own and inherited source properties.
Syntax
The syntax of the _.extend() method is as follows −
.extend(obj,source)
The extend() method will take two parameters. The first parameter will have the destination object and the second parameter will have the source object.
The extend method will return the object.
Example
Following is an example of the _.extend() method in JavaScript −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lodash - Extend Method</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div id="l"></div> <script> var obj1 = { content_writing: 18000, UI_editor : 20000, marketing: 15000 }; var obj2 = { UI_editor: 20000, tech_support: 10000 }; $.extend( obj1, obj2 ); $( "#l" ).append( JSON.stringify( obj1 ) ); </script> </body> </html>
The _.merge() method
The _.merge() method is used to merge the two objects to create a parent mapping object. It accepts two parameters. The first parameter will have the destination object and the second parameter will have the source object. Following is the syntax of this method −
_.merge(obj, source)
Example
This example demonstrates the usage of _.merge() method of Lodash in JavaScript.
<!DOCTYPE html> <html> <head> <title>Lodash - Extend Method</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div id="l"></div> <script> let obj1 = { 'apple': [{ 'ball': 20 }, { 'doll': 40 }] }; let obj2 = { 'apple': [{ 'cat': 30 }, { 'egg': 50 }] }; $.merge(obj1, obj2); $( "#l" ).append(JSON.stringify( obj1 )); </script> </body> </html>
Difference between _.extend(), assign() and _.merge()
The main difference between the _.extend(), assign() and _.merge() methods in JavaScript is −
The assign()/_.extend() take each property in the source, copy its value as-is to destination. If property values themselves are objects, there is no recursive traversal of their properties. This is also called shallow copying/cloning. The entire object would be taken from the source and set into a destination.
Whereas, the _.merge() method takes each property in the source, checks if that property is the object itself. If it then goes down recursively and tries to map child object properties from source to destination.
Example 1
In the following example we are trying to merge two objects using _.extend() and _.merge() methods.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lodash - Extend Method</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div id="l"></div> <script> let destination = { a: { b: 1, c: 2}, }; let source = { a: { d: 2, c: 3}, }; //Using the merge method $.merge(destination, source); $( "#l" ).append("Result of merge: "); $( "#l" ).append(JSON.stringify( destination )); $( "#l" ).append("<br>"); //Using the extend method $( "#l" ).append("Result of extend: "); $.extend(destination, source); $( "#l" ).append( JSON.stringify( destination ) ); </script> </body> </html>
On running the above code, it prints the result of merging the two objects using merge() and extend() methods.
Example 2
Following is another example demonstrating the difference between these two methods −
let _ = require('lodash'); let destination = { a: { b: 1, c: 2 }, }; let source = { a: { d: 2, c: 3 }, }; console.log(_.merge(destination, source)); console.log(_.extend(destination, source));
Output
This will give the output −
{ a: 1, b: 4, c: 5 }
{ a: 1, b: 4, c: 5 }
879 Views
