Deep Copy of Arrays and Objects in JavaScript: Implementing Fully Independent Data Replicas

Introduction

In JavaScript development, copy operations for arrays and objects are common and crucial technical requirements. When creating completely independent data replicas is necessary, simple reference assignments often fall short, especially when array elements are objects, where modifying an element in one array may unexpectedly affect another. This article systematically explores technical solutions for deep copy implementation, starting from fundamental concepts.

Basic Concepts of Shallow Copy and Deep Copy

JavaScript data types are divided into primitive types and reference types. For primitive types (such as numbers, strings, booleans), assignment operations create independent value copies; for reference types (such as objects, arrays), assignment operations only copy reference addresses, causing multiple variables to point to the same memory space. This characteristic necessitates distinguishing between shallow copy and deep copy during data copy operations.

Shallow copy only replicates the first-level properties of an object. If property values are reference types, they still share the same reference. Deep copy recursively copies all levels of properties, creating completely independent data structures. In practical development, the choice of copy method depends on specific business requirements.

Implementing Array Deep Copy Using Map Method

When the target array does not yet exist, the Array.prototype.map method can be used to create a new array while performing copy operations on each object element during traversal. The core advantage of this approach lies in its functional programming characteristics, maintaining code conciseness and readability.

Here is an example using spread operator for object shallow copy:

const newArray = sourceArray.map(obj => ({...obj}));

This method performs shallow copy on each object in the array, creating new object instances. Note that if objects contain nested objects, inner objects still maintain reference sharing, requiring deep copy strategies in such cases.

Implementation Solutions for Deep Copy

For complex objects containing nested structures, recursive copy mechanisms need to be implemented. Below is a basic deep copy function implementation:

function naiveDeepCopy(obj) {
    const newObj = {};
    for (const key of Object.getOwnPropertyNames(obj)) {
        const value = obj[key];
        if (value && typeof value === "object") {
            newObj[key] = {...value};
        } else {
            newObj[key] = value;
        }
    }
    return newObj;
}
const sourceArray = [
    {
        name: "joe",
        address: {
            line1: "1 Manor Road",
            line2: "Somewhere",
            city: "St Louis",
            state: "Missouri",
            country: "USA",
        },
    },
    {
        name: "mohammed",
        address: {
            line1: "1 Kings Road",
            city: "London",
            country: "UK",
        },
    },
    {
        name: "shu-yo",
    },
];
const newArray = sourceArray.map(naiveDeepCopy);
newArray[0].name = newArray[0].name.toLocaleUpperCase();
newArray[0].address.country = "United States of America";
console.log("Original:", sourceArray);
console.log("Copy:", newArray);

While this implementation is simple, it can handle basic nested object structures. In actual projects, more edge cases need consideration, such as circular references and handling of special object types (Date, RegExp, etc.).

Appending Copied Elements to Existing Arrays

When the target array already exists and source array content needs to be appended, loop traversal can be employed:

for (const obj of sourceArray) {
    destinationArray.push(copy(obj));
}

Or using a more concise functional approach:

destinationArray.push(...sourceArray.map(obj => copy(obj)));

This method combines spread operator with map method, maintaining code conciseness while ensuring independent copy of each element.

Alternative Approaches and Considerations

Beyond the methods mentioned above, JSON serialization is another common deep copy technique:

var cloneArray = JSON.parse(JSON.stringify(originalArray));

The advantage of this method lies in its simplicity, capable of handling most common data structures. However, its limitations are evident: inability to copy functions, undefined values, circular references, and special object types. Therefore, copy solution selection requires balancing based on specific data types.

Performance Considerations and Best Practices

Deep copy operations may incur performance overhead, especially when processing large data structures. Developers should choose appropriate copy strategies based on actual requirements: for immutable data, structural sharing techniques may be considered; for frequently updated data, the impact of copy frequency on performance needs evaluation.

In practical development, it is recommended to: clarify copy requirements and select appropriate copy depth; for large datasets, consider chunked copying or using Web Workers; establish unified copy standards within teams to ensure code consistency.

Conclusion

Deep copy of arrays and objects in JavaScript is a comprehensive technical issue involving language characteristics, performance considerations, and business requirements. Through rational application of map method, recursive copy functions, and appropriate alternative solutions, developers can create completely independent data replicas, ensuring data integrity and stability in applications. As the JavaScript language continues to evolve, new copy techniques and tools are constantly emerging, making continuous learning and exploration of new technologies an important path to enhancing development capabilities.