본 내용은 10분 테코톡 인치님의 강의를 토대로 작성하였습니다.
1. 불변성이란?
- 변하지 아니하는 성질
- 함수형 프로그래밍에서 중요하게 여겨지는 개념
2. 자바스크립트에서의 불변성
- 자바스크립트에서 원시타입은 불변하고, 참조타입은 가변적이다.
- 자바스크립트에서 메모리상 데이터값은 불변하다.
- 원시타입: Number, String, Boolean, Null, Undefined, Symbol
- 참조타입: Array, Object, Function, Date, RegExp …
Low Level에서의 불변성 1
- 변수에 값을 할당할 떄
- 빈 변수 영역에 변수를 할당
- 빈 데이터 영역에 값을 할당
- 데이터가 저장된 주소를 변수의 영역에 저장
- 변수의 값을 검색할 때
- 변수 영역에 저장되어 있는 데이터 주소 값으로 이동
- 변수에 새 값을 할당할 때
- 덮어씌워지는 것이 아님
- 새로운 빈 데이터 영역에 새 값을 저장
- 새 데이터가 저장된 주소를 변수 영역에 저장
// 변수 a에 1을 할당
// 1. 빈 변수 영역에 a를 할당
// 2. 빈 데이터 영역에 1을 할당
// 3. 1이 저장된 주소를 a의 영역에 저장
let a = 1;
// 변수 a에 새 값 2를 할당
// 1. 새로운 빈 데이터 영역에 2를 저장
// 2. 2가 저장된 주소를 변수 영역에 저장
a = 2;
console.log(a); // 2
Low Level에서의 불변성 2
let a = 1;
// 변수 b에 a를 할당
// 변수 a가 가리키고 있는 데이터 1의 주소값을 저장
let b = a;
// 변수 a에 데이터 2의 주소 값을 저장
a = 2;
console.log(a); // 2
console.log(b); // 1 변수 b는 데이터 1의 주소값을 여전히 가리키고 있다.
3. 자바스크립트에서의 참조 타입 가변성
객체의 예
const obj = { a: 1, b: 2};
- 빈 변수 영역에 obj를 저장
- 변수 obj는 여러 속성들로 이루어진 데이터 임을 확인
- 여러 속성들을 위한 별도의 변수 영역을 새롭게 할당
- 새로 할당한 변수 영역에 대한 주소 범위를 데이터 영역에 저장
- 변수 obj에는 주소 범위가 기록된 데이터에 대한 주소가 저장
- 객체 obj의 속성 변수 'a'와 'b'를 변수 영역에 할당
- 변수 'a'와 'b'에 데이터 '1'과 '2'의 주소값을 저장
정리
- 변수 영역에는 다른 어떤 값이든지 대입할 수 있다.
- 참조 타입이 가변적이다.
- 자바스크립트에서 참조타입은 가변적이다.
- 참조타입내 데이터 영역의 값들은 불변하지만, 변수 영역의 값들은 가변적이다.
4. 불변성을 유지하는 이점
- 예측 가능성(predictable)
- 데이터 영역이 값이 가변된다면, 사이드 이펙트를 일으켜 버그를 유발
- 성능 효율성(efficiency)
- 메모리 영역 성능
- 상태 변경 추적 성능
5. 변수의 불변
const
- 변수를 상수처럼 작동하게 함
- 재할당, 재선언 불가
- 참조 타입의 경우 객체 속성의 값을 변경할 수 있음
Object 메소드
- Object.freeze()
- 객체 동결
- 추가, 제거, 변경 불가
- 일반 모드의 경우 변경이 불가해도 오류를 발생 시키지는 않음
- 엄격 모드에서는 에러 발생
- Object.seal()
- 속성 수정만 가능
- Object.preventExtensions()
- 속성 수정 가능
- 속성 삭제 가능
- 얕은 동결(swallow freeze)
- 객체 내 객체 변경 방지를 해주지는 못함
- 호출된 객체의 직속 속성에만 적용
- 깊은 동결(deep freeze)
- 재귀적으로 Object.freeze하는 방식
- 객체 깊이가 깊을 수록 성능저하
immutable.js
- 객체 속성에 추가, 변경, 삭제, 복사와 같은 행위를 하면 해당 객체 내용이 변경되는 것이 아니라 변경된 복사본이 생성되고 반환
- 기존 객체는 바뀌지 않음
- 원본 객체 불변성
6. 요약
- JavaScript의 불변성은 메모리상 데이터 영역의 불변성을 의미
- 불변성은 예측 가능성, 성능 효율성에 좋음
- 변수도 불변성 유지할 수 있음
Reference
'programming study > JavaScript' 카테고리의 다른 글
Generator & Iterator (1) - Iteration Interface (0) | 2021.10.10 |
---|---|
ES Modules (0) | 2021.09.28 |
타입스크립트 입문 - 인터페이스 (0) | 2021.09.14 |
[프로그래머스] 방문 길이 - JavaScript 풀이 (0) | 2021.07.21 |
프론트엔드의 비동기 (0) | 2021.07.11 |