[javascript] 깊은 복사, 얕은 복사

자바스크립트의 데이터 타입(원시 값, 참조값)

---

 

- 원시값

• 기본 자료형(단순 데이터)
• Number, String, Boolean, Null, Undefined 등
• 변수에 원시 값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됨.
• 할당한 변수를 조작하려고 하면 저장된 실제 값이 조작됨.

 

- 참조값

• 여러 자료형으로 구성되는 메모리에 저장된 객체 -> Object, Symbol 등 해당
• 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를 저장하게 됨-> 그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것.
•  

---

 

깊은 복사

 

깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체

• 원시 값을 복사할 때 그 값을 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시 값을 저장한 변수에는 영향을 끼치지 않는다. 이처럼 실제 값을 복사하는 것을 깊은 복사라고 한다. 하지만 이것은 자료형을 깊은 복사!

깊은 복사(Deep Copy) 방법
- JSON.parse && JSON.stringify : ex) const copy = JSON.parse(JSON.stringify(object));

- 재귀 함수를 구현한 복사

- Lodash 라이브러리 사용

 

 

---

 

얕은 복사-> 객체의 참조값을 복사하는 것

 

객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있다는 것.
객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

• 참조값을 복사할 때 변수가 객체의 참조를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 가리키고 있으므로 복사하고 객체를 수정하면 두 변수는 똑같은 참조를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 끼친다. 

얕은 복사(shallow copy) 방법
- Object.assign(생성할 객체, 복사할 객체)
- Spread 연산자(전개 연산자) : ex) const copy = {...object}

 

 

 

출처, 참고:

https://bbangson.tistory.com/78

[JavaScript] 깊은 복사, 얕은 복사