얕은 복사 VS 깊은 복사

얕은 복사 vs 깊은 복사

얕은복사는 객체의 참조값(주소값)을 , 깊은 복사는 객체의 실제값을 복사합니다

원시 값을 복사할 떄, 새로운 메모리 공간을 할당하고, 그 곳에 새 원시 값을 넣고,

식별자가 새로운 메모리 공간을 가르키기 떄문에, 복사를 하고 값을 바꿔도, 기존의 원시값에는 아무런 영향도 가지 않습니다.

const a = 1;
let b = 2;

b = 3;
console.log(a); //1
console.log(b); //3
//기존 값 a에 영향을 미치지 않는다.

위의 코드를 그림으로 그려보면 다음과 같은 과정을 겪습니다.

이제 변수 b를 변수 c로 복사해 보겠습니다.

let c = b;

위의 코드가 실행되면 다음과 같이 3을 저장할 새 메모리 공간을 만들고, 원시 값을 저장하고

c가 그 공간을 식별합니다.

이떄, 변수 b에는 아무런 영향도 가지 않습니다.

이렇게 실제 값을 복사하는 것을 깊은 복사라고 합니다.

 

객체를 변수에 할당하면 변수에는 참조 값(메모리 주소)가 저장됩니다.

깊은 복사를 하면 원시 값처럼 완전히 똑같은 복사본을 만듭니다.

반면 얕은 복사는 원본 객체의 참조 값을 복사합니다.

얕은 복사의 방법

일반적인 복사 (= 연산자)

let origin = {name:'LEE'};
let copy = origin;

깊은 복사의 방법

spread(…)연산자

const obj1 = {a:1, b:2};
const obj2 = {...obj1};

obj2.a = 100;

console.log(obj1 === obj2) // false
console.log(obj1.a) //1

{}안에obj1의 속성을 복사해서 obj2에 할당했다.

Object.assign()

const obj1 = { a:1, b:2 };
const obj2 = Object.assign({}, obj1);

obj2.a = 100;

console.log( obj1 === obj2 ) // false
console.log( obj1.a) //1

Object.assign()메서드를 통해 첫번쨰 인자로 {}객체를, 두번쨰 인자로 obj1을 넣고

obj2에 할당한다.

완벽한 Deep copy를 위한 다른 방법

재귀적으로 깊은 복사를 수행

Lodash의 cloneDeep 함수 사용

JSON.parse()와 JSON.stringify()함수 사용