불변성

본 내용은 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. 요약

1. JavaScript의 불변성은 메모리상 데이터 영역의 불변성을 의미
2. 불변성은 예측 가능성, 성능 효율성에 좋음
3. 변수도 불변성 유지할 수 있음

 

Reference

[10분 테코톡] 인치의 불변성