Copy Objects in JavaScript

JavaScript is all about Objects. However, working with Objects or using the OOPs approach to your application is still difficult for many. Through this blog, together we are going to learn something useful regarding Copying the Objects in JavaScript

Why to Copy Objects?

JavaScript has two types of data types, Primitive Data type & Reference Data type. Objects are under the reference Data type which means they are accessed by reference (They don't have value, they hold a pointer pointing towards allocated memory). Other reference data type are Array, Functions, Date, etc.

Consider the below JS code, where we have empObj and whose value is assigned to newObj:

const empObj = { Name: 'John Doe', empId: 123, location: 'NewYork' };
const newObj = empObj;

Now suppose we try to change the location for the newObj and print both the objects in terminal, then the modified code will be:

newObj.location = 'Chicago';
console.log(empObj, newObj);

Output will be :

{ Name: 'John Doe', empId: 123, location: 'Chicago' } { Name: 'John Doe', empId: 123, location: 'Chicago' }

So Objects being the reference data type, if we change newObj, empObj also gets changed. Therefore old(original) object is also affected.

What can be done?

To ensure that the original object, in our case empObj is not changed we have to copy an object in javascript instead of assigning it to a new variable.

How to Copy objects in javascript?

For that, we have two widely-used options available for us:

• Using spread operator
• Using Object.assign()

Spread Operator(...)

ES6 in JavaScript provides a spread operator that lets us create copies of JS objects. Not only objects, but you can even create copies of the array also with the spread operator.

Syntax

Using ... (three dots) inside an object, array, or function call they work as a spread operator.

const newObject = {...oldObject}

This copies the value of oldObject into newObject. Therefore it makes newObject & oldObject points at different locations

Application in our code:

Consider the below-modifed code:

const empObj = { Name: 'John Doe', empId: 123, location: 'NewYork' };
const newObj = { ...empObj };
newObj.location = 'Chicago';
console.log(empObj, newObj);

If we run the above script, we will get the output as

{ Name: 'John Doe', empId: 123, location: 'NewYork' } { Name: 'John Doe', empId: 123, location: 'Chicago' }

Objects.assign()

This assign() method in JavaScript copies all the properties from old object into new object. It returns the newly created object

Syntax

Object.assign(newObject,oldObject)
This copies the value of oldObject into newObject. Therefore it makes newObject & oldObject points at different locations.

Application in our code:

Consider the below-modifed code:

const empObj = { Name: 'John Doe', empId: 123, location: 'NewYork' };
const newObj = Object.assign({}, empObj);
newObj.location = 'Chicago';
console.log(empObj, newObj);

If we run the above script, we will get the output as

{ Name: 'John Doe', empId: 123, location: 'NewYork' } { Name: 'John Doe', empId: 123, location: 'Chicago' }

There is one more way of copying Object (Not discussed in the blog) is using JSON.stringify() and JSON.parse().

These are quite useful techniques for copying the objects in JavaScript. I hope that this blog would be quite helpful to you and solve your queries.