[JavaScript] Chapter 33. 객체 복사하기 - 앝은 복사, 깊은 복사

자바스크립트객체(Object)는 Key(키):Value(값)의 1개 또는 여러 쌍으로 구성된다.

Value(값)에는 숫자, 문자열 뿐만아니라 또 다른 객체(Object)를 넣을 수 있다.

자바스크립트객체를 복사하는 3가지 방법에 대해 알아본다.

​

성명, 나이, 차량정보를 저장하고, 차량정보에는 엔진과 배기량을 저장한다.

자바스크립트객체를 복사하는 방법에는 크게 3가지가 있다.

​

​

A방법은 복제없이 참조하는 변수만 만들어 앝게 복사한다.

javascript

닫기 줄바꿈

let grandeur = { engine: "gdi", cc: 3000 }; 
let aa = { name: "kildong", age: 20, car: grandeur }; 
let bb = aa; // Object Shallow Copy, 하위 Object Shallow Copy 

console.log(Object.is(aa, bb)); // true 
console.log(Object.is(aa.car, bb.car)); // true

따라서 객체를 비교해보면 같은 값이다.

​

​

B방법은 대표 객체는 복사하지만 하위 객체는 참조만 한다. 가장 많이 사용하는 방법이다.

Object.assign( ) 함수를 이용한다.

javascript

닫기 줄바꿈

let grandeur = { engine: "gdi", cc: 3000 };
let aa = { name: "kildong", age: 20, car: grandeur };
let bb = Object.assign({}, aa); // Object Deep Copy, 하위 Object Shallow Copy

console.log(Object.is(aa, bb)); // false
console.log(Object.is(aa.car, bb.car)); // true

spread(...) 기호를 이용한다.

javascript

닫기 줄바꿈

let grandeur = { engine: "gdi", cc: 3000 };
let aa = { name: "kildong", age: 20, car: grandeur };
let bb = { ...aa }; // Object Deep Copy, 하위 Object Shallow Copy

console.log(Object.is(aa, bb)); // false
console.log(Object.is(aa.car, bb.car)); // true

객체를 비교하면 다른 값이지만 하위 객체는 같은 값이다.

​

​​

C방법은 대표 객체 뿐만 아니라 하위 객체도 복사해서 깊은 복사를 하는 방법이다.

이 방법은 3가지 방법 중 가장 많은 메모리와 늦은 처리 속도를 보인다.

javascript

닫기 줄바꿈

let grandeur = { engine: "gdi", cc: 3000 };
let aa = { name: "kildong", age: 20, car: grandeur };
let bb = JSON.parse(JSON.stringify(aa)); // Object Deep Copy, 하위 Object Deep Copy

console.log(Object.is(aa, bb)); // false
console.log(Object.is(aa.car, bb.car)); // false

객체와 하위객체 모두 새로 복사되어 다른 곳을 가리킨다.