변수에 변수를 할당하면 ctrl + c 같은 복사와 흡사하다고 생각 했었다.

그러나 변수를 할당할 경우 원시형 자료와 참조형 자료에 따라 차이가 엄청 크다.

이를 깊은 복사와 얇은 복사라고 부르며, 이 둘의 차이에 대해 알아보자!

깊은 복사

깊은 복사
자바스크립트에서 원시형 자료는 문자, 숫자, boolean, undefined, null이 있다.
이들은 변수에 값을 복사할 경우 완전히 복사하므로 깊게 복사한다고 보면 좋다.

let str = "Hello!";
let newStr = str;

newStr = "Bye!"

console.log(str) // Hello!
console.log(newStr) // Bye!

위의 깊은 복사 코드를 분석하자면 newStr 변수가 "Bye!" 문자열로 재할당 후

각각 출력 결과를 보면 str에 전혀 영향을 주지 않은 것을 볼 수가 있다.

newStr 완전히 독립적인 변수가 된 셈이다.

얇은 복사

얇은 복사
자바스크립트에서 참조형 자료는 함수, 객체, 배열에 해당된다.
만약 배열을 선언한 변수에 다른 변수를 할당 후 각 변수의 주소 Memory Heap이 동일하여
서로가 의존된 관계이다. 이는 얅게 복사된 경우이므로 얇은 복사라고 부른다.

let arr = [1, 2, 3];
let newArr = arr;

newArr[0] = "New number"

console.log(arr) // ["New number", 2, 3]
console.log(newArr) // ["New number", 2, 3]

위의 코드는 newArr과 arr의 각 배열의 값이 동일한 주소 메모리 힙에 보관된 관계로

둘 중 하나의 데이터 자료형의 요소가 재할당되면 동일하게 변경된다.

객체에서의 얇은 복사와 깊은 복사

    let teamNBA = {
      finalMVP: 'LeBron',
      championTeam: 'LA lakers',
      nbaALLstar: ['LeBron', 'Westbrook', 'Durant', 'Curry', 'Kawhi'],
    };

	let teamNewNBA = Object.assign({}, teamNBA); // 객체 복사
	
	// 얇은 복사
	teamNBA.nbaALLstar[0] = "ㅇㅅㄹㅅ"
	console.log(teamNBA.nbaALLstar) 
	// ['ㅇㅅㄹㅅ', 'Westbrook', 'Durant', 'Curry', 'Kawhi']
	console.log(teamNewNBA.nbaALLstar)
	// ['ㅇㅅㄹㅅ', 'Westbrook', 'Durant', 'Curry', 'Kawhi']


	// 깊은 복사
	teamNBA.finalMVP = 'The KingBron'
	console.log(teamNBA.finalMVP) // 'The KingBron'
	console.log(teamNewNBA.finalMVP) // 'LeBron'

위의 코드를 보면 key값이 원시 자료형이면 객체 복사 teamNewNBA 에 영향을 안 주지만,
반대로 참조 자료형일 경우 객체 원본 teamNBA 값이 변경될 경우 똑같이 바뀐 모습을 볼 수가 있다.

결론

깊은 복사는 원시 자료형, 얇은 복사는 참조 자료형에 영향을 받는 것을 알 수가 있고,

얇은 복사는 결국 메모리 힙이 동일하므로 원본과 복사본 변수가 동일하게 재할당 되는 것이다.