객체를 복사하면 참조에 의한 복사로 같은 데이터를 참조하게 된다. 따라서 복사한 변수에 할당된 객체를 변경하면 기존 값도 변경됨
객체에 대한 복사를 구분할 때
1.
단순복제는 완전히 동일한 객체, 참조하는 것이 같다.
2.
얕은복사(shallow copy)는 복합객체(껍데기)만 복사, 그 내용은 동일한 객체
3.
깊은복사(deep copy)는 복합객체 복사 + 그 내용도 재귀적으로 복사
Shallow Copy
바로 아래 단계의 값만 복사하는 방법
•
중첩 된 객체에서 참조형 데이터가 저장 된 프로퍼티를 복사할 때 그 주소 값만 복사
•
해당 프로퍼티에 대한 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리킴
•
사본을 바꾸면 원본도 바뀌고, 원본을 바꾸면 사본도 바뀜
방법
배열 얕은 복사
•
arr.slice()
const arr = [1, 2, 3];
const copyArr = arr.slice();
JavaScript
복사
•
Spread 문법
const arr = [1, 2, 3];
const copyArr = [...arr];
JavaScript
복사
객체 얕은 복사
•
for
const obj = {a: 1, b: 2};
const copyObj = {};
for (let i in obj) {
copyObj[i] = obj[i];
}
JavaScript
복사
•
Object.assign()
const copyObj = Object.assign({}, obj);
JavaScript
복사
Deep Copy
내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법
기존에 있던 객체와 똑같으면서 독립적인 객체를 만듦
원시 자료형은 항상 깊은 복사가 이루어짐
방법
•
JSON 객체 메소드 사용
const copyObj = JSON.parse(JSON.stringify(obj));
JavaScript
복사
•
재귀 구현
function deepCopy(obj) {
if (obj === null || typeof obj !== "object") {
return obj;
}
let copy = {};
for (let key in obj) {
copy[key] = deepCopy(obj[key]);
}
return copy;
}
JavaScript
복사
•
lodash 모듈의 cloneDeep()
const lodash = require("lodash");
const copyObj = lodash.cloneDeep(obj);
JavaScript
복사