https://hyunseob.github.io/2016/02/08/copy-object-in-javascript/
부끄럽게도 얼마 전에야 자바스크립트에서 =을 사용한 객체 복사는 참조만 하는 것임을 알았다.
어찌보면 예상가능한 것임에도 불구하고 얕은/깊은 복사가 필요한 경우가 생각보다 많지 않았기 때문에 알지 못했던 것 같다.
어쨌든, 복사가 필요한 경우가 분명히 생기기 때문에 실제로 복사를 하는 방법에 대해 공부했다.
얕은 복사는 다양한 방법으로 가능하다. 일단 라이브러리를 사용하면 매우 쉽다. 아래는 underscore.js를 이용한 방법이다.
다음은 jQuery extend()를 이용한 방법이다. extend()는 원래 객체를 합병(Merge)하기 위한 메소드이지만 복사를 위해 사용할 수도 있다. (사실 그런 용도로 사용하는 경우가 더 많은 것 같다.)
순수한 자바스크립트로 직접 구현하고자 한다면 다음과 같은 방식으로 가능하다.
constructor() 메소드는 해당 객체와 똑같은 타입의 객체를 하나 더 생성하는 메소드이다.hasOwnProperty() 메소드는 해당 객체가 파라미터로 넘긴 프로퍼티를 가지고 있는지 확인하는 메소드이다.
깊은 복사는 더 많은 방법이 존재한다. 당연하지만 깊은 복사는 보통 얕은 복사보다는 느리다.
먼저 jQuery는 얕은 복사에서 사용했던 extend() 메소드에서 Deep Copy를 위한 Flag를 true로 주면 쉽게 사용가능하다.
Angular.js를 사용한다면 Angular.js에서 제공하는 angular.copy() 메소드를 사용할 수도 있다.
그리고 깊은 복사는 순수 자바스크립트만 이용한 방법이 여러가지 있다.
먼저 JSON.stringify()와 JSON.parse()를 이용한 방법이다.