인프런 커뮤니티 질문&답변

안녕하세요.
spread operator는 처음 처음 depth 에서는 깊은 복사를 합니다.

하지만 2 depth부터는 얕은 복사를 합니다.

얕은 복사는 주소 를 복사하기 때문에

const A = [ 'a', 'b'];

const B = A;

console.log( A === B ) ;
=> true
하면 주소가 같기 때문에 console 값이 true로 출력 됩니다.

하지만 spread operator 는 처음 뎁스에서 깊은 복사(주소를 복사하는 것이 아닌 안에 들어 있는 값을 복사)를 하기 때문에

const C = [...A];

console.log( A === C );
=> false
서로 주소 값이 다르기 때문에 false가 나오게 됩니다.

하지만 2 depth 부터는 어떻게 될까요?
const A = ['a', ['b', 'c']];

const B = [...A];

이렇게 정의해주고
console.log(A === B)
=> false 가 나옵니다.
이제는 2depth 부분도 비교해볼게요.

console.log(A[1] === B[1]);
=> true 가 나옵니다.

그렇기 때문에 1depth만 깊은 복사가 되고 2depth 부터는 얕은 복사입니다.
2depth를 깊은 복사 하기 위해서는 여러 가지 방법이 있지만
여기서 간단하게 하려면

const B = [...A[0], ...A[1]]; 이렇게 해주시면 됩니다.
이렇게 하면
console.log(A[1] === B[1])
=> false 가 됩니다.

또는 Loadash cloneDeep 함수를 사용하거나
JSON.parse() 와 JSON.stringfy() 함수를 사용하는 방법이 있습니다.
감사합니다.

답변이 이해가 잘 돼요 감사합니당