불변 객체
먼저 불변(immutability)이란 뭘까? 단어에서 유추해볼 수 있다시피
'변하지 않는' 뜻이라고 생각하면 되겠다.
그럼 '불변 객체'란? '변하지 않는 객체'
즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.
자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지 인데
const와 Object.freeze()를 사용하는 것이다.
깊은 복사, 얕은 복사
결론부터 말하자면 얕은 복사는 객체의 참조값(주소 값)을 복사하고,
깊은 복사는 객체의 실제 값을 복사합니다.
먼저, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입의 값이 존재합니다.
원시값은 기본 자료형(단순한 데이터)을 의미합니다.
Number, String, Boolean, Null, Undefined 등이 해당합니다.
변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다.
할당된 변수를 조작하려고 하면 저장된 실제 값이 조작됩니다.
참조값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다.
Object, Symbol 등이 해당합니다. 변수에 객체를 저장하면
독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를
저장하게 됩니다. 그래서 할당된 변수를 조작하는 것은
사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것입니다.
원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다. 이처럼 실제 값을 복사하는 것을 깊은 복사라고 합니다. 하지만 이것은 자료형을 깊은 복사한 것입니다.
const a = 'a';
let b = 'b';
b = 'c';
console.log(a); // 'a';
console.log(b); // 'c';
// 기존 값에 영향을 끼치지 않는다.참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있기 때문에
복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 가리키고 있습니다.
그래서 복사를 하고 객체를 수정하면 두 변수는 똑같은 참조를 가리키고 있기 때문에
기존 객체를 저장한 변수에 영향을 끼칩니다. 이처럼 객체의 참조값(주소값)을
복사하는 것을 얕은 복사라고 합니다.
const a = {
one: 1,
two: 2,
};
let b = a;
b.one = 3;
console.log(a); // { one: 3, two: 2 } 출력
console.log(b); // { one: 3, two: 2 } 출력
// 기존 값에 영향을 끼친다.출처: https://bbangson.tistory.com/78 [뺑슨 개발 블로그]
