서론

자바스크립트를 이용한 프로젝트를 진행하면서 변수 또는 배열을 복사를 많이 이용한다.
헷갈렸던 깊은 복사와 얕은 복사, 전개연산자 까지 정리한다.
우선 원시형과 참조형에 대해서 알아보자!

원시형과 참조형

원시형이란 자바스크립트에서 객체가 아니면서 메서드도 가지지 않은 데이터입니다. (출처 - MDN)

number, string, boolean, null, undefined 등이 해당됩니다.

원시형의 값은 변형할 수 없고(불변성), 재할당을 해야합니다.

let a = 1; // 주소 : 1000, 값 : 1
a = 2; // 주소 : 1001, 값 : 1

위에 코드 처럼 값을 변경한다면 새 메모리 공간을 할당하고 값을 변경합니다.
즉, 원시형은 불변성을 유지하고, 변수는 가리키는 메모리 주소를 바꿔가면서 변수 값을 변경합니다. 값 복사 = 깊은 복사

---

참조형이란 자바스크립트에서 원시형이 아닌것들은 모두 참조형입니다.

객체, 배열, 함수가 해당됩니다.

참조형은 변수에 할당할 때는 변수 값이 아닌 주소를 저장합니다. 주소복사 = 얕은 복사

---

깊은 복사(Deep copy)란?

• 독립적인 메모리를 차지한다.
• 데이터 값 자체를 복사한다.

얕은 복사란?

• 주소 값을 복사한다.
• 깊은 복사보다 상대적으로 빠르다.

let a = {value : 1} // 주소값 : 1000, 값 : value = 1
let b = a; // 주소값 : 1000, 값 : value = 1

b.value = 2;

console.log(a); // {number : 2}
console.log(b); // {number : 2}

전개연산자란?

• 자바스크립트 ES6부터 지원하는 문법이다.
• 깊은 복사로 적용되어 독립적인 메모리를 차지한다.

let person = {
  name : 'song'
  age : '1'
};

let copy = {...person};
copy.age = 2;

console.log(person);// {name : 'song', age : 1}
console.log(copy); // {name : 'song', age : 2}

정리

깊은 복사는 실제 값을 복사한다.
얕은 복사는 주소를 참조한다.