자바스크립트에서 객체를 복사, 복제(Clone)하는 방법에 대하여 알아봅니다.



# 자바스크립트 객체(Object) 복제, 복사하기
자바스크립트의 객체 타입을 복사하는 방법으로 아래와 같이 3가지 방법이 존재합니다. 하나씩 알아보도록 하겠습니다.


! ES9의 ... 기호를 사용하는 방법
이 방법은 ES 9(ES 2018) 방법이나 모든 브라우저에서 사용하려면 Polyfill 등의 방법이 필요할 수 있습니다. 장점은 보시는 것처럼 매우 간단하게 사용할 수 있습니다.
_obj = { a: 1, b: 2 };

_cloneObj = { ..._obj };

보시는 것처럼 {} 내부에 ...를 사용한 것이 전부입니다. 새로운 객체 _cloneObj가 생성되었습니다.


! Object 객체 메소드 assign() 사용하기
호환성도 우수하고 많이 사용되는 방법입니다. Object 객체의 내부 메소드를 사용합니다.
_obj = { a: 1, b: 2 };

_cloneObj = Object.assign({}, _obj);

동일한 값을 가지는 _cloneObj이 생성됩니다.


! JSON 객체를 사용하는 방법
JSON 객체를 사용하여 문자열을 가져오고 이를 다시 객체로 만드는 방법입니다. 즉 두 가지 메소드가 사용됩니다.

JSON.stringify() // 문자열로 가져오기
JSON.parse() // 문자열을 객체로 변환하기


자세한 방법은 아래와 같습니다.
_obj = { a: 1, b: 2 };

_cloneObj = JSON.parse(JSON.stringify(_obj));

이해하면 더 간단합니다. 문자열을 객체로 변환하니 새로운 객체가 생성되게 됩니다.


! jQuery 제이쿼리 사용하는 방법

만약 제이쿼리 라이브러리를 사용하는 경우 아래와 같이 extend() 메소드를 사용할 수 있으니 참고하세요.
_obj = { a: 1, b: 2 };

_cloneObj = $.extend({}, _obj);

여기까지 객체를 복사, 복제하는 다양한 방법을 알아봤습니다.