자바스크립트에서 얕은 복사와 깊은 복사

가끔 객체를 복사하고 변형할때 의도치 않게 다른 객체들도 변화가 있을때가 있습니다. 저도 예전에 처음 자바스크립트를 배울때 이러한 객체들이 왜 내 마음대로 변형이 안되고 다른 객체까지 영향을 끼치는지 답답할 때가 많았습니다.

하지만 이러한 이유는 바로 객체에는 얕은 복사와 깊은 복사가 존재하기 때문입니다.

원시값과 참조값

먼저, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입이 있습니다.

• 원시값: 기본 자료형이며, Number, String, Boolean, Null, Undefined 등이 해당합니다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 이때 변수를 조작하면 저장된 실제 값이 조작됩니다.
• 참조값: 저장된 메모리 공간의 주소를 가리키는 값을 의미합니다. 즉, 변수에 직접 값이 저장되는 것이 아니라, 값이 저장된 메모리 공간의 위치를 가리키는 주소가 저장되는 것입니다. Object, Array, Function 등이 있습니다.

이러한 이유로 객체는 참조값이므로 변수에 주소가 저장되는 것입니다.

얕은 복사와 깊은 복사

얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy) 는 자바스크립트에서 객체를 복사하는 방법을 설명할 때 자주 사용되는 용어입니다. 두 방법은 복사되는 대상의 범위와 복사된 객체와 원본 객체 간의 관계에서 차이를 보입니다.

얕은 복사 (Shallow Copy)

객체의 최상위 레벨 속성만 복사하는 방식입니다. 즉, 중첩된 객체는 참조만 복사되기 때문에, 원본 객체의 중첩된 객체를 변경하면 복사된 객체도 함께 변경됩니다.

예시:

1// 배열의 얕은 복사
2let numbers1 = [1, 2, 3];
3let numbers2 = numbers1;
4
5numbers2[0] = 5;
6
7console.log(numbers1); // [5, 2, 3] (numbers1의 배열도 변경됨)

예시처럼 코드를 입력하면 numbers1 의 배열을 수정하지 않아도 변경된 것을 확인할 수 있습니다.

깊은 복사 (Deep Copy)

객체의 모든 속성을 복사하고 새로운 객체를 생성하는 방식입니다. 즉, 복사된 객체는 원본 객체와 완적히 독립적이며, 원본 객체를 변경해도 복사된 객체는 영향을 받지 않습니다.

예시:

1// 배열의 깊은 복사
2let numbers1 = [1, 2, 3];
3let numbers2 = JSON.parse(JSON.stringify(numbers1));
4
5numbers2[0] = 5;
6
7console.log(numbers1); // [1, 2, 3] (numbers1의 배열 변경 안됨)

예시처럼 JSON.parse(JSON.stringify(numbers1)) 을 활용하면 완전히 새로운 배열을 만들 수 있습니다.

깊은 복사 시 주의할 점

• 순환 참조: 객체 내부에서 자기 자신을 참조하는 경우 깊은 복사가 제대로 이루어지지 않을 수 있습니다.
• 함수: 함수는 값이 아니라 참조이므로, 깊은 복사를 해도 함수 자체는 복사되지 않습니다.
• Date 객체: Date 객체는 특수한 객체로, 깊은 복사를 하더라도 동일한 날짜를 가리키게 됩니다.