[JavaScript] 얕은 복사(shallow copy)와 깊은 복사(deep copy)

object들은 생성할때 각각 다른 주소값에 생성이 된다. 그래서 안의 내용이 같아도 다른 객체로 간주한다.

---

얕은 복사 shallow copy

 

얕은 복사는 객체를 복사 할때 참조하는 주소까지 복사가 되는 것을 말한다.

var obj1 = {}
var obj2 = {};
console.log(obj1 === obj2);
obj1 = obj2;
console.log(obj1 === obj2);

두 객체를 생성하였을 때 둘은 다른 객체 였는데, obj1에 obj2를 할당 하니 둘은 같은 객체가 되어버렸다.

객체 안의 내용까지 확인 해보자.

var obj1 = {a:10}
var obj2 = {b:20};
console.log(obj1 , obj2);
console.log(obj1 === obj2);
obj1 = obj2;
console.log(obj1 , obj2);
console.log(obj1 === obj2);

객체 안의 내용도 할당 후 같아진걸 확인 할수 있다. ( 당연히 둘은 같은 객체가 되어 버렸으니 내용도 같겠지)

var obj1 = {a:10}
var obj2 = {b:20};
console.log(obj1 , obj2);
console.log(obj1 === obj2);
obj1 = Object.assign(obj2);
console.log(obj1 , obj2);
console.log(obj1 === obj2);

Object.assign()을 사용한 얕은 복사

결과는 같다. 그럼 직접 할당하는게 낫지 왜 쓰지?

 

이렇게 주소값까지 복사해서 할당한 object를 수정하면 할당된 object 값도 변하게 되어버리는것을 얕은 복사라고 한다.

---

깊은 복사 deep copy

 

깊은 복사는 객체안의 내용까지 같게 복사해오지만 주소값은 다른 개별 객체를 만들어주는 것을 말한다.

 

object안의 내용으 복사해 오는 방법

 

(이러지 말자!!!! 예제)

var obj = {
    a : "456789",
    f : "hhhhhhh",
    gg : false
};

var newObj = {};
console.log(newObj);

for(var key in obj ) {
    newObj[key] = obj[key];
}
console.log(newObj);

object안의 key값을 돌면서 value를 가져왔으나 value안에서도 또 object가 있으면 얕은 복사가 일어날것이니 위처럼 복사해오지 말자!!!

해결방법으로는 object가 아닌 자식의 자식자식자식까지 들어가서 값을 가지고 오는 것인데 ... 이런게 있다는 것만 알자

 

깊은 복사는 이렇게 하자 예제

var obj = {
    a : "456789",
    f : "hhhhhhh",
    gg : false
};

var newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);
console.log(obj === newObj);

newObj안의 내용이 obj와 같으면서 비교했을때 다른 객체로 생성되었다.

복사해올 obj = JSON.parse(JSON.stringify(복사할obj)); 사용!!