let message = "Hello!";
let phrase = message;
그런데 객체의 동작방식은 이와 다릅니다.
변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'저장 됩니다.
let user ={
name:"John"
};
let user = { name:"John"};
let admin = user; //참조값을 복사함
let user = { name: 'John' };
let admin = user;
admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨
console.log(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함
let a = {};
let b = a; // 참조에 의한 복사
console.log( a == b ); // true, 두 변수는 같은 객체를 참조합니다.
console.log( a === b ); // true
let a = {};
let b = {}; // 독립된 두 객체
alert( a == b ); // false
객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다는 걸 배움
그런데 객체를 복제하고 싶다면 어떻게 해야 할까요? 기존에 있던 객체와 똑같으면서 독립적인 객체를 만들고 싶다면 말이죠.
방법은 있는데 자바스크립트는 객체 복제 내장 메서드를 지원하기 때문에 조금 어렵습니다. 사실 객체를 복제해야 할 일은 거의 없습니다. 참조에 의한 복사로 해결 가능한 일이 대다수이죠.
정말 복제가 필요한 상황이라면 새로운 객체를 만든 다음 객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티를 복사
let user = {
name: "John",
age: 30
};
let clone = {}; // 새로운 빈 객체
// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
clone[key] = user[key];
}
// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.
console.log( user.name ); // 기존 객체에는 여전히 John이 있습니다.
Object.assign(dest,[src1,src2,src3...])
첫 번째 인수 dest는 목표로 하는 객체
이어지는 인수 src1, ..., srcN는 복사하고자 하는 객체입니다. ...은 필요에 따라 얼마든지 많은 객체를 인수로 사용할 수 있다는 것을 나타냅니다.
객체 src1, ..., srcN의 프로퍼티를 dest에 복사합니다. dest를 제외한 인수(객체)의 프로퍼티 전부가 첫 번째 인수(객체)로 복사됩니다.
마지막으로 dest를 반환합니다.
assign 메서드를 사용해 여러 객체를 하나로 병합하는 예시
let user = { name: "John" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);
// now user = { name: "John", canView: true, canEdit: true }
let user = { name: "John" };
Object.assign(user, { name: "Pete" });
console.log(user.name); // user = { name: "Pete" }
let user = {
name: "John",
age: 30
};
let clone = Object.assign({}, user);
let user = {
name: "John",
sizes: {
height: 182,
width: 50
}
};
console.log( user.sizes.height ); // 182
let user = {
name: "John",
sizes: {
height: 182,
width: 50
}
};
let clone = Object.assign({}, user);
console.log( user.sizes === clone.sizes ); // true, 같은 객체입니다.
// user와 clone는 sizes를 공유합니다.
user.sizes.width++; // 한 객체에서 프로퍼티를 변경합니다.
console.log(clone.sizes.width); // 51, 다른 객체에서 변경 사항을 확인할 수 있습니다.
이 문제를 해결하려면 user[key]의 각 값을 검사하면서, 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용, 이런 방식을 '깊은 복사'라고 함
깊은 복사 시 사용되는 표준 알고리즘인 Structured cloning algorithm을 사용하면 위 사례를 비롯한 다양한 상황에서 객체를 복제
자바스크립트 라이브러리 lodash의 메서드인 _.cloneDeep(obj)을 사용하면 이 알고리즘을 직접 구현하지 않고도 깊은 복사를 처리할 수 있으므로 참고하시기 바랍니다.
위 내용은 javascript.info 사이트에서 공부한 내용 정리
자세한 내용은 아래 링크로 참고 바랍니다.
https://ko.javascript.info/object-copy