[JS] 얕은 복사와 깊은 복사

이전에 수업에서 똑같은 객체에 두가지 변수 이름을 할당해주면, 두 변수는 사실 그 객체로 가는 주소값을 복사하는 것이기 때문에, 하나의 변수에서 객체값을 수정하면 모든 변수에 적용된다고 배웠다. (원본을 수정했기 때문에)

그렇다면 완전히 독립된 두 객체를 만들기 위해서는 어떻게 해야할까? 이에 대한 해답이 바로 '깊은 복사(Deep Copy)'이다.

---

얕은 복사 (Shallow Copy)

평소 우리가 let a = some-object 같이 객체에 직접 대입하는 방식을 이용해서 변수에 객체를 할당하는 방식은 얕은 복사에 해당한다.
얕은 복사는 '복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킴)를 공유하는 복사'이므로 그 객체의 데이터를 복사하는 것이 아니라 그 객체로 가는 주소값을 할당해준다.

깊은 복사 (Deep Copy)

이와 반대로 깊은 복사는 독립된 객체를 새로 생성하고 그에 대한 주소값을 할당해주기 때문에, 하나의 객체에 여러 변수를 지정하고, 특정 변수에서 객체값을 수정하더라도 나머지 변수에 할당된 객체값들은 원본 데이터를 유지할 수 있다.

(참고로, 값을 완전히 복사하는 기본형(문자열, 불린, 정수형 등)에 대한 복사는 모두 깊은 복사에 해당한다.)

그렇다면, 객체를 복사할 때 깊은 복사를 하려면 어떻게 해야할까?

---

object.assign(생성할 객체, 원본 객체)

let origin-object = {
	name: "이현지"'
    habit: "클라이밍"'
    major : {main: "IMS"'
    		sub: "media"}
}

let copy = Object.assign({}, origin-object);

위와 같이 object.assign()를 사용하면 깊은 복사가 가능하다. ( console.log(origin-object === copy //false )

그러나 object.assign()는 1depth까지만 독립된 값을 복사하기 때문에 사실 상 완전한 깊은 복사라고 보기는 어렵다. ( console.log(origin-object.major.main === copy.major.main //true )

따라서 2depth 이상의 깊은 복사를 위해서는 직접 재귀 함수를 만들거나, JSON 객체를 생성해야 한다.

JSON 객체

let copy = JSON.parse(JSON.stringify(origin-object)); 

재귀 함수

function copyObject(origin) {
	let forCopy = {};
    
    for (let key in origin) {
    	if (typeof origin[key] === 'object' {
        	forCopy[key] = copyObject(obj[key]);
        } else {
        	forCopy[key] = origin[key];
        }
    }
    
    return forCopy;

[코드 출처: https://cocobi.tistory.com/156]