[JS Data-types(데이터 타입)] 불변성

Chanki Hong·2023년 3월 11일
1

JavaScript

목록 보기
7/30
post-thumbnail

불변성

  • 불변성은 변수 또는 데이터 구조의 특성 이며, 데이터가 한 번 생성되면 수정할 수 없는 것을 말함.
  • 즉, 한 번 값이 생성되면 그 값을 수정하는 대신 새로운 값을 생성해야 함.
  • 기본적으로 원시 값은 불변성(immutable)을 가지며, 객체는 불변성을 가지지 않고 변이성(mutable)을 가지고 있음.
  • 원시 값과 객체 모두에서 구현될 수 있으며, 데이터의 예측 가능성과 안정성을 높힘.

원시 값

  • 불변성(immutable)을 가지며, 한 번 메모리에 할당되면 그 값을 변경할 수 없음을 의미함.
  • 즉, 해당 메모리 공간에 원시 값을 할당하게 되면 읽기 전용(read-only)으로 저장.
  • 변수(확보된 메모리)에 실제 값이 저장 됨.
  • 변수에 원시 값을 할당 한 뒤, 변경 한다면 => 메모리 공간(주소)의 값이 바뀌는 것이 아니며, 새로운 메모리 공간(주소)에 원시값이 할당 되고 변수가 그 값을 가리킴. (재할당이 일어남)
  • 재할당을 하면서 버려진 메모리 공간은 나중에 JS엔진 내부의 가비지 컬렉터(Garbage Collection)에 의해 메모리에서 제거.
let name = "Alice";
name = "Bob"; // 문자열 수정 (문자열을 새로운 메모리 공간에 재할당)
console.log(name); // "Bob"

객체

  • 불변성을 가지지 않고 변이성(mutable)을 가짐.
  • 따라서 재할당 없이 객체를 직접 변경 가능.
// 불변성을 가지지 않는 객체
const person = {
  name: "Alice",
  age: 30,
};
// 객체의 속성 변경
person.name = "Bob";
console.log(person.name); // "Bob"

객체에 불변성 부여하는 방법

Deep Copy(깊은 복사)

  • Deep copy하여 새로운 객체를 만드는 것은 불변성을 부여하는데 효과적인 방법 중 하나.
  • Deep copy에 대한 내용.

Object.freeze()

  • Object.freeze()는 객체를 동결.
  • 사본 생성시 똑같이 밀봉(freeze)된 객체가 복사됨.
  • 변경, 추가, 제거가 모두 불가능.
const test = { a: 1, b: 2, c: 4 };
Object.freeze(test);

test.c = 100;
console.log(test);
  • 다만, 1depth에서만 동결이 됨.
  • 2depth 등에 적용하기 위해서는 프로퍼티에서 한번더 적용해야 함.
  • Object.seal()은 변경은 가능하며 추가, 제거가 불가능.

객체를 const로 선언했던 이유

  • 객체를 동결(Object.freeze()), 밀봉(Object.seal()) 하여 불변성을 부여 한다면,
  • const로 선언한 객체일 경우 불변성 유지가 명확하게 보여짐.
  • 하지만 let으로 객체를 선언하게 되면, 객체의 속성을 변경할 수 없지만 재할당이 가능해 불변성 여부가 흐려짐. (불변성이 부여된 것은 맞음)
let test = { a: 1, b: 2 };
Object.freeze(test);

test.a = 3;
console.log(test); // { a: 1, b: 2 } (객체의 속성은 변경할 수 없음)

test = { a: 3, b: 2 };
console.log(test); // { a: 3, b: 2 } (새로운 객체를 참조하게 됨; 재할당 됨)

0개의 댓글