얕은 복사와 깊은 복사

자바스크립트에서 복사는 깊은 복사와 얕은 복사가 존재한다.
원시 타입의 데이터가 복사 될때는 새로운 메모리 공간을 생성하여 메모리에 독립적인 값을 저장한다.
object와 같은 참조 타입 데이터는 애초에 저장 시 데이터에 대한 주소가 저장되기 때문에 복사 시 값 자체가 아닌, 해당 값을 가리키는 주소가 복사된다.

원시타입은 복사(깊은 복사)가 되고, 원시타입을 제외한 참조타입은 참조(얕은 복사)가 된다.

깊은 복사

let a = 1;
let b = a;

console.log(a); // 1
console.log(b); // 1

a = 2;
console.log(a) // 2
console.log(b) // 1

먼저 변수 a에 1을 할당한 뒤, 변수 b에 a를 할당(복사)했다. 그 이후에 a에 2를 재할당 했지만, 여전히 b는 1을 출력하는것을 볼 수있다.

원시타입은 복사 시 값 자체를 담은 독립적인 메모리를 생성하기 때문에 a가 재할당 되더라도 b에는 아무런 영향을 미치지 않는다.

얕은 복사

let a = { name: 'Park'};
let b = a; // 참조

console.log(a); //{name: "Park"}
console.log(b); //{name: "Park"}

a.name = 'Kim';

console.log(a); //{name: "Kim"}
console.log(b); //{name: "Kim"}

변수 a에 객체를 하나 만들고 b에 a를 할당해 주었다. 이후 a의 name이란 키의 값을 Kim으로 변경했더니, a객체를 복사한 b의 객체에서도 변형이 일어났다. 이는 참조 타입의 변수가 실제 데이터가 아닌 저장된 주소를 참조하기 때문에 이런 일이 일어나는 것이다.

즉, 데이터가 하나 더 생성된 것이 아닌 해당 데이터의 메모리 주소를 전달하게 돼서, 결국 한 데이터를 공유하게 되는 것이다.