Implementing deep cloning of objects in jQuery

Implementing Deep Cloning of Objects in jQuery

Introduction to Cloning Objects in JavaScript

When working with JavaScript, it is common to need a copy of an object, but there are two types of copying: shallow copy and deep copy (also known as deep cloning).

A shallow copy only copies references to nested objects, meaning if the original object changes, the copied object will reflect those changes.
A deep copy creates a completely new instance of the object, including all nested objects, so changes to the original object do not affect the copy.

jQuery provides a convenient way to deep clone objects using its built-in .extend() method.

1. Understanding Object Cloning

1.1 Shallow Cloning

A shallow clone is created when only the top-level properties of an object are copied, while any nested objects inside remain referenced.

Example of shallow cloning:

let obj1 = { name: "John", details: { age: 30, city: "New York" } };
let obj2 = Object.assign({}, obj1); 

obj2.details.city = "Los Angeles";

console.log(obj1.details.city); // Output: "Los Angeles" (Unexpected!)

Even though obj2 is supposed to be a copy, changes in the details property affect obj1 because Object.assign() only makes a shallow copy.

1.2 Deep Cloning

A deep clone ensures that the entire object, including nested objects, is copied independently.

Example of deep cloning using JSON methods:

let obj1 = { name: "John", details: { age: 30, city: "New York" } };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.details.city = "Los Angeles";

console.log(obj1.details.city); // Output: "New York" (As expected)

Here, JSON.stringify() converts the object to a string, and JSON.parse() creates a new object. However, this method does not handle functions, Date, RegExp, Map, Set, etc.

2. Deep Cloning with jQuery

jQuery provides a better alternative for deep cloning with the $.extend() method.

2.1 Using `$.extend()`

The $.extend() method can be used to deep clone objects by passing true as the first argument.

Syntax:

$.extend(deep, target, object1, object2, ...);

deep: A Boolean (true for deep copy, false for shallow copy).
target: The object that receives properties.
object1, object2, ...: The source objects to copy properties from.

2.2 Example of Deep Cloning with jQuery

let obj1 = { 
    name: "Alice", 
    details: { age: 25, city: "London" },
    hobbies: ["reading", "traveling"]
};

let obj2 = $.extend(true, {}, obj1);

obj2.details.city = "Paris";
obj2.hobbies.push("coding");

console.log(obj1.details.city); // Output: "London" (Deep clone successful)
console.log(obj1.hobbies); // Output: ["reading", "traveling"] (Original array unaffected)

Since we passed true as the first parameter, $.extend() ensures that nested objects are also copied independently.

3. Advantages of `$.extend()` for Deep Cloning

3.1 Supports Nested Objects

Unlike Object.assign(), jQuery’s $.extend(true, ...) method correctly copies deeply nested objects.

3.2 Preserves Arrays and Functions

The $.extend() method handles arrays and functions correctly.

Example:

let obj1 = {
    name: "Eve",
    greet: function() { console.log("Hello, world!"); },
    skills: ["JavaScript", "jQuery"]
};

let obj2 = $.extend(true, {}, obj1);

obj2.skills.push("React");
console.log(obj1.skills); // Output: ["JavaScript", "jQuery"] (Original unaffected)

obj2.greet(); // Output: "Hello, world!" (Function preserved)

This method correctly preserves functions and arrays, making it better than JSON-based deep cloning.

3.3 Avoids Common Cloning Pitfalls

It prevents modifying the original object unintentionally.
Works with nested objects and arrays.
Avoids prototype pollution issues.

4. Alternative Methods for Deep Cloning

4.1 Using `structuredClone()`

Modern JavaScript provides structuredClone() for deep cloning:

let obj1 = { name: "Sam", details: { age: 28 } };
let obj2 = structuredClone(obj1);

obj2.details.age = 30;
console.log(obj1.details.age); // Output: 28 (Deep clone successful)

However, structuredClone() does not work in older browsers, making $.extend() a better cross-browser solution.

4.2 Using Lodash `_.cloneDeep()`

If you’re using Lodash, you can use _.cloneDeep() for deep cloning.

let obj1 = { name: "Tom", details: { age: 22 } };
let obj2 = _.cloneDeep(obj1);

This is an alternative to $.extend() but requires the Lodash library.

5. Best Practices for Deep Cloning in jQuery

5.1 Always Use `$.extend(true, {}, object)`

For deep cloning, always pass true as the first argument.

let deepCopy = $.extend(true, {}, originalObject);

5.2 Avoid Directly Modifying Cloned Objects

Instead of modifying the original object, always modify the cloned copy.

let objCopy = $.extend(true, {}, obj);
objCopy.details.city = "Tokyo";

5.3 Use `structuredClone()` or Lodash for Large Data

For extremely large and complex objects, consider using structuredClone() or Lodash.

5.4 Be Careful with Circular References

If an object has circular references, $.extend() will cause infinite recursion.

Example of a circular reference:

let obj = { name: "Bob" };
obj.self = obj; // Circular reference
let clone = $.extend(true, {}, obj); // Causes infinite loop

To handle circular references, use structured cloning libraries.

jQuery’s $.extend(true, {}, object) method is a powerful way to deep clone objects.
It correctly handles nested objects, arrays, and functions, unlike Object.assign().
It is a reliable cross-browser solution but should be used cautiously with circular references.

By following best practices, you can ensure safe and efficient deep cloning of objects in jQuery.