javaScript 에서 "얕은 복사" 와 "깊은 복사" 는 무엇이 다른건가요??

Question

javaScript 에서 "얕은 복사" 와 "깊은 복사" 는 무엇이 다른건가요??

객체등을 복사할때 흔히들 얕은 복사인가, 깊은 복사인가에 따라서 결과가 많이 바뀔수 있다고들 합니다.

이때 두 복사의 차이점이 자세히 알고 싶습니다.

Answer 1

일단 대입과 복사의 차이부터 보겠습니다.

var original = { some_value: 123 }; // original을 new_one에 "대입"합니다. var new_one = original; // new_one의 속성을 바꾸면 original의 속성도 바뀝니다. new_one.some_value = 456; // 심지어 새로운 속성을 만들 수도 있습니다. new_one.another_value = 789; console.log(original);

대입은 하나의 객체를 여러 변수가 가리키게 할 뿐입니다. (기본형은 복사됩니다.)

var original = { some_value: 123 }; // original을 new_one에 "복사"합니다. (모든 속성을 대입합니다.) var new_one = Object.assign({}, original); // new_one은 이제 original과 별개의 객체입니다. new_one.some_value = 456; // 원래 객체에 영향을 주지 않습니다. new_one.another_value = 789; console.log(original);

복사는 같은 객체를 가리키는 게 아니라 객체를 하나 더 만들고 모든 속성을 복사합니다.

복사본으로는 원본에 영향을 줄 수 없는 것 같지만, 속성이 객체면 문제가 생길 수 있습니다.

var original = { name: { en_us: 'Original', ko_kr: '원본' } }; // original을 new_one에 "복사"합니다. var new_one = Object.assign({}, original); // 하지만 속성을 "대입"했기 때문에... new_one.name.en_us = 'Copy'; // original.name과 new_one.name은 같은 객체를 가리키고 있습니다. new_one.name.ko_kr = '복사본'; console.log(original);

이렇게 단순히 모든 속성을 대입한 복사를 얕은 복사라고 합니다.

function clone(obj) { // 객체를 복제하는 예시 코드입니다. var ret = {}; // 모든 속성을 (object인 경우 재귀적으로) 복제합니다. for(var k in obj) { ret[k] = typeof obj[k] === 'object' && obj[k] != null ? clone(obj[k]) : obj[k]; } return ret; } var original = { name: { en_us: 'Original', ko_kr: '원본' } }; // original을 new_one에 "복제"합니다. var new_one = clone(original); // 모든 속성을 "복사"한 것입니다. 얕은 복사에서는 모든 속성을 "대입"했습니다. new_one.name.en_us = 'Copy'; // original.name과 new_one.name은 서로 다른 객체입니다. new_one.name.ko_kr = '복사본'; console.log(original);

모든 속성을 재귀적으로 복사해야 정말 원본과 별개의 객체가 만들어지는데, 이를 깊은 복사라고 합니다.