🪴 이론적 개념
깊은 복사(Deep Copy)
'실제 값'을 새로운 메모리 공간에 복사하는 것
얕은 복사(Shallow Copy)
'주소 값'을 복사하는 것
🪴 예시
// 깊은 복사
let num1 = 1;
let num2 = num1; // num2에 num1 값 복사
num2 = 2; // num2 값 변경
console.log(num1); // 1
console.log(num2); // 2
// 기존 값에 영향을 끼치지 않는다.// 얕은 복사
const hyun = {
name: "구현",
age: 23,
};
let hyunCopy = hyun; // hyunCopy에 hyun 값 복사
hyunCopy.age = 24; // hyunCopy 값 변경
cosole.log(hyun); // {name: "구현", age: 24}
cosole.log(hyunCopy); // {name: "구현", age: 24}
// 기존 값에 영향을 끼친다.왜 어떤 경우에는 원본 값이 불변하고 또 다른 경우에는 원본값이 변하는가?
첫번째 경우는 원시값을 변경한 경우이고 두번째 경우는 참조값을 변경한 경우이기 때문이다.
🪴 Value & Reference type
원시값, 참조값, 실제 값, 주소 값은 무엇인가,,
모든 데이터 타입은 값 타입(value type) 또는 참조 타입(reference type) 을 가진다.
자바스크립트에서 값은 원시 타입 (= 값 타입) 과 참조 타입 두 가지 데이터 타입의 값이 존재한다.
원시 타입 / 값 타입(Value type)
- 기본 자료형(단순한 데이터)을 의미한다.
- 변수에 원시값을 저장하면 변수의 메모리공간에 실제 데이터 값이 저장된다.
- javascript에서 Number, String, Boolean, Null, Undefined, Symbol 등이 해당 타입에 속한다.
참조 타입(Reference type)
- 자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다.
- 참조형은 원시형 데이터의 집합이다. 따라서 참조 자료형은 기존에 고정된 크기의 보관함이 아니다.
- 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.
- 변수에 참조 자료형을 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를 저장하게 된다.
- javascript에서 Object, Array, function 등이 해당 타입에 속한다.
🪴 얕은 복사(Shallow Copy)가 필요한 이유
const hyun = {
name: "구현",
age: 23,
.
.
.
};
let hyunCopy = {
name: "구현",
age: 23,
.
.
.
};
// let hyunCopy = hyun;객체의 각각의 속성을 메모리에 할당하는데에 걸리는 시간이 존재한다.
따라서 hyun 의 값을 할당하는 시간과 hyunCopy 에 hyun 의 값을 복사하는데에 걸리는 시간이 각각 발생하므로 비효율적이다.
즉 hyunCopy 에는 참조(주소)값을 할당하여 시간을 단축시킬 수 있다.
🪴 깊은 복사(Deep Copy)가 필요한 이유
복사를 하는 목적은 기존 객체의 값만 복사본으로 가져와 별도로 활용하기 위함이 대부분이기 때문에 원본의 값이 변하지 않도록 하기 위해 깊은 복사가 필요하다.
const hyun = {
name: "구현",
age: 23,
.
.
.
};
let hyunCopy = { ...hyun };