Deleting the grandchild of copied object will remove it from the original object

Question

In the following code snippet, I want to remove part of the object using the removeItem() function. There is no problem when I delete the first level child of the object but when i delete second and more level children this value is also removed from the originalObject while I want to make no changes to the originalObject.

let originalObject = {
    name : 'Jack',
    job: 'teacher',
    friends : 10,
    car : {
        name : 'pride',
        color : 'white',
    }
};

function removeItem(obj) {
    let copiedObject = Object.assign({}, obj);
    delete copiedObject.friends;
    delete copiedObject.car.color;

    return copiedObject;
}

let newObject = removeItem(originalObject);

console.log(newObject);
console.log(originalObject);

Answer 1

We can try to use JSON.parse(JSON.stringify(obj)), as object does not have any functions:

function removeItem(obj) {
    let copiedObject = JSON.parse(JSON.stringify(obj));
    delete copiedObject.friends;
    delete copiedObject.car.color;

    return copiedObject;
}

An example:

let originalObject = {
    name : 'Jack',
    job: 'teacher',
    friends : 10,
    car : {
        name : 'pride',
        color : 'white',
    }
};

function removeItem(obj) {
    let copiedObject = JSON.parse(JSON.stringify(obj));
    delete copiedObject.friends;
    delete copiedObject.car.color;

    return copiedObject;
}

console.log(`originalObject before`, originalObject);
let newObject = removeItem(originalObject);

console.log(`newObject`, newObject);
console.log(`originalObject after`, originalObject);

Answer 2

Actually what you are doing is a shallow copy, if you want to have a complete separate copy of your objects, then you have to do a deep clone like the following code snippet:

let originalObject = {
    name : 'Jack',
    job: 'teacher',
    friends : 10,
    car : {
        name : 'pride',
        color : 'white',
    }
};

function removeItem(obj) {
    let copiedObject = JSON.parse(JSON.stringify(obj));
    delete copiedObject.friends;
    delete copiedObject.car.color;

    return copiedObject;
}

let newObject = removeItem(originalObject);

console.log(newObject);
console.log(originalObject);

Check this article for more information about object cloning

Answer 3

"For deep cloning, we need to use alternatives, because Object.assign() copies property values."

"If the source value is a reference to an object, it only copies the reference value."

Detail