참조에 의한 객체 복사
let user1 = {
name : '홍길동'
}
let user2 = user1;
user1.name = '강감찬';
console.log(user1.name); // 강감찬
console.log(user2.name); // 강감찬
javscript는 객체가 할당될 때 참조 값에 의해 복사가 됩니다.
메모리에 name이라는 프로퍼티가 생성이 되고 각 객체는 메모리에 위치하는 주소 값(참조값)을 할당받게 됩니다.
user1이나, user2는 같은 name주소를 가르키고 있어서 한쪽 객체에서 변경을 시도하면 다른 객체에서도 변경된 값을 보게 됩니다.
독립적인 객체 복제 Object.assign()
let user1 = {
name : '홍길동',
info : {
addr : '서울',
age : 20
}
}
let user2 = {}
Object.assign(user2, user1);
user1.name='강감찬';
user1.info.addr='부산';
console.log(user1.name); // 강감찬
console.log(user1.info.addr); // 부산
console.log(user2.name); // 홍길동
console.log(user2.info.addr); // 부산Object.assign을 이용해 객체를 독립적으로 복사가 가능합니다.
하지만 객체안에 다른 객체가 있다고 하면 그 객체는 주소 값을 참조하기 때문에 주의를 해야 합니다.
중첩 객체를 복사하기 위해서는 직접 코드를 작성하는 방법도 있겠지만 lodash라이브러리를 이용한 _.cloneDeep(obj)를 활용하는게 빠르고 편리합니다.
let target = _.cloneDeep(obj);
'프론트 엔드 > JavaScript' 카테고리의 다른 글
| 개발노트 :: 자바스크립트(JavaScript) iterable 객체 (0) | 2022.03.23 |
|---|---|
| 개발노트 :: 자바스크립트(JavaScript) 배열과 내장함수 push, unshift, shift, pop (0) | 2022.03.22 |
| 개발노트 :: 자바스크립트(JavaScript) this 활용 (0) | 2022.03.18 |
| 개발노트 :: 자바스크립트(JavaScript) 객체 생성 (0) | 2022.03.15 |
| 개발노트 :: 자바스크립트(JavaScript) 변수 (0) | 2022.03.02 |
