[JavaScript] 객체 복사

오늘은 객체를 복사하는 방법에 대해 알아보는 시간을 갖도록 하자.

 

프로젝트 진행 중 객체를 복사해서 똑같은 객체에 하나의 프로퍼티 명만 바꿔야 되는 경우가 생겼다.

prototype link도 모두 복사해야 했으므로 예비 객체를 하나 두어 복사하고 옮기고 복사하고 옮기고를 반복하여 5라인 짜리 코드를 만들었다.

//////////////////////////////////////////////////WARING//////////////////////////////////////////////////////////

내공이 부족하면 이런 삽질을 하게 됩니다...

1 2 3 4 5 6

var dataProto = data[0]["a"].__proto__; var tempDataProto = data[0].__proto__; var temporaryData = data; temporaryData[0] = { "b": [] }; temporaryData[0].__proto__ = tempDataProto; temporaryData[0]["b"].__proto__ = dataProto;

//////////////////////////////////////////////////WARING//////////////////////////////////////////////////////////

근데 본인이 하였던 것은 객체 복사가 아닌 객체 공유를 하고있었던 것!!

그렇다보니 복사한 객체의 프로퍼티명을 바꾸면 원본의 프로퍼티 명도 따라 바뀌는 골치아픈 현상이 생기게 되었다.

그래서 구글신께 여쭤본 결과 세가지의 방법을 얻을 수 있었다!

1. 순수 javascript를 이용, hasOwnProperty로 검사하여 복사하는방법

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function clone(obj) { if (null == obj || "object" != typeof obj) return obj; var copy = obj.constructor(); for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr]; } return copy; } var d1 = new Date(); /* Wait for 5 seconds. */ var start = (new Date()).getTime(); while ((new Date()).getTime() - start < 5000); var d2 = clone(d1); alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());

2. jQuery를 이용하고 있을 경우

1 2	var copiedObject = {}; jQuery.extend(copiedObject,originalObject);

3. JSON.parse 와 JSON.strigify를 이용하는 경우

1	var clone_of_a = JSON.parse( JSON.stringify( a ) );

코드 자체는 그렇게 어렵지 않으니 해석하는데는 무리가 없을것이라 보고 본인의 입맛대로 골라쓰면 되겠다!!