[스터디] 3일차(2022.12.17) - 얕은 복사, 깊은 복사

1. 얕은 복사

-> 객체를 얕은복사하면 객체의 원소 중 원시타입이 아닌 객체에 대해 참조를 공유한다.

 

참조에 대해 먼저 알아보자

 

 

1) 컨테이너에 대한 참조

※ 컨테이너: 원본 객체 그 자체

const obj = {a:1, b:2, c:{d:7. e:8}}

자바스크립트에서는 변수 obj에 무언가를 대입하면 이 변수를 참조 방식으로 가리킨다.

 

2) 참조의 좋은 점

const obj = {a:1, b:2, c:{d:7, e:8}} // 원본

const obj_copy = obj;

obj_copy['d'] = 99;
console.log(obj); // {a:1, b:2, c:{d:7, e:8}, d: 99}
console.log(obj_copy); // {a:1, b:2, c:{d:7, e:8}, d:99}

-> 참조를 사용하면 원본의 수많은 카피본(=연산으로 생성된)이 생기더라도 원본과 똑같은 객체를 생성할 필요가 없다.

-> 복사본도 원본을 가리킨다.

-> 메모리를 아낀다.(효율적임)

 

3) 얕은복사 시 컨테이너에 대한 참조의 변화

<얕은복사 수행코드>

const obj = {a:1, b:2, c:{d:7, e:8}} // 원본

const obj_copy = Object.assign({}, obj); // 얕은 복사

obj_copy['d']=99;
console.log(obj); // {a:1, b:2, c:{d:7, e:8}}
console.log(obj_copy); // {a:1, b:2, c:{d:7, e:8}, d:99}

-> 컨테이너 객체가 새롭게 생성됨.

-> 복사본에 내부 원시타입은 새롭게 생성된다.

-> 여전히 복사본과 원본의 내부 객체요소는 동일한 참조를 갖는다.

 

2.  깊은 복사

-> 내부요소를 모두 파일복사하듯 복사하는 것.

const obj = {a:1, b:2, c:{d:7, e:8}} // 원본

const obj_copy = {...obj, c: {...obj.c}}

obj_copy['d']=99;
console.log(obj); // {a:1, b:2, c:{d:7, e:8}}
console.log(obj_copy); // {a:1, b:2, c:{d:7, e:8}, d:99}

이 코드에 다음 코드를 추가하면,

obj_copy['c']['d']='HI';
console.log(obj); // {a:3000, b:2, c:{d:7, e:8}}
console.log(obj_copy);// {a:3000, b:2, c:{d:'HI', e:8}, d:99}

-> 내부의 c 객체가 깊은복사되어 원본과 복사본이 서로 연관이 없게 된다.

 

[출처]

https://thrillfighter.tistory.com/742

javascript 얕은복사, 깊은복사에 대한 이해