불변성

: 값이나 상태를 변경 불가능한 것을 의미

JS 타입을 통한 불변성

원시 타입

불변성을 가지고 있음

Boolean, String, Number, null, undefined, Symbol

고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당

username에 walter를 john으로 대체한 것이 아닌 메모리 영역 a에 있는 walter라는 값을 그대로 두고, 메모리 영역 b에 john을 새로 할당한 것

참조 타입

불변성을 가지고 있지 않음

Object, Array

데이터 크기가 정해지지 않고, Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리 주소값이 할당

배열에 대한 요소를 추가하거나 객체 속성 값을 변경 시 Call Stack의 참조 ID는 동일하게 유지되고, Heap 메모리에서만 변경됨

불변성을 지켜야하는 이유?

1. 참조 타입에서 객체나 배열의 값이 변할 시 원본 데이터가 변경되기에 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류 발생할 수 있어서 프로그래밍의 복잡도가 올라감

2. 리액트에서 화면을 업데이트 시 불변성을 지켜서 값을 이전 값과 비교해 변경된 사항을 확인 후 업데이트하기에 불변성 지켜줘야 함

불변성 지키는 방법

참조 타입에서는 값을 변경 시 Call Stack 주소 값은 같으나 Heap 메모리 값만 바꿔주기에 불변성 유지 불가능하므로 아예 새로운 배열을 반환하는 메소드 사용

원본 데이터를 변경하는 메소드 => splice, push

sameArray 객체 경우 array 자체를 할당받은 후 push 메소드로 5 추가

이는 객체로써 array와 sameArray가 같은 주소를 참조하기에 sameArray에 5를 추가하면 원본 데이터인 array에도 같이 5가 추가됨

그래서 전개 연산자를 활용해 새로운 객체에 할당하는 식으로 진행

이렇게 진행한다면 참조하는 주소가 달라지기에 둘은 다르게 됨

이는 깊은 복사와 얕은 복사 개념을 참고하면 더 이해가 될 것