Devs Hive
Повернутися до всіх запитань

Як склонувати обʼєкт в JS?

JuniorMiddleJavaScript
Зустрічали на інтервʼю:2 користувачів

Це бородате питання, яке досі задають на інтервʼю - зазвичай в компаніях, де люди явно засиділися і пропустили безліч оновлень в JS. В цілому є три найпоширеніші способи склонувати обʼєкт в JavaScript.

Spread оператор

Це найпростіший і найелегантніший спосіб. Єдиний нюанс в тому, що spread виконує shallow (поверхневе) клонування. Це означає, що всі вкладені обʼєкти не будуть склоновані і будуть посилатися на оригінальний обʼєкт.

const user = {
id: 1,
email: "test@test.com",
notifications: {
email: true
},
externalId: BigInt(232323345555),
};

const userClone = { ...user };

// Якщо ми змінимо значення поля user.notifications.email,
// то зміниться і userClone.notifications.email
// так як userClone.notifications не був склонований
// і фактично це просто посилання на user.notifications

user.notifications.email = false;

console.log(userClone.notifications.email); // false

JSON.stringify → JSON.parse

Старий дідівський метод, який робить deep clone (глибоке клонування) обʼєкта. Це означає, що всі вкладені обʼєкти будуть склоновані. В цілому цей спосіб робочий, але має одну проблему - він працює тільки з простими типами даних.

Якщо обʼєкт має поля з Map/Set, undefined, Infinity, BigInt і т.д., ми або отримаємо помилку, або поля будуть загублені чи конвертовані в рядок. Тому використовувати такий спосіб в реальному проєкті не найкраща ідея, і краще використовувати third party або спосіб, який я опишу далі.

const user = {
id: 1,
email: "test@test.com",
notifications: {
email: true
},
externalId: BigInt(232323345555),
};

// Так як externalId, це BigInt ми отримаємо помилку і клонування не відбудеться
const userClone = JSON.parse(JSON.stringify(user));

structuredClone

Це відносно новий метод в JS, який дозволяє робити глибоке клонування, в тому числі складних типів, з якими не справляється попередній метод. Він гарно розписаний в MDN, тому для детального розбору рекомендую прочитати документацію.

const user = {
id: 1,
email: "test@test.com",
notifications: {
email: true
},
externalId: BigInt(232323345555),
};

// Клонування буде успі
const user2 = structuredClone(user);


Зустрічав на інтервʼю?

Коментарі (0)

Увійдіть, щоб залишити коментар

Поки що немає коментарів. Будьте першим!