Copying Objects and Arrays in Angular: Beyond angular.copy

• angular.copy was a function provided in Angular 1.x that performed a deep copy of objects and arrays.
• Deep copying means creating a new object entirely, with all its properties and nested structures replicated, independent of the original.
• This is crucial when you want to modify a copy of data without affecting the original in your Angular application.

Alternatives in Modern Angular (2 and above):

Since angular.copy is no longer available in Angular 2 and later versions, here are some effective replacements:

1. Object.assign() (Shallow Copy):

   • Object.assign(target, source) copies properties from source to target.
   • It's a shallow copy, meaning only the top-level properties are copied. Nested objects or arrays will still reference the originals.

   const originalObject = { name: 'Alice', address: { city: 'New York' } };
   const shallowCopy = Object.assign({}, originalObject); // Only top-level properties copied
   
   shallowCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
   console.log(originalObject.name); // Still outputs 'Alice'
   

2. JSON.parse(JSON.stringify()) (Deep Copy, Potential Issues):

   • This approach involves converting the object to a JSON string and then parsing it back into a new object.
   • While it achieves deep copying, it has limitations:
     • Circular references (objects referencing themselves) can cause errors.
     • Dates, custom objects, and functions might not be serialized correctly.

   const originalObject = { name: 'Alice', address: { city: 'New York' } };
   const deepCopy = JSON.parse(JSON.stringify(originalObject));
   
   deepCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
   console.log(originalObject.name); // Still outputs 'Alice'
   

3. Third-Party Libraries (Lodash, Underscore):

   • Libraries like Lodash and Underscore provide utility functions for deep copying:
     • Lodash: _.cloneDeep(object)
     • Underscore: _.clone(object) (might perform shallow copy, check documentation)
   • These libraries offer additional functionality beyond deep copying.

   Example using Lodash:

   const _ = require('lodash'); // Assuming Lodash is installed
   
   const originalObject = { name: 'Alice', address: { city: 'New York' } };
   const deepCopy = _.cloneDeep(originalObject);
   
   deepCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
   console.log(originalObject.name); // Still outputs 'Alice'
   

Choosing the Right Alternative:

The best alternative depends on your specific needs:

• If you only need to copy top-level properties, Object.assign() is sufficient.
• For deep copying with potential caveats, consider JSON.parse(JSON.stringify()).
• If you need deep copying with robust handling of complex objects and require additional utilities, third-party libraries like Lodash are a good choice.

const originalObject = { name: 'Alice', address: { city: 'New York' } };
const shallowCopy = Object.assign({}, originalObject); // Only top-level properties copied

console.log(shallowCopy); // Outputs: { name: "Alice", address: { city: "New York" } }

shallowCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
console.log(originalObject.name); // Still outputs 'Alice'

const originalObject = { name: 'Alice', address: { city: 'New York' } };
const deepCopy = JSON.parse(JSON.stringify(originalObject));

console.log(deepCopy); // Outputs: { name: "Alice", address: { city: "New York" } } (might differ for Dates or custom objects)

deepCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
console.log(originalObject.name); // Still outputs 'Alice'

Lodash (Third-Party Library - Deep Copy):

const _ = require('lodash'); // Assuming Lodash is installed

const originalObject = { name: 'Alice', address: { city: 'New York' } };
const deepCopy = _.cloneDeep(originalObject);

console.log(deepCopy); // Outputs: { name: "Alice", address: { city: "New York" } }

deepCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
console.log(originalObject.name); // Still outputs 'Alice'

Explanation of Outputs:

• Object.assign() creates a new object with the same top-level properties as the original, but nested objects still reference the original.
• JSON.parse(JSON.stringify()) attempts a deep copy, but might have issues with complex objects or circular references (outputs might differ slightly).
• Lodash's _.cloneDeep() provides a reliable deep copy solution, ensuring all properties and nested structures are replicated independently.

• Introduced in ES6 (ECMAScript 2015), the spread syntax (...) can be used for shallow copying of objects and arrays.
• It creates a new object/array with the same properties/elements spread out from the original.

const originalObject = { name: 'Alice', address: { city: 'New York' } };
const shallowCopy = { ...originalObject }; // Only top-level properties copied

console.log(shallowCopy); // Outputs: { name: "Alice", address: { city: "New York" } }

shallowCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
console.log(originalObject.name); // Still outputs 'Alice'

Recursive Function (Deep Copy, Custom Logic):

• You can create a custom function that traverses the original object/array recursively, creating new objects/arrays at each level and copying values.
• This approach offers flexibility to handle specific data structures or edge cases.

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // Base case: return primitives or null
  }

  if (Array.isArray(obj)) {
    return obj.map(deepCopy); // Deep copy array elements
  } else {
    const newObj = {};
    for (const key in obj) {
      newObj[key] = deepCopy(obj[key]); // Deep copy object properties
    }
    return newObj;
  }
}

const originalObject = { name: 'Alice', address: { city: 'New York' } };
const deepCopy = deepCopy(originalObject);

console.log(deepCopy); // Outputs: { name: "Alice", address: { city: "New York" } } (deep copy)

deepCopy.name = 'Bob'; // Modifies the copy, original remains unchanged
console.log(originalObject.name); // Still outputs 'Alice'

• Consider Object.assign() or spread syntax for simple shallow copying.
• If you need deep copying with control over the process, a custom recursive function provides flexibility.
• Third-party libraries like Lodash offer pre-built deep copy functionality and often include additional utility functions.