Most Efficient Way to Deep Clone an Object in JavaScript

In JavaScript, objects are the collection of a key value pairs. The properties of the object are the keys and is denoted with a string. The value of the key is the value of the property of the given object. In JavaScript, the objects can be copied to other by many ways in which some of them are discussed below.

• Using spread operator(?),

• Using assign() function and

• Using JSON.parse() and JSON.stringify() functions.

Using the Json.parse() and Stingify() methods

Among the above mentioned three ways, for an object to be deep cloned, JSON.stringify() and JSON.parse() functions are used.

• The parse() method accepts a JSON String as a parameter and creates a JavaScript object accordingly.

• The stringify() method converts the value of a JavaScript object into a JSON String.

Using these two methods you can copy the original object in a quick and easy way into a new object. Parse can be used to copy when the given input is numbers, strings and Object literals. The parse() function will parse the string to JavaScript object, by doing this the two objects will have their individual memory.

Syntax

The syntax of parse function is given below.

JSON.parse(JSON.stringify(originalObjectName))

Example 1

This example of the parse() method. and stringify() to copy objects ?

let employee = {
   emp_name: 'Abdul Rawoof',
   company: 'Tutorials Point',
   emp_id: 'TP10000',
   role: 'Software Engineer-Intern',
   salary: 18000
}

let cpyEmployee = JSON.parse(JSON.stringify(employee))
console.log("This is the original object:",employee)
console.log("This is the new copied object:",cpyEmployee)
cpyEmployee.emp_name = 'B Jason'
cpyEmployee.emp_id = 'TP9999'
cpyEmployee.role = 'Content Writing-Intern'
console.log("The copied object with updations is:",cpyEmployee)

Example 2

Following is another example of cloning objects using the parse() and stringify() methods ?

let obj = {
   foo: 1,
   bar: { baz: 'test' }
}
let newObj = JSON.parse(JSON.stringify(obj));
obj.bar.baz = 20;
console.log(obj);
console.log(newObj);

Object.assign() method

The OBJECT.assign() 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.

Example

This example demonstrates how assign() is used to merge objects in JavaScript.

var empDetails = {
   emp_name: "Abdul Rawoof",
   emp_sex: "M",
   emp_age: 23
}
var empCompany = {
   emp_id: "TP1000",
   emp_role: "Software Engineer-Intern",
   emp_salary: 18000
}
console.log("The employee details object is:", empDetails)
console.log("The employee company object is:",empCompany)

var mergeObj = Object.assign({},empDetails,empCompany)
console.log("The merged object is",mergeObj)