JavaScript에서 객체의 참조와 깊은 복사
const obj1 = {
value1: 10,
};
const obj2 = obj1;
obj2.value1 += 1;
console.log(obj1); // { value1: 11 }
console.log(obj2); // { value1: 11 }JavaScript에서의 객체는 참조(reference) 타입이다.
위 코드에서 obj2 = obj1;을 실행하면 obj2는 obj1을 참조하게 된다. 그래서 obj2를 통해 속성을 변경하면 원래의 obj1에도 그 변경사항이 반영되는 현상을 얕은 복사라고 한다.
깊은 복사 방법 (spread 연산자(...))
원본 객체를 변경하지 않고, 그 복사본을 만들어서 작업하고 싶을 때가 있는데 깊은 복사를 활용하면 된다.
const obj1 = {
value1: 10,
};
const obj2 = {...obj1}; // spread 연산자(...)를 사용하여 obj1의 모든 속성 값을 새로운 객체에 복사
obj2.value += 11;
console.log(obj1); // { value: 10 }
console.log(obj2); // { value: 11 }위 코드에서 spread 연산자(...)를 사용하여 obj1의 모든 속성을 새로운 객체(obj2)에 복사하였다. 따라서 obj2.value += 11;을 실행하더라도 원본인 obj1은 변하지 않는다.
깊은 복사 방법 JSON.parse(JSON.stringify(obj))
JSON.parse(JSON.stringify(obj))를 사용하면 JavaScript 객체의 깊은 복사(deep copy)를 수행할 수 있다. 이 방법은 JSON.stringify() 함수를 사용해 객체를 JSON 문자열로 변환한 후, JSON.parse() 함수를 사용해 그 문자열을 다시 객체로 변환하는 방식이다.
const obj1 = {
value1: 10,
};
const obj3 = JSON.parse(JSON.stringify(obj1));
obj3.value1 += 1;
console.log(obj1); // { value1: 10 }
console.log(obj3); // { value1: 11 }위 코드에서는 obj3가 obj1의 깊은 복사본이므로, obj3.value += 11;을 실행하더라도 원본인 obj1은 변하지 않는다.
이 방법에는 몇 가지 주의할 점
- 이 방법은 오직 JSON 형식으로 표현될 수 있는 속성들만 복사한다. 즉, 함수나 심볼(symbol) 등의 값, 또는 순환 참조(circular reference)가 있는 객체 등을 복사할 수 없다.
- 이 방법은 깊이 있는(nested) 객체도 잘 처리하지만, 성능 면에서 큰 객체에 대해서는 비효율적일 수 있어 큰 데이터 구조에 대해서는 다른 라이브러리나 메서드를 고려하는 것이 좋다.
결론
이렇게 JavaScript에서는 객체가 참조 타입으로 동작하기 때문에, 원본 데이터의 변화 없이 독립적으로 데이터를 조작하고 싶다면 '깊은 복사' 방법을 사용해야 한다.
