얓얕은 복사는 참조(주소) 값의 복사를 나타낸다.
ㄷㅌ)
const obj = {value: 1}
const newObj = obj;
newObj.vaule = 2;
console.log(obj.vaule); // 2
console.log(obj === newObj); // true
obj 객체를 새로운 newObj 객체에 할당했고, 이를 참조 할당이라 부른다. 복사 후 newObj
객체의 value
값을 변경하였더니 기존의 obj.value값도 같이 변경된 것을 알 수 있다. 두 객체를 비교해도 true로 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유하는 것이다.
깊은 복사는 값 자체의 복사를 나타낸다.
let a = 1;
let b = a;
b = 2;
console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false
변수 a를 새로운 b에 할당하였고 b 값을 변경하여도 기존의 a의 값은 변경되지 않는다. 두 값을 비교하면 false가 출력되며 서로의 값은 단독으로 존재하다는 것을 알 수 있다. 이렇게 자바스크립트의 원시 타입은 깊은 복사가 되며, 이는 독립적인 메모리에 값 자체를 할당하여 생성하는 것이라 볼 수 있다.
객체같은 경우, 그대로 복사하여 사용할경우, 원본이 훼손 될 여지가 있기 때문에, 깊은복사를 하는 메소드가 따로 존재한다.
Object.assign()
메소드를 이용하는 방법이다.
const obj = { a: 1 };
const newObj = Object.assign({}, obj);
newObj.a = 2;
console.log(obj); // { a: 1 }
console.log(obj === newObj); // false
스프레드 연산자를 활용해도 객체의 깊은복사가 가능하다.
const obj = {
a: 1,
b: {
c: 2,
},
};
const newObj = { ...obj };
newObj.b.c = 3;
console.log(obj); // { a: 1, b: { c: 3 } }
console.log(obj.b.c === newObj.b.c); // true