불변성

데이터가 최초 생성된 이후 그 상태를 변경할 수 없는 성질

원시 타입(String, number, boolean, null, undefined …

자바스크립트에서 원시 타입(Primitive Type)은 본질적으로 불변성을 가짐

• 원시 값은 값 자체가 변경되지 않으며, 재할당을 통해 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경함
  ⇒ 불변성을 갖는 원시 값이 저장된 변수를 변경하는 유일한 방법은 재할당 뿐이다.

객체 타입

객체와 배열 같은 참조 타입은 기본적으로 가변적을 가짐 ⇒ 객체의 속성을 직접 변경 가능

• 객체는 메모리 주소를 저장하며, 같은 주소를 공유하는 여러 변수가 하나의 객체를 참조할 수 있음

---

불변성을 유지하는 방법

1. 스프레드 연산자

   const person = { name: "Alice", age: 25 };
   const updatedPerson = { ...person, age: 26 };
   
   console.log(updatedPerson); // { name: "Alice", age: 26 }
   console.log(person); // { name: "Alice", age: 25 } (원본 객체 변경되지 않음)

2. Object.assign() → 스프레드가 더 직관적이므로 최근에는 잘 사용하지 않음

   const frozenPerson = Object.freeze({ name: "Alice", age: 25 });
   frozenPerson.age = 26; // 변경 불가 (무시됨 또는 오류 발생)
   
   console.log(frozenPerson.age); // 25 (변경되지 않음)

3. Object.freeze() (완전한 불변 객체) *중첩객체는 보호되지 않음

   const frozenObj = Object.freeze({ name: "Alice" });
   frozenObj.name = "Bob"; // 변경 불가 (무시됨 또는 오류 발생)

4. Immutable.js 등 라이브러리 활용

   → Immutable.js(변경 불가능한 데이터 구조를 제공하는 라이브러리), Immer(기존 객체를 불변하게 유지하면서 변경을 쉽게 할 수 있도록 도와주는 라이브러리) 등을 사용하여 깊은 복사를 간편하게 처리할 수 있음

---

불변성을 유지하는 이유

1. 예측 가능성 증가
   • 데이터가 변경되지 않으므로, 예기치 않은 사이드 이펙트를 방지할 수 있음.
2. 디버깅 및 유지보수 용이
   • 데이터 변경이 새로운 객체 생성을 통해 이루어지므로 변경 지점을 명확히 추적할 수 있음.
3. 리액트(React) 등의 프레임워크와의 궁합
   • 상태(state) 변경을 감지할 때 객체 참조(Reference) 변경을 이용하면 효율적인 렌더링이 가능함.