mutable vs immutable

• mutable
  • 생성된 이후에 상태가 변경될 수 있는 객체
  • Javascript에서는 object와 array만 Mutable한 타입이고, 원시 타입은 Immutable하다.
• immutable
  • 생성된 이후에 상태가 변경되지 않는 객체
  • 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어 내는 것 (즉, 메모리 영역의 값을 변경할 수 없는 것이다.)
  • 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다.

원시타입에서의 불변성

let string = 'data1' // 1. string: 'data1'가 메모리 영역1에 등록된다. 
string = 'data2' // 2. string: 'data2'가 메모리 영역2에 등록된다.

• 재할당하기 위해서 새로운 메모리 영역에 data2를 저장한다.
• data1 의 값은 저장된 메모리에 그대로 둔다.

이로써, 불변성을 지켰다고 한다.

참조타입에서의 불변성

let array = [1, 2, 3, 4] // 메모리영역 1
array.push(5) // 메모리영역 1 

console.log(array) // [1, 2, 3, 4, 5]

• array.push(5)는 원본데이터를 수정함으로써 불변성을 지키지 않는다.

let array = [1, 2, 3, 4];
array2 = [...array]; 
// array2에 array를 복사해서 서로 다른 참조 값을 가진다.

array.push(5);

// array = [1, 2, 3, 4, 5];
// array2 = [1, 2, 3, 4];

array === array2; // false

// 따라서 array 의 값 변화는 array2에 영향을 주지 않는다. 
// 즉 불변성을 지킴

어떻게 불변성을 지키는가?

불변성을 가진 원시타입과 달리 참조타입의 경우에는 의도적으로 불변성을 지켜주어야한다. 이 때 새로운 주소 값을 가진 객체를 생성하여 상태를 업데이트 해준다. spread operator, map, filter, slice, reduce 메소드들을 활용한다.