[JavaScript] 객체를 복사하는 방법

객체 = 객체 형식은 객체가 참조관계를 갖기 때문에, 어느 한 객체를 변경하면 같이 바뀌면 같이 바뀌게 된다.

그렇다면, 객체를 복사하는 방법은 아래 코드와 같다.

객체의 참조를 확인하는 방법

객체의 참조관계를 쉽게 확인하기 위해서는 '===' 비교 연산자를 통해 확인할 수 있다.

객체 === 객체의 결과가 true라면 참조관계이다.

var obj = { a:1, b:2, c:3 }
Object.keys(obj); 
var obj2 = {};
Object.keys(obj).forEach(function(key){
    obj2[key] = obj[key]
})

먼저 객체를 생성하고, Object.keys(obj); 를 통해 객체의 key들을 뽑아내서 배열을 만든후에, forEach 반복문을 통해

키들을 다른 객체에 복사하게 되면 참조관계가 아닌 형태로 객체를 복사할 수 있게 된다.

이 반복문은 객체 안에 원시값만 있을 때 사용한다.

하지만, 위에 forEach 반복문을 사용할 경우 문제가 생기는데 만약 아래와 같이 객체안에 객체가 들어있게 되면 문제가 생긴다.

var obj = { a:1, b:{c:3} };
var obj2 = {};

obj2.a = obj.a; // a는 원시값이니까 복사가 되고
obj2.b = obj.b; // b는 객체이니까 참조관계가 된다

그 이유는 obj.a 는 원시값이니까 복사가 되고

obj.b는 객체니까 참조관계가 되기 때문이다.

copy에는 두 가지가 있다. 얕은 복사 = 참조, 깊은 복사 = 복사로 나뉘어진다.

얕은 복사는 가장 상위 객체만 새로 생성되고 내부 객체들은 참조 관계인 경우를 의미한다.

깊은 복사는 내부 객체까지 모두 새로 생성된 것을 의미한다.

이 경우 해결하기 위해서는 아래와 같은 코드를 사용하면 된다.

obj2 = JSON.parse(JSON.stringify(obj)) // stringfy에 들어가는 것은 복사할 대상 객체

참고