[JS] immutability

📎 Reference
https://opentutorials.org/module/4075

우선, immutabiltiy에 대해 논할 수 있는 대상은 2가지임을 알고 넘어가야 한다.

var name = value;

1. name 값(value)을 할당받는 대상
2. value 할당받을 값 자체

1. name의 immutability : var(let) vs const

var v1 = 1;
const v2 = 2;

v1 = 3; // 가능
v2 = 3; // TypeError: Assignment to constant variable.

• var(혹은 let)로 선언된 v1의 경우 mutable 하여 재할당이 가능하다.
• const로 선언된 v2의 경우 immutable 하여 재할당이 불가능하다.

상황에 맞게 선택하여 사용하면 된다.

2. value의 immutability : 원시데이터인지?

value의 경우 원시데이터인지 여부에 따라 immutability가 달라진다.

• 원시데이터는 immutable하여 값을 바꿀 수 없다.
• 원시데이터가 아닌 객체(array, object, function)는 mutabile하여 값을 바꿀 수 있다.

🖍 원시데이터 (Primitive Data)

더 이상 쪼갤 수 없는 최소한의 정보 데이터로 number, string, boolean, null, undefined, symbol이 포함된다.

🤔 '값을 바꾼다'? (의견)

이 때 값을 바꿀수 있다/없다의 의미는 (내가 이해하기로는) 이런 것 같다. 그러니깐 틀릴 수 있다.

var myNum = 3;
var myArray = [🍎, 🍇, 🍋]

myNum의 값인 3은 그냥 3이다. 3은 1이 될 수 없다. 바꿀 수 없다. (myNum의 값을 1로 재할당하는 것과 다른 의미이다.)

하지만 myArray의 값인 배열 Object의 경우는 다르다. 이 배열 [🍎, 🍇, 🍋]을 과일이 담겨진 이름이 myArray인 상자라고 생각해보자. 상자에서 사과를 오렌지로 바꾸어도 상자는 여전히 같은 상자이다. [🍊, 🍇, 🍋] 이 상자는 여전히 myArray 상자인 것이다.

❓immutability에 대해 아는 것이 왜 중요할까?

name의 immutability와 value의 immutability를 이해했다면, 왜 이것이 중요한지 생각해야 한다.

immutable한 것이 무조건 mutabile한 것보다 좋은 것은 아니다. 중요한 것은 언제 immutability를 지향해야 하는지 알아야 하는 것이다.

원본 데이터의 훼손을 방지해야하는 상황일 때, immutability를 지향하는 코드를 짜야 한다.

아래 예제와 같이 원본과 복제본이 존재하는 상황에서 mutability가 문제가 될 수 있다. mutable 하다는 말인 즉슨, 원본 데이터의 훼손 가능성이 있다는 의미이다.

var obj1 = {
  name: 'yooni',
  gender: 'female',
  citi: 'seoul'
}

var obj2 = obj1 // 원본 obj1을 복제하여 obj2를 만들었다.
obj2.name = 'suyeon'; // 복제본 obj2의 name을 수정했다.
console.log(obj1, obj2);

🖥 콘솔 출력 결과

{ name: 'suyeon', gender: 'female', citi: 'seoul' } { name: 'suyeon', gender: 'female', citi: 'seoul' }

의도치 않게 원본인 obj1의 name까지 변경(훼손)되었음을 확인할 수 있다. 그래서 mutable한 것을 immutable하게 보완하기 위한 방법들을 알아야 한다.

3. mutable한 것을 immutable하게 보완하기 위한 방법들

var name = value;

☝🏻 name의 immutable

• 변수 선언시 const로 선언한다.
• Object.freeze(obj)를 사용하여 객체를 얼려 버린다.

const 선언과 Object.freeze(obj)의 차이는?

• const 선언 : name이 항상 같은 대상(value의 주소)을 가리키게 한다.
• Object.freeze(obj) : value 값 자체를 못바꾸게 한다.
• 둘을 동시에 사용하면 강력한🔥 불변성을 확보할 수 있다!

✌🏻 value의 immutable

Object.assign({}, obj), concat 등의 메소드를 사용한다.

• Object.assign({}, obj) : 원본은 그대로 두고 객체 복사
• concat : 원본은 그대로 두고 배열 복사