Глубокое копирование против поверхностного копирования в JavaScript

Глубокое копирование против поверхностного копирования в JavaScript

Поверхностное копирование

Создается новый объект, который имеет точную копию значений исходного объекта. Если исходный объект указывает на другой объект, отдельная копия этого объекта не создается, а передается ссылка на этот объект.

const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}
const b = {...a}; // shallow copy occurs here
// the above operator is called 'Shallow Operator'
b.addr.city = "Sambalpur"; // Shallow Copy
b.name = "A. Panda"; // Deep Copy
// separate references for name is created here
console.log(a.name, b.name); 
// a.addr and b.addr point to the same object reference
console.log(a.addr, b.addr);

Выход :

Sambalpur Sambalpur
S. Sahu A. Panda

Глубокое копирование

Глубокая копия копирует все поля и создает копии динамически выделенной памяти, на которую указывают поля. Глубокая копия возникает, когда объект копируется вместе с объектами, на которые он ссылается.

const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}
const b = {
    name: a.name,
    addr: {
        city: a.city
    }
};
b.addr.city = "Sambalpur";
b.name = "A. Panda";
console.log(a.addr.city, b.addr.city);
console.log(a.name, b.name)

Выход :

Behrampur Sambalpur
S. Sahu A. Panda

Создать ссылку

Создается ссылка на исходный объект. Любые изменения, внесенные в новый объект, отражаются в исходном объекте.

const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}
const b = a;
b.addr.city = "Sambalpur";
b.name = "A. Panda";
console.log(a.addr.city, b.addr.city);
console.log(a.name, b.name)

Выход :

Sambalpur Sambalpur
A. Panda A. Panda

!! Удачного кодирования !!