IT/Javascript

Javascript Immutability

1am_wish 2022. 10. 27. 22:14
728x90
반응형
  • mutability : 변화 가능함(정보의 원본이 변경될 수 있음)
  • Immutability : 변화 불가능함(불변함)

자바스크립트의 Immutability는 데이터의 변화, 즉 데이터 원본의 훼손을 막는 것

 

데이터는 결국 CRUD 의 작업으로 이루어진다. 중요한 것은 CREATE, READ. 생성이 아니면 읽을 수 없고 읽을게 아니면 생성할 필요가 없기 때문. 그 원본은 origin

파일을 자유롭게 쓰고 지우기위해 컴퓨터가 활성화되었지만 너무 자유도가 높아졌기 때문에 데이터의 불변함을 지킬 중요도가 커졌다!

 

  1. 이름에 대한 불변함
    1. var : 가변 변수. 값을 바꿀 수 있음.
    2. const : 상수 변수. 값을 바꿀 수 없음.
  2. 변수 할당 방식
    1. Primitive : 원시 데이터 타입. 더이상 쪼갤 수 없는 데이터 타입. 같은 값이면 ===으로 비교했을때 참이다.
      1. Number, String, Boolean, Null, Undefined, Symbol
    2. Object : 객체. 데이터의 집합. 같은 값이면 ===으로 비교했을때 거짓이다. 내부 프로퍼티가 달라질 수 있기때문.
      1. Object, Array, Function
      2. a 객체를 복제할 때 객체의 불변함을 유지하는법. 
        1. var b = a -> a객체의 위치를 가리키기 때문에 b의 값을 바꾸면 a의 값이 바뀐다
        2. var b = Object.assign({}, a) => 빈 객체에 a객체에 있는 것을 병합해서 새로운 객체를 만들기 때문에 a와 별개로 따로 존재한다.
      3. Nested Object : 중첩된 객체. 객체 안에 객체가 있는 상태
        1. var a = {name:'wish', score:[1,2]}
          1. 객체 안의 객체인 score의 배열은 별도의 공간에 저장이 되고 score의 값은 배열의 위치를 저장.
        2. var b= Object.assign({}, a) 일 경우 b의 score는 a의 score의 위치를 복제하기때문에 b.score를 변경하면 a.score에 영향이 미친다
        3. b.score = b.score.concat() 2번의 상황을 방지하기 위해서 복제한다.
      4. 객체의 프로퍼티를 다루는 함수에서 발생할 수 있는 일이기 때문에, 인자를 객체로 받는 함수의 경우 Object.assign을 이용해 인자를 복제해서 사용!
      5. 객체의 프로퍼티를 불변하게 만드는 방법 : Object.freeze
        1. 얼리기만 가능. 해동 불가.
        2. 객체 내 프로퍼티는 얼려져서 불변할 수 있지만, 객체 내 객체는 변경이 가능하다. 객체 내 객체의 데이터는 다른곳에 저장되었고 프로퍼티는 위치(레퍼런스)만 저장되어있기 때문에.
      6. const VS Object.freeze
        1. const : 이름을 규제
          1. const a  = {name:'wish'}일 경우 a = b 가 안되게 통제
        2. freeze : 값을 규제
          1. const a  = {name:'wish'}일 경우 a.name = 'sowon' 가 안되게 통제

Immutability 을 유지하기 위한 Immer, mori라는 라이브러리들도 있으니 활용하는 것도 좋다

728x90
반응형