[Javascript] 깊은 복사 , 얕은 복사 파헤치기

오랜만에 돌아온 포스팅...!

리액트를 공부하며 자바스크립트에 관해서도 공부를 하게 된다.

리액트에서는 상태관리가 중요한데 그 과정에서 깊은 복사, 얕은 복사를 파헤쳐보고 싶었다..

그럼 레스기릿~

---

깊은 복사

- 객체의 실제값을 복사하는 복사.

얕은복사

- 객체의 주소값(참조값)을 복사하는 복사.

 

 

자바스크립트에서 값은 원시값과 참조값으로 구분 가능하다.

 

원시값

• Number
• String
• Boolean
• Null
• Undefined

참조값

• Object
• Symbol

원시값의 경우 값을 넣어줄 때 변수의 메모리공간에 실제 값이 저장된다. 복사를 해도 다른 메모리공간에 할당이 된다.

const a = 2;
let b = a;

b = 3;


console.log(a); // 2
console.log(b); // 3

-> a와 b가 원시형이기 때문에 서로에게 영향을 주지 않는다.(다른 메모리공간을 사용한다.)

 

참조값의 경우 변수가 객체의 주소를 가리키고 있기 때문에 복사된 값이 같은 값을 바라보고 있다.

const a = [2];
let b = a;

b[0] = 3;

console.log(a); // [3]
console.log(b); // [3]

-> 배열 a와 b는 같은 주소값을 가리키고 있다. 그래서 복사된 값을 변경했을 때에도 두 개 값 모두가 변한다.

 

 

👍 간편한 깊은 복사 방법

- ES6 버전에서는 Spread 연산자가 추가되어서 깊은 복사가 한층 편리해졌다. 기존에는 assign 메서드를 사용한 방법을 사용했지만, Spread 연산자를 통해 간편하게 복사가 가능해졌다.

const a = [2];
let b = [...a]; // Spread 문법을 통한 깊은 복사

b[0] = 3;

console.log(a); // [2]
console.log(b); // [3]

 

Spread 연산자를 통해 편하게 복사하자~