자바스크립트 자료형
자바스크립트에서 값을 복사할 때, 자료형에 따라 복사하는 값이 달라집니다.
- 기본형(Primitive type)은
Number,String,Boolean,Null,Undefined,Symbol,BigInt가 있고, 데이터 변경이 불가(immutable)합니다. 변수에 기본형을 할당하면 새로운 메모리 공간에 독립적인 실제값이 복사됩니다.let x = 1; let y = x; x = 123 console.log(x) // 123을 출력 console.log(y) // 1을 출력 (y에 할당되었던 1이 변경되지 않음)
- 참조형(Reference type)에는
Object(Array, Function, Map 등 기본형을 제외한 모든 것)가 있고, 데이터의 내용 변경이 가능(mutable)합니다. 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 복사됩니다.let obj1 = {num: 1}; let obj2 = obj1; obj1.num = 123 console.log(obj1) // {num: 123}을 출력 console.log(obj2) // {num: 123}을 출력 (obj2에 할당되었던 {num: 1}의 내용이 obj1을 따라 변경)obj2가obj1객체의 메모리 주소값을 복사하기 때문에,obj1의 값이 변경되면obj2도 동일한 메모리 주소에 있는 값을 가져 변경된 값을 갖게 됩니다.
얕은 복사와 깊은 복사
위에서 살펴본 것처럼 자료형에 따라 값을 복사하는 방식이 다른데요. 독립적인 메모리를 차지하며 실제 값을 복사 하는 것을 깊은 복사, 인스턴스를 메모리에 생성하지 않고 객체의 메모리 주소 값을 복사하는 것을 얕은 복사라고 합니다.
기본형은 기본적으로 깊은 복사가 일어납니다.
경우에 따라 참조형의 깊은 복사가 필요할 때가 있는데, 깊은 복사가 된 참조형은 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어지게 됩니다.
참조형의 깊은 복사
Object.assign()나 SpreadOperator() 메소드를 사용하면 객체 자체는 깊은 복사가 수행되지만, 2차원 이상의 객체는 얕은 복사가 수행됩니다.
2차원 이상의 객체를 완전히 깊은 복사하려면 크게 세 가지 방법을 고려해 볼 수 있습니다.
JSON.parse(JSON.stringify(obj))JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어지고, 객체를 json 문자열로 변환 후,JSON.parse()를 이용해 다시 원래 객체로 만들어 줍니다- 가장 간편하다는 장점이 있습니다.
- function이 있는 경우
undefined처리한다는 단점, 다른 방법에 비해 느리다는 단점이 있습니다.
- 커스텀 재귀 함수를 활용한 복사
- 객체의 함수도 제대로 표현할 수 있습니다.
- 복잡하다는 단점이 있습니다.
- Lodash와 같은 외부 라이브러리 활용
- 외부 라이브러리 사용에 제약이 없다면 가장 효과적인 선택지가 될 수 있습니다.
참고 자료
job's done