How to create clone of any object using jQuery ?

Last Updated : 21 Jul, 2021

In this article, we will learn to create a clone of an object using jQuery. This can be achieved using the extend() method of jQuery. The extend() method is used to merge the contents of multiple objects into the object passed as the first parameter. This can be used to clone an array as we can pass an empty object as the first parameter.

An additional parameter deep can be used to make deep copies of the object. This will make the method copy the object recursively and is helpful when a complex and nested object has to be cloned. This parameter will have to be passed as the first parameter when a deep copy is needed. To understand the clone concept in jquery, please refer to jQuery clone() with Examples article.

Syntax:

// Create a clone of the object using the extend() method 
let newObj = jQuery.extend({}, obj);

// Create a deep clone of the object using the deep parameter
let newDeepObj = jQuery.extend(true, {}, obj);

The examples below illustrate the above approach:

Example 1: In this example, we will create a clone of the object using this method.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
        "https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>How to create clone of any object using jQuery?</b>

    <p>The object to be cloned is:</p>

    <pre>
    { name: "Sam", age: 5, date: Date.now() }
    </pre>

    <p>Please check the console for the cloned object</p>

    <script>
        let obj = { name: "Sam", age: 5, date: Date.now() };

        // Clone the object using
        // the extend() method
        let newObj = jQuery.extend({}, obj);

        // Print both the objects
        console.log("Original Object", obj);
        console.log("Clone Object", newObj);
    </script>
</body>

</html>

Output:

Example 2: In this method, we will create a deep clone of the object by using the deep parameter.