[JS] 깊은 복사, 얕은 복사

eunseok·2023년 10월 17일

js공부

목록 보기

20/27

깊은 복사, 얖은 복사

얕은 복사(Shallow Copy): 얕은 복사는 원본 객체의 최상위 수준만을 복사합니다. 즉, 원본 객체와 사본이 동일한 하위 객체를 참조하게 됩니다.

let original = { a: 1, b: [2] };
let copy = Object.assign({}, original);

copy.b[0] = 3;
console.log(original.b[0]); // 출력: 3

깊은 복사(Deep Copy): 깊은 복사는 원본 객체뿐 아니라 그 내부의 모든 하위 객체들까지도 새로운 메모리에 완전히 새롭게 만들어냅니다.

let original = { a: 1, b: [2] };
let copy = JSON.parse(JSON.stringify(original));

copy.b[0] = 3;
console.log(original.b[0]); // 출력: 2

좀 더 쉽게 설명하자면 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다.

예제 조금 더

얕은 복사 (slice)

2차원 배열을 slice 메소드를 이용하여 카피했을 때 얕은 복사가 발생합니다.

const original = [[1, 2], [3, 4]];
const copy = original.slice();

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

copy[0][0] = 10;

console.log(JSON.stringify(original) === JSON.stringify(copy)); // false
console.log(original); // [ [10, 2], [3, 4] ]
console.log(copy); // [ [10, 2], [3, 4] ]

설명을 조금 하자면 2차원 배열인 original을 slice 메소드를 사용하여 복사하게 되면 얕은 복사가 일어납니다.

얕은 복사는 참조값을 복사하는 것이기 때문에 복사된 이차원 배열 copy 또한 객체가 저장된 메모리 공간의 참조를 가리키고 있습니다. 그래서 original과 copy는 둘 다 똑같은 참조를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 끼칩니다.

깊은 복사 (JSON.parse && JSON.stringify)

JSON.stringify()는 json 문자열로 변환하면서 원본 객체와의 참조가 모두 끊어집니다.

const original = [[1, 2], [3, 4]];
const copy = JSON.parse(JSON.stringify(original));

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

copy[0][0] = 10;

console.log(JSON.stringify(original) === JSON.stringify(copy)); // false
console.log(original); // [[1,2],[3,4]]
console.log(copy); // [[10 ,2],[3 ,4]]