Different techniques for copying objects in JavaScript

In JavaScript, objects are collections of key-value pairs. The properties of the object are the keys and are denoted with strings. The value of the key is the value of the property of the given object.

Types of Object Copying

There are 2 types of copying objects: shallow copy and deep copy.

Shallow Copy

In shallow copy, an object is copied at the top level only. If the object contains nested objects, only the references are copied, not the actual nested objects.

Example

Following is an example of shallow copy using Object.assign():

let innerObj = {
   a: 'b',
   c: 'd'
}
let obj = {
   x: "test",
   y: innerObj
}

// Create a shallow copy
let copyObj = Object.assign({}, obj);

// Both copyObj and obj's prop y now refers to the same innerObj
innerObj.a = "test"
console.log("Original object:", obj)
console.log("Copied object:", copyObj)

Original object: { x: 'test', y: { a: 'test', c: 'd' } }
Copied object: { x: 'test', y: { a: 'test', c: 'd' } }

Note that shallow copies do not make clones recursively. Changes to nested objects affect both the original and copy.

Deep Copy

In deep copy, the object is completely duplicated. All nested objects are also cloned, creating completely independent copies.

Example

Following is an example of deep copy using JSON methods:

let innerObj = {
   a: 'b',
   c: 'd'
}
let obj = {
   x: "test",
   y: innerObj
}

// Create a deep copy
let copyObj = JSON.parse(JSON.stringify(obj))

// Now changes to innerObj won't affect copyObj
innerObj.a = "test"
console.log("Original object:", obj)
console.log("Deep copied object:", copyObj)

Original object: { x: 'test', y: { a: 'test', c: 'd' } }
Deep copied object: { x: 'test', y: { a: 'b', c: 'd' } }

Using Spread Operator (...)

The spread operator creates a shallow copy by expanding the object properties into a new object.

Example

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

console.log("Original object:", employee)
var cpyEmployee = {...employee}
console.log("Copied object:", cpyEmployee)

Original object: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
Copied object: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }

Using Object.assign()

The Object.assign() method creates a shallow copy of an object. It takes a target object and source objects as parameters.

Syntax

Object.assign({}, originalObjectName)

Example

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

console.log("Original object:", employee)
var cpyEmployee = Object.assign({}, employee)
console.log("Copied object:", cpyEmployee)

// Modify the copy
cpyEmployee.emp_name = "Jason"
cpyEmployee.job = "Content writer-Intern"
console.log("Modified copy:", cpyEmployee)
console.log("Original remains unchanged:", employee)

Original object: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
Copied object: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
Modified copy: { emp_name: 'Jason', company: 'Tutorials Point', salary: 18000, job: 'Content writer-Intern' }
Original remains unchanged: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }

Using JSON Methods

The JSON.parse(JSON.stringify()) method creates a deep copy by converting the object to a string and parsing it back.

Syntax

JSON.parse(JSON.stringify(originalObjectName))

Example

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("Original object:", employee)
console.log("Deep copied object:", cpyEmployee)

cpyEmployee.emp_name = 'B Jason'
cpyEmployee.emp_id = 'TP9999'
cpyEmployee.role = 'Content Writing-Intern'

console.log("Modified copy:", cpyEmployee)
console.log("Original unchanged:", employee)

Original object: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', emp_id: 'TP10000', role: 'Software Engineer-Intern', salary: 18000 }
Deep copied object: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', emp_id: 'TP10000', role: 'Software Engineer-Intern', salary: 18000 }
Modified copy: { emp_name: 'B Jason', company: 'Tutorials Point', emp_id: 'TP9999', role: 'Content Writing-Intern', salary: 18000 }
Original unchanged: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', emp_id: 'TP10000', role: 'Software Engineer-Intern', salary: 18000 }

Comparison

Conclusion

Use shallow copying for simple objects without nested structures. For objects with nested properties, use deep copying with JSON methods to ensure complete independence between original and copied objects.