When dealing with arrays and objects in JavaScript, it is often necessary to create copies of these structures. Since both arrays and objects are mutable, understanding the implications of modifying a copied array or object on the original is crucial.

Shallow Copy

• In Shallow copy, we copy one array or object into another array or object

• If the array is not nested then changing the copied array will not change the original array

• If an array is nested then the nested array will have the same reference as the original array.

Copying the original array using the spread operator

let originalArr = [1,2,3,4]
let copiedArr = [...originalArr]
console.log(originalArr) // [1,2,3,4]
console.log(copiedArr ) // [1,2,3,4]

Copying the original array using Object.assign

let originalArr = [1,2,3,4]
let copiedArr = Object.assign([],originalArr)
console.log(originalArr) // [1,2,3,4]
console.log(copiedArr ) // [1,2,3,4]

Copying the original array using Array.from

let originalArray = [1, 2, 3, 4]
let copiedArray = Array.from(originalArray)
console.log(originalArray) // [1,2,3,4]
console.log(copiedArray) // [1,2,3,4]

Copying the original array using the slice method

let originalArray = [1, 2, 3, 4]
let copiedArray = originalArray.slice(0)
console.log(originalArray) // [1,2,3,4]
console.log(copiedArray) // [1,2,3,4]

Nested array Scenario

let originalArray = [1, 2, 3, 4, [5, 6, 7, 8]]
let copiedArray = [...originalArray]
copiedArray[4].push(9)
console.log(originalArray); // [ 1, 2, 3, 4, [ 5, 6, 7, 8, 9 ] ]
console.log(copiedArray); // [ 1, 2, 3, 4, [ 5, 6, 7, 8, 9 ] ]

• As we can see changing the copied array changes the original array as well.

• In a shallow copy, the copied array maintains references to the same nested arrays as the original array. For example, if the original array includes the nested array [5, 6, 7, 8], the copied array will also refer to the same nested array.

• So changing the nested part of the copied array will result in changing the nested part of the original array.

Nested object with Object.freeze

• Object.freeze method is used to make an object immutable.

• So let's try what happens if we use Object.freeze on original object and try to change the copied object.

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    address: {
        street: "123 Main Street",
        city: "Anytown",
        zipCode: "12345",
        country: "Exampleland"
    }
};
Object.freeze(person)

let copiedPerson = { ...person }
copiedPerson.address.city = "Newtown"

console.log(person); 
console.log(copiedPerson);

• In the person object city will be changed to Newtown, which means Object.freeze does the shallow freeze. So the solution for this issue is Deep copy.

Deep copy

• We can use several libraries like lodash, Ramda, and others which provide the facility for Deep copy.

Deep copy using lodash

var loadash = require('lodash');
const originalObject = { a: 1, b: { c: 2 } };

// Deep copy using Lodash's cloneDeep
const lodashDeepCopy = loadash.cloneDeep(originalObject);

lodashDeepCopy.a = 10;
lodashDeepCopy.b.c = 20;

console.log(originalObject); // Output: { a: 1, b: { c: 2 } }
console.log(lodashDeepCopy); // Output: { a: 10, b: { c: 20 } }

Changing the value inside the lodashDeepCopy does not change the originalObject.

Deep copy using Vanilla js

const makeDeepCopy = (data) => {
    // if passed data is not a object then return
    if (typeof data !== "object" || data === null) {
        return data
    }
    // if data is a array then create a empty array else a empty a object
    let deepCloneObject = Array.isArray(data) ? [] : {}
    // iterating over each element
    for (let key in data) {
        const value = data[key]
        // running the makeDeepCopy to check whether the element is of type object or not.
        deepCloneObject[key] = makeDeepCopy(value);
    }
    return deepCloneObject
}

let arr1 = [1, 2, 3, 4, [5, 6, 7, 8]]
let arr2 = makeDeepCopy(arr1)
arr2[4].push(9)
console.log(arr1); // [ 1, 2, 3, 4, [ 5, 6, 7, 8 ] ]
console.log(arr2); // [ 1, 2, 3, 4, [ 5, 6, 7, 8, 9 ] ]

let obj1 = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    address: {
        street: '123 Main Street',
        city: 'New york',
        zipCode: '12345',
        country: 'Exampleland'
    }
}
let obj2 = makeDeepCopy(obj1)
obj2.address.city = "New Town"
console.log(obj1); 
console.log(obj2);

Conclusion

• Shallow copy is useful when the array or object to be copied is not nested.

• Deep copy should be preferred when the array or object is nested.

• But while working with Deep copy performance should also be considered as Deep copy operation is slower than Shallow copy.