[Java Script] 깊은 복사 와 얇은 복사

 

자바스크립트에서 객체나 배열 등의 데이터 구조를 복사할 때

얇은 복사와 깊은 복사 두 가지 방법이 있습니다.

| 얇은 복사(Shallow Copy)

얇은 복사는 해당 객체나 배열의 참조값(메모리 주소)만 복사하는 방법입니다.

이 경우에는 원본 객체와 복사된 객체가 같은 참조값(메모리 주소)을 가지고 있어서

복사된 객체를 변경하면 원본의 객체도 같이 변경이 돼서 주의해야 합니다.

1. 방법

(1) Object.assign() 사용

Object.assign() 첫 번째 인수로 전달된 객체에 다른 객체들의 속성을 복사하는 메서드입니다.

첫 번째 인자로 빈 객체를 전달해 주고 두 번째 인자에는 복사할 객체를 넣어주면 되고,

이때 중첩돼 있는 객체의 값은 원본 객채와 같은 참조값을 가리킵니다.

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = Object.assign({}, obj1);

console.log(obj2); // { a: 1, b: { c: 2 } } 출력

obj2.b.c = 0;

console.log(obj1); // { a: 1, b: { c: 0 } } 출력
console.log(obj2); // { a: 1, b: { c: 0 } } 출력

(2) spread 연산자(...) 사용

spread연산자는 객체의 값들을 전개하는 연산자입니다.

이걸 사용해서 새로운 객체나 배열을 만들 수 있고,

이때 중첩돼 있는 객체의 값은 원본 객채와 같은 참조값을 가리킵니다.

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = {...obj1};

console.log(obj2); // { a: 1, b: { c: 2 } } 출력

obj2.b.c = 0;

console.log(obj1); // { a: 1, b: { c: 0 } } 출력
console.log(obj2); // { a: 1, b: { c: 0 } } 출력

(3) slice() 사용

slice()는 배열의 일부분을 추출하여 복사해 주는 메서드입니다.

이 메서드는 호출할 때 매개변수로 시작 인덱스와 끝 인덱스를 전달할 수 있는고,

이때 둘 다 생략하면 배열의 전체를 복사해 줍니다.

이때 1차원 배열이 아니고 2차원 배열이면 얕은 복사를 해줍니다.

let arr1 = [[1, 1], [2, 2], [3, 3]];
let arr2 = arr1.slice();

console.log(arr2); // [[1, 1], [2, 2], [3, 3]] 출력

arr2[0][0] = 4;

console.log(arr1); // [[4, 1], [2, 2], [3, 3]] 출력
console.log(arr2); // [[4, 1], [2, 2], [3, 3]] 출력

| 깊은 복사

깊은 복사는 객체 또는 배열을 복사할 때 해당 객체나 배열 내부에 포함된 값들을

모두 새로운 객체나 배열로 복사하는 방법입니다.

이 경우에 원본 객체와 복사된 객체가 서로 다른 참조값(메모리 주소)을 가져서 

복사된 객체의 값을 변경해도 원본 객체는 변경되지 않습니다.

1. 방법

(1) JSON.stringity(),  JSON.parse() 사용

JSON.stringity()는 객체를 문자열로 변환하는데 이때 원본 객체의 참조값이 사라집니다.

그리고 다시 JSON.parse()를 이용해서 객체로 만들어 주면 깊은 복사가 됩니다.

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2); // { a: 1, b: { c: 2 } } 출력

obj2.b.c = 0;

console.log(obj1); // { a: 1, b: { c: 2 } } 출력
console.log(obj2); // { a: 1, b: { c: 0 } } 출력