Deep Tech Point - learn tech easy way

In this article, we are going to present how to clone an object in Javascript. There are actually at least four ways to copy an object and they differ from each other in a few ways. You can use:

the spread syntax,
the object rest syntax,
object.assign() method,
and the JSON.stringify() and JSON.parse() methods.

So, take a look at each and see when it’s best to use a specific method.

1. Use the spread syntax to clone an object in JavaScript

The simplest way to clone a plain JavaScript object is to use the object spread operator. However, be aware that using the spread method will create a shallow clone aka copy, which means that some values will still be connected to the original variable. In cases when we deal with a shallow clone you only copy the actual object. However, if the object you’re trying to copy contains nested objects, these nested objects will not get cloned. It’s important to note this will only work in ECMAScript 2018 version of Javascript.

The syntax for the spread method looks like this:

const clone = {
  ...object
};

The object is the entity you are copying, and a clone represents the shallow copy of an object.

Let’s take a look at an example of a spread method:

const car = {
  brand: 'BMW',
  model: 'X6'
};

const carClone = {
  ...car
};

// { brand: 'BMW', model: 'X6' }
console.log(carClone);

// false - objects are obviously not the same even they have same properties
console.log(car === carClone);

2. Use the object rest syntax to clone in JavaScript

Another simple way to create a shallow copy of objects in JavaScript is to use the object rest operator – a syntax for object rest operator looks like this:

const { ...clone } = object;

Let’s take a look at an example when using the rest operator to make a copy of an object:

const car = {
  brand: 'BMW',
  model: 'X6'
};

const { ...carClone } = car;

// { brand: 'BMW', model: 'X6' }
console.log(carClone);

// false - objects are not the same but they have same properties
console.log(car === carClone);

3. Use object.assign() method to clone an object in JavaScript

Another option to cloning an object in JavaScript is to use the object.assign() method. Notice that this method, too, creates a shallow copy of an object – this method will copy all enumerable own properties (properties whose internal enumerable flag is set to true) from one or more source objects to a target object. Object.assign() method will return the target object. Properties in the sources that have the same key will overwrite all properties located in the target object, and the earlier properties will be overwritten by the later sources’ properties.

Object.assign() method is one of the best methods if you need to copy only a single level of an object and if you need to copy an object with more complex properties.

The syntax for the object.assign method looks like this:

var objectCopy = Object.assign({}, objectToCopy);

Do you notice that empty {} as the first argument? Well, this empty object will make sure that you don’t mutate the original object – you won’t pollute the object you’re copying with any unwanted properties.

Let’s use Object.assign() in an example and create a clone object of an object:

const car = {
  brand: 'BMW',
  model: 'X6'
};

const carClone = Object.assign({}, car);

// { brand: 'BMW', model: 'X6' }
console.log(carClone);

// false
console.log(car === carClone);

Also, note that because object.assign() method uses [[Get]] on the source and [[Set]] on the target, it assigns properties, so this method is not appropriate for merging new properties into a prototype if the merge sources contain getters.

4. Use the JSON.parse() and JSON.stringify() methods to clone an object in JavaScript

Finally, JSON will give you a deep copy, which means the value of the newly created variable will not be connected to the original variable and you will be able to change the value in either the original object or the cloned one without affecting the other value.

A syntax for JSON.parse() and JSON.stringify() method looks like this:

var objectCopy = JSON.parse(JSON.stringify(objectToCopy));

You probably already know that JSON refers to a built-in object in Javascript. With JSON.stringify you will convert a Javascript object to a JSON string, while JSON.parse will allow you to go into the other direction, you will convert a JSON string into an object. So, when you use both, you first make a JSON string from the object you are trying to copy (JSON.stringify(objectToCopy)) and then when you have that JSON string, with a JSON.parse() method you make a new object from that string. This way you create a new object – a clone or a copy of an old one, and if you are trying to change values in either of them, that change will not affect the other object. And this is exactly what a deep clone means – the value of the new variable is disconnected from the original variable.

Notice that this method works very good if your object has relatively simple data – JSON supports data types such as strings, numbers, true, false, null, and nested objects, so as long as your object isn’t made of more complex data, you will be perfectly fine using this method.

Javascript clone object