How to deep clone or copy an array of objects using the JSON.stringify() method in JavaScript?
Tags: javascript
Published: 2021-06-14 00:00:00

---
  title: How to deep clone or copy an array of objects using the JSON.stringify() method in JavaScript?
  published: true
  tags: JavaScript
  date: Mon Jun 14 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/deep-clone-copy-array-of-objects-using-json-stringify-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-3d8385fd941380caaca95d9c0b5203f2.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/deep-clone-copy-array-of-objects-using-json-stringify-javascript)
  
To deep-clone an array of objects in JavaScript, we can first pass the array into the `stringify()` method on the global `JSON` object and then use the `parse()` method on the global `JSON` object to convert the array string into a valid copy of the same array.

### TL;DR

```js
// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// first convert the array into a string
// using the JSON.stringify() method
const objsArrStr = JSON.stringify(objsArr);

// conver the string again to array of objects
// using the JSON.parse() method
const objsArrDeepCopy = JSON.parse(objsArrStr);

console.log(objsArrDeepCopy);
// copied array of objects -> [{ name: "John Doe" }, { name: "Roy Daniel" }]
```

For example let's say we have an array with some objects as its elements like this,

```js
// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];
```

Now to deep clone the array including the object elements inside it we can use `JSON.stringify()` to first convert the array into a `string`. It can be done like this,

```js
// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// first convert the array into a string
// using the JSON.stringify() method
const objsArrStr = JSON.stringify(objsArr);

console.log(objsArrStr);

/*
OUTPUT
------

[
    {"name":"John Doe"},
    {"name":"Roy Daniel"}
]
*/
```

If we look at the above output we can see that the whole array is converted into a string.

Now let's use the `JSON.parse()` method to convert the above string into a valid JavaScript array of objects, **but now the references of all the objects inside the array are also new.**

```js
// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// first convert the array into a string
// using the JSON.stringify() method
const objsArrStr = JSON.stringify(objsArr);

// conver the string again to array of objects
// using the JSON.parse() method
const objsArrDeepCopy = JSON.parse(objsArrStr);

console.log(objsArrDeepCopy);
// copied array of objects -> [{ name: "John Doe" }, { name: "Roy Daniel" }]
```

We successfully made a deep copy of the array with all the object elements inside having a new reference to it. Yay! 🎊

See the above code live in [JSBin](https://jsbin.com/tuquwewavi/2/edit?js,console)

### NOTE: This method will work for those objects or arrays with JSON serializable tokens only and will not work if it has `function` types and other non-serializable item types inside the objects or arrays.

That's all 😃!

### Feel free to share if you found this useful 😃.

---