The global <code>structuredClone()</code> can be used to create a deep copy of a given value.
<h1 id="heading-example">Example</h1>
In this example, we clone an object. After cloning, changes to each object do not affect the other object.
<pre><code class="lang-javascript">const fruits = {
 citrus: ["orange", "grapefruit", "lime"],
};

const clonedFruits = structuredClone(fruits);

clonedFruits.citrus.push("mandarin");
fruits.citrus.pop();

console.log(clonedFruits.citrus); 
// ["orange", "grapefruit", "lime","mandarin" ]
console.log(fruits.citrus); 
// ["orange", "grapefruit"]
</code></pre>
Just remember that the <code>structuredClone()</code> method is a very recent API (For example, <code>Chrome &gt;= 98</code> and <code>Firefox &gt;= 94</code> are compatible with it). If you use it in the browser, make sure you use a build tool that provides core-js polyfills (e.g. babel).

The global `structuredClone()` can be used to create a *deep copy* of a given value.

# Example

In this example, we clone an object. After cloning, changes to each object do not affect the other object.

```javascript
const fruits = {
  citrus: ["orange", "grapefruit", "lime"],
};

const clonedFruits = structuredClone(fruits);

clonedFruits.citrus.push("mandarin");
fruits.citrus.pop();

console.log(clonedFruits.citrus); 
// ["orange", "grapefruit", "lime","mandarin" ]
console.log(fruits.citrus); 
// ["orange", "grapefruit"]
```

Just remember that the `structuredClone()` method is a very recent API (For example, `Chrome >= 98` and `Firefox >= 94` are compatible with it). If you use it in the browser, make sure you use a build tool that provides core-js polyfills (e.g. babel).

How to clone anything in JavaScript

Example