[JavaScript] 얕은 복사, 깊은복사

자바스크립트가 제공하는 타입은 크게 원시 타입과 객체 타입으로 구분할 있다.

원시 타입

• 변경 불가능한 값
• 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다.

객체 타입

• 객체(참조) 변경 가능한 값
• 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.

---

얕은 복사, 깊은 복사

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중되어 있는 개체까지 모두 복사하는 것을 말한다.

📄예시를 통해 알아보자!

얕은 복사(Shallow Copy)
얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다.
객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

const arr = [{ j: 'k' }, { l: 'm' }];
const shallowCopy = [...arry]; // 스프레드 문법
console.log(arr === shallowCopy); // false
console.log(arr[0] === shallowCopy[0]); // true

• arr 배열에는 두 개의 객체를 포함하고 있고, 스프레드 문법을 사용하여 arr을 복사하여 shallowCopy 배열을 만들었다.
• 원본 배열과 복사된 배열을 비교했을 때 얕은 복사를 통해 새로운 배열이 생성되었으므로 두 배열은 서로 다른 객체이기 때문에 false가 출력 된다.
• 하지만 배열 내부의 객체들은 얕은 복사를 통해 참조값이 복사되었기 때문에, 두 배열의 첫 번째 요소는 같은 객체를 참조하고 있습니다. 따라서 이 비교는 true를 출력한다.

요약하자면, 얕은 복사를 통해 배열을 복사하면 배열 자체는 새로운 객체가 되지만 내부의 객체들은 여전히 원본과 동일한 참조를 유지한다.

깊은복사(Deep Copy)
깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어지고 복사를 해온다.

const reference = arr; // 참조
const deepCopy = JSON.parse(JSON.stringify(arr)); // 깊은 복사

console.log(arr === reference); // true
console.log(arr === deepCopy); // false
console.log(arr[0] === deepCopy[0]); // false

• reference라는 변수에 arr을 할당하고 이는 단순히 참조를 복사하는 것이다.
• JSON.stringify()를 사용하여 객체나 배열을 문자열로 변환하고, 그 문자열을 다시 JSON.parse()를 사용하여 새로운 객체나 배열로 변환하는 방법을 사용하여 깊은 복사를 했다.
  이러한 방법은 간단하게 모든 객체나 배열을 문자열로 변환하고 다시 파싱하는 것으로, 원본과는 별개의 객체를 생성한다.
• arr과 reference는 동일한 배열을 가리키기 때문에 true가 출력됩니다.
• arr과 deepCopy는 서로 다른 객체이기 때문에 false가 출력됩니다.
• arr과 deepCopy의 첫 번째 요소도 서로 다른 객체이기 때문에 false가 출력된다.

---

마무리

얕은 복사(Shallow Copy)는 객체를 복사할 때 원본 객체의 프로퍼티들을 새로운 객체로 복사하지만, 프로퍼티 값이 객체인 경우 해당 객체는 참조로 유지되어 두 객체가 같은 객체를 가리키게 된다. 이에 반해 깊은 복사(Deep Copy)는 객체를 복사할 때 내부 객체까지 재귀적으로 복사하여, 원본과는 독립적인 새로운 객체를 생성합니다. 따라서 얕은 복사는 내부 객체의 변경이 복사된 객체에도 영향을 미칠 수 있지만, 깊은 복사는 내부 객체의 변경이 영향을 미치지 않는다. 따라서 상황에 맞게 적절히 활용해야 할 것이다.