[ JavaScript ] 자바스크립트 객체 복사할 때 주의사항

객체를 복사 할 때 단순하게 '=' 연산자로 값을 주입하게 되면 얕은복사(Shallow Clone)가 이루어진다.

예를 들어, a객체가 있고 b 객체가 있을 때 b=a라고 주입하고 a 값을 변경하여도 우리는 b는 기존 a값을 가지고 있을거라 생각한다.

하지만 b도 변경된 a값과 동일하게 변경되게 된다.

따라서 자바스크립트에서 객체의 값을 복사할 때는 깊은 복사(Deep Clone)이 되도록 해주어야 한다.

b = JSON.parse(JSON.stringify(a))

와 같이 JSON 객체의 메소드를 이용하여 깊은 복사가 되게끔 해주자.

JSON.stringify는 자바스크립트 객체를 먼저 JSON문자열로 변환시키고 JSON.parse는 JSON문자열을 자바스크립트 객체로 변환시킨다.

JSON문자열로 변환했다가 다시 객체로 변환하기에 기존 객체에 대한 참조가 사라져 깊은 복사가 이루어지게 된다.