[JavaScript] 얕은 복사와 깊은 복사

💡

얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy)란 무엇인지? 두 복사의 다른 점과 복사를 이용하는 방법에 대해 알아보겠습니다.

 

깊은 복사 (Deep Copy)

---

let a = 1000; 
let b = a;  
b = 2000;  
console.log(a, b); // 1000 2000

변수 b 는 a 의 값을 참조했지만, 두 변수의 값은 독립적입니다.

따라서, 변수 a의 값은 여전히 1000입니다.

이처럼

변수의 “값”

만을 참조하는 복사를 깊은 복사(Deep copy)라고 합니다.

 

얕은 복사 (Shallow Copy)

---

let existedNums = [100, 200, 300, 400]; 
let newNums = existedNums;  
newNums[0] = 1; 
console.log(existedNums, newNums); // [1, 200, 300, 400] [1, 200, 300, 400]

newNums는 existedNums 의 값을 참조한 것처럼 보이지만

사실 existedNums 배열의 주소를 복사해온 것이기 때문에 두 배열은 같은 주소를 공유하고 있습니다.

이처럼

“같은 주소”를 참조

하는 복사를 얕은 복사(Shallow copy)라고 합니다.

자바스크립트의 객체는 위와 같이 얕은 복사가 일어납니다.

 

 

💡

얕은 복사는 예기치 않은 객체의 변경을 초래할 수 있어 의도치 않은 동작을 야기할 수 있습니다. 다음은 객체에서 깊은 복사를 하는 방법에 대해 알아보겠습니다.

 

Spread Operator(…) 연산자 이용하기

let existedNums = [100, 200, 300, 400]; 
let newNums = [...existedNums];  
newNums[0] = 1; 
console.log(existedNums, newNums);   // [ 100, 200, 300, 400 ] [ 1, 200, 300, 400 ]

달라진 점은 복사할 때 spread operator를 이용하였습니다.

spread operator를 이용하면, 깊은 복사가 가능합니다. (1 depth 까지만)

 

Object.assign() 메소드 이용하기

let existedNums = [100, 200, 300, 400]; 
let newNums = Object.assign([], existedNums);  
newNums[0] = 1; 
console.log(existedNums, newNums);   // [ 100, 200, 300, 400 ] [ 1, 200, 300, 400 ]

마찬가지로 깊은 복사가 가능합니다. (1 depth 까지만)

 

 

💡

“1 depth 까지만” 이라는 게 무슨 뜻인가요?

 

depth는 객체의 차원을 의미합니다. 다차원 객체에서는

spread operator와 Object.assign() 모두 완전한 Deep copy가 되지 못합니다.

 

1 depth : Deep copy

2+ depth : Shallow copy

 

Uploaded by Notion2Tistory v1.1.0