🤔 Как избежать ссылочной зависимости при копировании объекта?

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

🟠Использование JSON.stringify и JSON.parse
Этот метод подходит для простых объектов, не содержащих функций, специальных объектов (например, Date) или циклических ссылок.

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = JSON.parse(JSON.stringify(original));
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование рекурсивной функции для глубокого копирования
Этот метод позволяет точно контролировать процесс копирования и обрабатывать более сложные структуры данных.

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        const arrCopy = [];
        obj.forEach((item, index) => {
            arrCopy[index] = deepClone(item);
        });
        return arrCopy;
    }

    const objCopy = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }
    return objCopy;
}

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = deepClone(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование библиотеки lodash
Lodash предоставляет удобную функцию cloneDeep для глубокого копирования объектов.

const _ = require('lodash');

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = _.cloneDeep(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование структурированной клонирования (Structured Clone)
Метод structuredClone позволяет создавать глубокие копии объектов. Этот метод является частью HTML Living Standard и поддерживается в некоторых современных браузерах и средах исполнения.

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = structuredClone(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

Ставь 👍 и забирай 📚 Базу знаний