[Javascript] 전개연산자(spread operator) 사용 시 얕은 복사가 발생하는 경우

지금 사용하는 이 티스토리를 일상 블로그로 전환하고,

 

기술 블로그로 깃허브 블로그를 만드는 중이다.

 

그런데 값을 복사하려고 전개연산자를 사용하는데 뭔가 이상했다.

 

이 코드의 출력 값은 무엇이 나올까?

const obj1 = {
	a : 1,
    b : 2,
}

const obj2 = {...obj1};

console.log(obj1 === obj2); // ?

 

 

답은 false다.

 

뭐 당연한거다. 전개연산자로 분해했다가 다시 만들었으니 참조가 풀린 것이다.

 

이렇게 보면 마치 깊은 복사가 된 것 같지만... 사실은 가장 겉부분만 깊은 복사가 이루어진 상태다.

 

 

 

이번엔 내부 값까지 확인해보자.

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

const obj2 = {...obj1};


console.log(obj1.a === obj2.a); // ?

 

이 경우에는 true가 나온다.

 

그렇다.... 내부는 얕은 복사로 남아있다. 2레벨 깊이부터는 참조값이 아직도 유효한 상태다.

 

 

 

어떻게 해야할까?

방법은 몇 가지가 있긴 하다.

 

1. 재귀함수를 이용하여 가장 아래까지 직접 복사를 해주는 방법

 

2. Lodash의 cloneDeep 함수를 사용하는 방법

 

3. JSON.stringfy()로 문자열 변환 후 JSON.parse()로 다시 Object로 변환하는 방법

 

자... 1번은 매우매우매우 귀찮다. 일단 패스.

 

2번은 라이브러리가 있어야 한다.

 

3번은 JSON 함수 자체가 메모리를 많이 사용한다...

 

어떤 방법을 사용하냐에 따라서 최적화도 달라질 것이다.

 

 

 

아... 저거 겉만 복사되는거 예전에도 한번 겪었던 문제인데...

 

기록을 안해놓으니까 매번 까먹는다. 복습의 중요성을 다시 한번 느낀다.

 

 

전개 연산자는 1차원 배열에서만 사용하도록 하자...

 

쓰더라도 depth가 깊은 데이터를 가공하는 일은 자제하자