JavaScript의 객체에 대한 내용은 아래에서 다루었다.
👉 자바스크립트의 객체(Object)와 속성(Property)
자바스크립트의 불변성에 대해
불변성 개념은 자바스크립트 언어에 한정되는 것이 아니고, 다른 언어에서도 존재하는 개념이다.
이는 얕은 복사(shallow copy)와 깊은복사(deep copy)의 개념과도 이어진다.
불변성(Immutability)이란 말그대로 변하지 않는 것을 의미한다. 불변 데이터는 한번 생성되고나면 그 뒤에는 변할수 없다.
코드에서 불변성은 중요하다.
불변성을 지키며 데이터를 변화시킨다면 예상가능한 신뢰할 수 있는 코드가 된다. 그러나 불면성을 지키지 않은 채 코드를 작성한다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고, 이는 곧 예기치 못한 side effects나 버그로 이어지게 된다.
자바스크립트에는 원시 타입(primitive type)이 이 불변성에 해당한다. 메모리 변경은 불가능하며, 변수에 할당할 때 새로운 값이 만들어져 재할당된다.
이역시 아래의 포스트에서 따로 다루었다.
간단하게 정리하자면 자바스크립트안에 있는 원시 타입이 불변성에 해당하고, 원시 타입에는 총 6개의 타입이 존재하며 이들은 변수에 할당할 수 있다.
- string(문자열)
number(숫자)
boolean(불린값-true, false로 판단-)
undefined (값이 없음)
null (값이 없음)
symbol(ES6에서 추가됨)
변수에 값을 할당한다는 것은 값의 메모리의 주소를 가리키는 것(참조) 하는 것이다. 변수에 할당된 값은 메모리영역 안에서 변경이 불가능하며 변수에 할당할 때 완전히 새로운 값이 만들어져 재 할당된다.
🏋️♀️ 예를 들어
let color = 'olive'
let green = color
color = 'red'
console.log(green)
console.log(color)
위와 같은 코드를 실행했을 때 출력되는 결괏값은
olive
red
이다.
위 코드의 첫번째 줄에서 color라는 변수는 olive라는 값을 할당했다. color = olive 가 된 셈이다.
그러나 두번째 줄에서 color는 green에 할당된다.
여기까지만 보았을 때 color = green = olive가 된다.
그리고 세번째 줄에서 color는 새로운 값을 할당한다. red라는 값이다.
olive라는 값이 담겨있던 변수 color는 이제 red라는 새로운 값을 담은 변수로 바뀌었다.
그로인해 코드를 실행했을 때의 결괏값이 olive와 red로 출력되는 것이다.
✔ 이와 같이 let 변수는 어떠한 값을 가리키다가 다시 다른 값의 주소를 가리키는 재할당이 가능하다.
✋그러나 또 다른 변수 'const'의 경우는 다르다. let과 비슷한 const는 let처럼 할당된 값을 재할당 하려고 할 경우 오류가 생기기 때문에 재할당을 할 수 없고, 선언과 할당을 함께 해주어야 한다.
이러한 성질 덕에 상수 변수 선언이 가능하여 보통 상수로 취급받는다. 그러나 const로 객체를 선언할 경우에 객체의 속성은 언제든지 변경이 가능하기 때문에 불변성을 유지한다고 보기엔 어렵다.
그래서 함께 쓰이는 것이 Object.freeze() 메소드다. 객체를 동결하기 위한 메소드라고 설명되는 Object.freeze() 메소드는 동결된 객체를 반환하지만 재할당을 허용한다.
따라서 let으로 선언된 객체는 Object.freeze를 사용하더라도 재할당 할 수 있다.
❗JavaScript의 불변객체를 만드는 방법
-
위에서 제시했듯이 재할당이 불가능한 const와 객체를 동결하는 Object.freeze()를 사용하면 코드의 불변성을 지킬 수 있다.
-
또는 객체의 불변을 도와주는 라이브러리가 존재하기에(immutable.js, baobao.js) 라이브러리를 통하여 불변객체를 만드는 것이 더 안정적이라고 말 할 수 있다.
