This is a series of #250DaysOfJSQuestions that I had started on twitter where I share one JavaScript interview question daily, follow me on twitter @learnersbucket for web dev and interview related content.
Question 1. Learn how to merge two or more objects in javascript.
Almost everything in javascript is object, but still it does not have any good methods to merge two or more different objects.
After ES6 there are new methods added which can be used to merge objects in javascript.
There are two different types of merge that can be performed on the objects.
1). Shallow merge
2). Deep merge
Shallow Merge objects
In shallow merge only the properties owned by the object will be merged, it will not merge the extended properties or methods.
Using ... spread operator
... spread operators copies all the properties of the objects into another object.
let obj1 = {
name: 'prashant',
age: 23,
}
let obj2 = {
qualification: 'BSC CS',
loves: 'Javascript'
}
let merge = {...obj1, ...obj2};
console.log(merge);
/*
Object {
age: 23,
loves: "Javascript",
name: "prashant",
qualification: "BSC CS"
}
*/
Using Object.assign() method
Object.assign(target, source1, soure2, ...) method copies all the enumerable own property of source object to target object and returns the target object.
let obj1 = {
name: 'prashant',
age: 23,
}
let obj2 = {
qualification: 'BSC CS',
loves: 'Javascript'
}
let merge = Object.assign({}, obj1, obj2);
console.log(merge);
/*
Object {
age: 23,
loves: "Javascript",
name: "prashant",
qualification: "BSC CS"
}
*/
We have used an empty object {} as a target and passed the sources objects which should be merged in target.
Using custom function to merge objects
We can also create custom function to merge two or more objects.
let merge = (...arguments) => {
// Create a new object
let target = {};
// Merge the object into the target object
let merger = (obj) => {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
// Push each value from 'obj' into 'target'
target[prop] = obj[prop];
}
}
};
// Loop through each object and conduct a merge
for (let i = 0; i < arguments.length; i++) {
merger(arguments[i]);
}
return target;
}
let obj1 = {
name: 'prashant',
age: 23,
}
let obj2 = {
qualification: 'BSC CS',
loves: 'Javascript'
}
let merged = merge(obj1, obj2);;
console.log(merged);
/*
Object {
age: 23,
loves: "Javascript",
name: "prashant",
qualification: "BSC CS"
}
*/
Deep Merge Objects
To deep merge an object we have to copy the own properties and extended properties as well, if it exits. The best way to do so is to create a custom function.
let merge = (...arguments) => {
// Variables
let target = {};
// Merge the object into the target object
let merger = (obj) => {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (Object.prototype.toString.call(obj[prop]) === '[object Object]') {
// If we're doing a deep merge and the property is an object
target[prop] = merge(target[prop], obj[prop]);
} else {
// Otherwise, do a regular merge
target[prop] = obj[prop];
}
}
}
};
//Loop through each object and conduct a merge
for (let i = 0; i < arguments.length; i++) {
merger(arguments[i]);
}
return target;
};
let obj1 = {
name: 'prashant',
age: 23,
nature: {
"helping": true,
"shy": false
}
}
let obj2 = {
qualification: 'BSC CS',
loves: 'Javascript',
nature: {
"angry": false,
"shy": true
}
}
console.log(merge(obj1, obj2));
/*
Object {
age: 23,
loves: "Javascript",
name: "prashant",
nature: Object {
angry: false,
helping: true,
shy: true
},
qualification: "BSC CS"
}
*/
We can combine both the function for shallow copy and deep copy together to create a single function which will perform merge based on the arguments passed.
If we will pass true as first argument then it will perform deep merge else it will perform shallow merge.
let merge = (...arguments) => {
// Variables
let target = {};
let deep = false;
let i = 0;
// Check if a deep merge
if (typeof (arguments[0]) === 'boolean') {
deep = arguments[0];
i++;
}
// Merge the object into the target object
let merger = (obj) => {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
// If we're doing a deep merge and the property is an object
target[prop] = merge(target[prop], obj[prop]);
} else {
// Otherwise, do a regular merge
target[prop] = obj[prop];
}
}
}
};
//Loop through each object and conduct a merge
for (; i < arguments.length; i++) {
merger(arguments[i]);
}
return target;
};
let obj1 = {
name: 'prashant',
age: 23,
nature: {
"helping": true,
"shy": false
}
}
let obj2 = {
qualification: 'BSC CS',
loves: 'Javascript',
nature: {
"angry": false,
"shy": true
}
}
//Shallow merge
console.log(merge(obj1, obj2));
/*
Object {
age: 23,
loves: "Javascript",
name: "prashant",
nature: Object {
angry: false,
shy: true
},
qualification: "BSC CS"
}
*/
//Deep merge
console.log(merge(true, obj1, obj2));
/*
Object {
age: 23,
loves: "Javascript",
name: "prashant",
nature: Object {
angry: false,
helping: true,
shy: true
},
qualification: "BSC CS"
}
*/
There are other libraries available which you can use to merge or two objects like
Jquery's $.extend() method
$.extend(deep, copyTo, copyFrom) can be used to make a complete deep copy of any array or object in javascript.
Lodash merge() method
which will merge objects and arrays by performing deep merge recursively.
Top comments (0)