Javascript immutability

Javascript immutability (생활코딩)

이 글은 생활코딩의 이고잉 님의 Javascript immutability 강의를 듣고 리뷰한 글입니다. Link

immutability - 데이터의 원본이 훼손되는것을 막는 것.

이 바닥에서 생성과 읽기는 무엇이냐?를 공부하는 것이 핵심이다.

책을 출판하면 수정과 삭제가 매우 힘들게 된다. 컴퓨터는 수정과 삭제가 되지 않는 실생활의 불편함을 해결하기 위해 나왔다고도 할 수 있습니다. 하지만 수정과 삭제가 너무 자유롭다 보니 프로그래밍 세계에서는 이 때문에 생기는 문제가 많다. 그래서 불변함에 대한 요구가 높아지고 있다.

1. 이름에 대한 불변함: const vs var

   // const-var.js - 100명의 개발자가 함께 개발하고 있는 파일
   var = 1;
   // 1억 줄의 코드
   v = 2;
   console.log('v :' + v);
   
   const c = 1;
   // 1억 줄의 코드
   c = 2;

   ES6의 const 기능으로 부주의하게 다른 사람이 변수를 변경하는 것을 막을 수 있다.

2. 변수 할당 방식 비교

   1. 자바스크립트의 데이터 타입
      1. Primitive
         1. Number
         2. String
         3. Boolean
         4. Null
         5. Undefined
         6. Symbol
      2. Object
         1. Object
         2. Array
         3. Function

   변수에 primitive 타입의 값을 할당할 경우 메모리에 immutable하게 저장되게 됩니다. 하지만 Object 타입의 데이터의 경우 Object는 mutable하기 때문에 같은 주소의 메모리가 아닌 다른 매번 다른 공간에 저장됩니다.

   var p1 = 1;
   var p2 = 1;
   console.log(p1 === p2); // 같은 값을 가르키고 있기 때문에 true
   var o1 = { name: 'kim' };
   var o2 = { name: 'kim' };
   console.log(o1 === o2) // 같은 값을 가르키고 있지 않기 때문에 false

3. 객체의 가변성

   var o1 = { name: 'kim' };
   var o2 = o1
   console.log(o1 === o2); // 같은 객체를 가르키고 있기 때문에 true
   o2.name = 'lee';
   console.log(o1.name); // 같은 객체를 가르키고 있기 때문에 kim

4. 객체의 복사

   o1을 그대로 대입하지 말고 Object.assign()을 활용하면 immutability를 유지 할 수 있다.

   var o1 = { name: 'kim' };
   var o2 = { Object.assign({}, o1) }
   console.log(o1 === o2); // 서로가 다른 객체를 가르키고 있기 때문에 false

5. 중첩된 객체의 복사

   var o1 = { name: 'kim', score: [1, 2] }
   var o2 = Object.assign({}, o1);
   o2.score.push(3);
   console.log(o1.score); // [1, 2, 3] Object.assign()으로 할당 했는데도 같은 객체를 가르키게 된다.
   o2.score = o2.score.concat(4);
   console.log(o2.score); // [1, 2, 3, 4] concat은 새로운 배열을 만들어 리턴하기 때문에 더이상 o1.score와 같은 객체를 가르키지 않게 된다.
   console.log(o1.score); // [1, 2, 3] o2.score와 다른 객체를 가르키게 됬음으로 그대로

6. 불변의 함수 만들기

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

7. 가변과 불변 API 비교

   var score = [1, 2, 3];
   score.push(4);
   console.log(score); // [1, 2, 3, 4]
   var score2 = score.concat(5);
   console.log(score, score2) // [1, 2, 3, 4], [1, 2, 3, 4, 5]

8. Object freeze로 객체를 불변하게 만들기

   var o1 = { name: 'kim', score: [1, 2] }
   // freeze 메소드를 통해 o1을 immutable하게 만들 수 있다.
   Object.freeze(o1);
   o1.name = 'lee';
   o1.city = 'seoul';
   console.log(o1.name); // 'kim' o1 객체는 이제 immutable하기 때문에
   o1.score.push(3);
   console.log(o1.score) // [1, 2, 3] 객체는 freeze되지 않는다ㅠㅠ.
   Object.freeze(o1.score);
   o1.score.push(4); // error 발생

9. const vs Object.freeze

   const o1 = { name: 'kim' };
   Object.freeze(o1);
   const o2 = { name: 'lee' };
   o1 = o2; // const 키워드로 인한 error
   
   o1.name = 'park';
   console.log(o1); // { name: 'kim' } freeze로 인해 변경되지 않음

10. 수업을 마치며

    immutability가 mutability을 뛰어넘는 발전된 개념이라고 생각하지 말자. 각자 필요한 곳에 쓰면 된다.