[JavaScript] Immutability

productuidev·2022년 4월 27일
1

VanillaJS

목록 보기
10/11
post-thumbnail

개념 정리


Immutability (불변성)

출처 - 생활코딩 JavaScript Immutability

mutate 변화
mutable 변화가능한
mutability 변화가능함 = 정보(데이터)의 원본이 변경될 수 있음
immutability 변화가능하지않음 = 정보(데이터)의 원본이 훼손되는 것을 막는 것

복잡한 정보의 세계를 작게 분해하면 결국 4가지 기본적인 작업으로 이루어져 있다
Create 생성 / Read 조회 / Update 수정 / Delete 삭제

이 중에 더 중요한 것은 Create(생성)Read(조회)
생성이 없다면 읽을 수 없고, 읽지 않을 거라면 생성할 이유가 없기 때문에

Create(생성) = 수단
Read(조회) = 목적
=> origin (원본)

  • 그 분야의 핵심 이해하기
    어떤 정보시스템을 분석할 때 이 시스템에서 생성과 조회할 데이터가 무엇인지 분석하는 것이 기본. 그 다음이 수정과 삭제이고 수정과 삭제가 안되는 시스템이 있을까 생각해보기

  • 컴퓨터의 시작
    컴퓨터는 수정과 삭제가 되지 않는 불편함을 개선하기 위해서 출발했다
    너무 자유롭다보니 일어나는 끊임없는 사고 (체계가 없으면 사고가 난다)
    그래서 불변함에 대한 요구가 높아지고 있는 것
    무질서함에서 원본이 훼손되는 것을 통제할 수 있어야 함
    단, 가변은 디지털의 특권임 (cf. 인쇄물과 비교)
    애플리케이션에서 움직일 필요가 없는 부분은 확실하게 냉동시켜야 함


☑️ 기본개념

사실 나는 불변성이라는 개념을 자바스크립트 언어 자체를 공부할 때 말고 리액트를 공부하면서 state를 변경할 때 처음 접했었다. 그냥 단순하게 '새로운 값을 할당하지 않으면 리렌더링이 안되니까 항상 새로운 값으로 줘야지!'의 개념에서 그쳤기 때문에 불변성을 지키지 않은 코드로 버그를 발생시키기도 했고, 디버깅할 때도 애를 먹었다. 불변성 개념은 특별히 자바스크립트 언어에 한정되는 것이 아니고, 다른 언어에서도 존재하는 개념이다. 얕은 복사(shallow copy)와 깊은복사(deep copy)의 개념까지 어느정도 이어지기 때문에 꼭 숙지하는 것이 좋다. 불변성이란 무엇인지와 왜 불변성을 지키는 것이 중요한지에 대해 알아보자.
출처 - https://sustainable-dev.tistory.com/156

  • Immutability은 함수형 프로그래밍의 핵심 원리
  • ES6에서는 불변 데이터 패턴(immutable data pattern)을 쉽게 구현할 수 있는 새로운 기능이 추가
  • immutable value
    Javascript의 원시 타입(primitive data type)
    (Boolean / String / Number / null / undefined / Symbol)
  • mutable value
    원시 타입 이외의 모든 값은 객체(Object) 타입. 객체는 새로운 값을 다시 만들 필요없이 직접 변경이 가능
let a = 10;
let b = a;
a = 20;
console.log(a,b); //20 10

var user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

var myName = user.name; // 변수 myName은 string 타입이다.

user.name = 'Kim';
console.log(myName); // Lee

myName = user.name;  // 재할당
console.log(myName); // Kim

☑️ 불변성 지키기

  • 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경”하기 때문
  • 스프레드 문법 사용 : 스프레드 문법을 사용하여 객체를 복사해야지 객체가 불변성을 유지 (1레벨 깊이에서만 유효하게 동작, 레벨2 객체까지 불변성을 유지해주려면 아래와 같이 별도의 변수에 값을 재할당하고 넣어주는 번거러운 과정을 거쳐야 함)
  • Object.assign : 객체 참조가 아닌 객체 복사(cloning)
  • Object.freeze : 객체의 불변화를 통한 객체 변경 방지
  • Immutable.js : List, Stack, Map, OrderedMap, Set, OrderedSet, Record와 같은 영구 불변 (Permit Immutable) 데이터 구조를 제공

출처

☑️ 불변 함수 만들기

// 함수가 어떻게 동작하는지 모르고, origin을 바꾼다는 걸 전혀 인식하지 못한다면..?
// 사고가 될 수 있다.

