깊은 복사 얕은 복사 (Deep and Shallow Copy)

 

JavaScript에서 객체(Object)를 복사 할 수 있는 방법은 깊은 복사, 얕은 복사 두가지가 있다.

 

(좌) 얕은 복사 (우) 깊은복사

1. 깊은 복사

기본적으로 String , Boolean , Number 등 원시 타입(primitive type) 을 가지는 데이터는 복사 시 새로운 메모리공간을 할당하는 '깊은 복사' 를 한다.

//깊은 복사

const oldString = 'hello coding'
const newString = oldString

oldString = 'love coding' //oldString 데이터 변경

console.log(oldString) // 'love coding' 출력
console.log(newString) // 'hello coding' 출력

해당 변수 oldString, newString은 서로 각각의 메모리에 값 'hello coding', 'love coding' 을 할당한다.

결과적으로 깊은 복사된 원본과 사본은 서로의 값 변경에 영향을 받지 않는다.

 

 

2. 얕은 복사

Array(배열) 데이터는 기본적으로 실제 값이 아닌, 참조데이터 (메모리 주소, 포인터)를 복사한다.

// 얕은 복사
const oldArray = ['hello', 'coding'];
const newArray = oldArray;

oldArray.push('love'); //oldArray 에 'love' 라는 값을 푸시

console.log(oldArray); // ["hello", "coding", "love"] 출력
console.log(newArray); // ["hello", "coding", "love"] 출력 (동일)

oldArray 를 얕은 복사 하여 newArray 를 만든 경우 기존 배열의 값 변경이 복사된 배열의 결과에도 반영된다.

동일한 메모리 주소를 참조하기 때문에, 두 객체의 값 변경이 서로에게 영향을 준다.

 

 

3. 배열을 깊은 복사 하려면?

Array.prototype.slice() 를 사용한다.

const oldArray = ['hello', 'coding']
const newArray = oldArray.slice();

oldArray.push('love')

console.log(oldArray) // ['hello', 'coding', 'love'] 출력
console.log(newArray) // ['hello', 'coding' ] 출력 oldArray 데이터 변경에 영향 받지 않음