function fn(person){
  person.name = 'lee';
}

var o1 = {name:'kim'}

fn(o1);
console.log(o1); // {name:'lee'}



// 의도하지 않은 side effect 방지 -> immutable하게 다루기
// return 방식으로 변경
// 원본 바꾸지 않고, 복제본의 결과를 리턴

function fn(person){
  person.name = Object.assign({}, person);
  person.name = 'lee';
  return person;
}

var o1 = {name:'kim'}
var o2 = fn(o1);

fn(o1);
console.log(o1); // {name:'lee'}


// 다른 방법

function fn(person){
  person.name = 'lee';
}

var o1 = {name:'kim'}
var o2 = Object.assign({}, o1);
fn(o2);
console.log(o1, o2); // {name:'kim'} {name:'lee'}

참고자료
https://evan-moon.github.io/2020/01/05/what-is-immutable/
https://jinminkim-50502.medium.com/immutability-%EB%B6%88%EB%B3%80%EC%84%B1-fdf379f6a35c
https://serzhul.io/JavaScript/javascript-%EB%B6%88%EB%B3%80%EC%84%B1(immutability)/
https://joooohee.tistory.com/2


💬 내 블로그와 다른 블로그와의 차이점 : 그냥 기록저장소(TIL). 공부하다 느끼는 점, 잡생각 많음. 다른 자료 많이 참조. (새 정보의 가공과 오리지날리티 측면에서 보면 별로 도움안되는 블로그..^^;)

💬 정말 창의적이거나 본 적 없는 버그가 아니라면 대부분의 고민은 같다. 때문에 구글링하다보면 내가 모르거나 막히는 개념에서 해결한 케이스가 꽤 많이 나오고 찾으면 50~75%는 해결이나 이해 가능 (나머지는 case by case)

💬 개발을 공부하다보면 생소한 용어가 많다. 그러다보니 같은 개념 설명인데도 좀 더 쉽게 설명한 자료만 서칭하게 된다 (그러다보면 결국에 도착하게 되는 곳은 생활코딩... 학습의지만 있다면 사실 왠만한 국비학원, 인강사이트, 부트캠프보다 더 좋은 곳...) 그런데 생각해보면 모든 학문 자체가 그 용어가 어려움에서부터 출발한다. 왜 이렇게 용어가 확 와닿지 않지?라는 생각이 드는 이유는 9:57초가 말해준다...

💬 친구가 모든 걸 다 알지 않아도 찾아가면서 하라는지 알겠다. 친구는 개발자인데도 공부를 안한다. 공부를 한 걸 본 적이 없다.. (그러다보면 가끔 화가 나기도) 오히려 개발보다 게임을 더 많이 하는 거 같다. (근데 게임도 머리가 좋아야 잘한다고 한다) 그런데도 난 기본적인 건 알고 하는 게 좋을 것 같아 퇴근하고 몰입 가능한 시간에 조금이라도 집중해서 보려고 노력하는데.. 친구는 초년생 때 자바 책 1권 읽은 게 전분데 현재 700 넘게 받는다(그건 아마도 프리랜서라서겠지만..🙄 거기다 1년 내내 일이 끊긴 적이 없다. 한국에서 먹고 살려면 결국은 자바가 답인가?) 개발자라는 직업 자체가 머리가 좋아야 하니 원래부터 분석이 빠르고 그때그때 서칭, 대처능력과 문제해결이 좋은 사람이 이 직업을 택하면 사실 공부에 대한 압박감은 필요없지 않을까..? (물론 직장>직업인 사람, 연구직같은 고도의 분야 제외) 사실 공부랑 다르게 일이라는 건 자기가 하는 노력 = 보상이 비례하는 건 아니라는 점에서 어찌보면 당연한 걸수도 있다. 물론 그렇게 책정되는 곳도 있겠지만.. 그래서 남과 나를 비교하거나 조금 더 받는다고 내가 월등한 것도 조금 덜 받는다고 내가 가치가 없는 것도 아니라고 생각한다. 자기가 노력을 한다 해도 결국엔 좋은 기회 + 적정하게 책정된 보상 + @가 적절한 타이밍에 이루어지지 않으면 안된다는 생각. (아무래도 이 공부를 하다보면 개발자 연봉에 대한 이야기가 많이 나와서 드는 생각... 물론 시장이 돌아가는 원리도 있겠지만..)

profile
필요한 내용을 공부하고 저장합니다.

0개의 댓글