Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 웅진씽크빅
- 개발자부트캠프
- 해시
- #프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
- Algorithm
- 스레드
- 네트워크
- javascript
- 타입스크립트
- 자바스크립트
- CS
- 메모리
- IT개발캠프
- ip
- 프로세스
- App Runner
- html
- 스나이퍼팩토리
- BFS
- react-query
- react
- typescript
- 리액트
- 알고리즘
- 인사이드아웃
- cs #네트워크
- 프로그래머스
- 유데미
- 프로젝트캠프
- React.js
Archives
- Today
- Total
Bin's Blog
불변값과 가변값 본문
728x90
1. 불변값
- 변수(참조형)와 상수(기본형)를 구분하는 성질은 변경 가능성이다. 바꿀 수 있으면 변수, 바꿀 수 없으면 상수이다.
- 변수는 변경 가능한 데이터를 달길 수 있는 공간이고, 식별자는 그 변수의 이름이다.
- 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다. 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 중요하다.
- 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.
- 기본형 데이터는 숫자, 문자열, boolean, undfined, Symbol은 모두 불변값이다.
let a = "abc";
a = a + "def";
- 변수 a에 문자열 "abc"를 할당했다가 뒤에 "def"를 추가하면 기존의 "abc"가 "abcdef"로 바뀌는 것이 아니라 새로운 문자열 "abcdef"를 만들어 그 주소를 변수 a에 저장한다. 즉 "abc" 와 "abcdef"는 완전히 별개의 데이터이다.
- a라는 주소에 "abc"라는 데이터 공간을 하나 만들어서 저장하고 "abcdef"라는 데이터 공간을 새로 만들어 저장하고 a라는 주소가 이미 존재하니 그 주소를 재활용한다.
- 이처럼 문자열, 숫자 값도 다른 값으로 변경할 수 없다. 변경은 새로 만드는 동작을 통해서만 이뤄진다.
- 한 번 만들어진 값은 가비지 컬렉팅(garbage collecting) 당하지 않는 한 영원히 변하지 않는다.
- 가비지 컬렉팅은 쉽게 말해 위에서 a라는 주소는 처음에 "abc"라는 데이터를 가지고 있었는데 추후에 새로운 "abcdef"라는 데이터를 가지게 되면서 자신의 주소를 저장하던 변수가 사라지게 되면서 쉽게 말해 쓸모가 없어져 분리수거 대상이 되는 것이다.
2. 가변값
- 기본형 데이터와 차이는 객체의 변수(프로퍼티) 영역이 별도로 존재한다.
let obj1 = {
a: 1,
b: 2
};
obj1.b = 3;
- 여기서 프로퍼티 영역이 별도로 존재한다는 의미는 obj1이 큰 울타리이고 그 울타리 안에 여러 양들이 있는 것이다. 여러 양들은 객체의 변수(프로퍼티)이다.
- 객체가 별도로 할애한 영역은 변수 영역일 뿐 데이터 영역은 기존의 메모리 공간을 활용한다.
- 위에서 객체의 b의 값을 3으로 바꿨다. 이렇게 처리하면 객체가 새롭게 만들어지는 것이 아니라 객체 안에 있는 변수에 새롭게 만든 데이터의 주소만 연결을 해준다.
let obj = {
x: 1,
arr: [1, 2, 3]
};
- 위와 같은 경우에는 참조형 데이터의 프로퍼티에 다시 참조형 데이터를 할당하는 경우 즉 객체의 arr이라는 변수에 배열(참조형 데이터)를 할당하는 경우를 중첩 객체라고 한다.
- 만약 obj.arr = "str"이라는 새로운 문자열을 저장하고 그 주소를 기존에 arr를 가리키던 곳에 저장을 하게 되면 기존의 [1, 2, 3]의 배열은 자신을 참조하는 주소가 사라지게 된다.
- 어떤 데이터에 대해서 자신의 주소를 참조하는 변수의 개수를 참조 카운트라고 한다. 기존의 [1, 2, 3]의 카운트는 1이었다가 새로운 문자열이 저장되면 0이된다.
- 참조카운트가 0인 메모리 주소는 가비지 컬렉터의 수거 대상이 된다.
- 가비지 컬렉터는 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거한다. (쓰레기 통이 가득차서 비워줘야 할 때와 비슷하다고 보면 된다.)
- 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다.(쓰레기통이 비워져서 쓰레기를 다시 넣을 수 있듯이)
3. 기본형 vs 참조형
- 불변값을 대표하는 것은 기본형 데이터이고, 가변값을 대표하는 것은 참조형 데이터라고 했다. 그럼 둘의 공통점은 무엇이며 차이점은 무엇인지 잠깐 짚고 넘어가자!
- 공통점
- 변수를 복사하는 과정에서 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라본다.
- 차이점
- 복사 과정은 동일하지만 데이터 할당 과정에서 이미 차이가 있기 때문에 변수 복사 이후의 동작에도 큰 차이가 발생한다.
- 기본형 데이터는 위에서도 언급 했듯이 값을 변경 했을시에 데이터에 새로운 공간을 만들어서 저장하기 때문에 값을 가리키는 주소가 바뀌게 된다.
- 그러나 참조형 데이터의 경우 객체 안에 있는 변수의 값을 가리키는 주소는 변하지만 객체 자체의 주소는 변경되지 않는다.
- 내가 몰랐던 부분
- 기본형은 값을 복사하고 참조형은 주솟값을 복사한다고 알고 있는데 사실은 어떤 데이터 타입이든 모든 데이터 타입은 참조형 데이터일 수밖에 없다.
- 다만 기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고, 참조형은 한 단계를 더 기치게 된다.
- 참조형 데이터은 객체 내부 프로퍼티를 변경할 때만 가변이라는 단어가 성립된다. 참조형 데이터를 자체를 바꾸면 기본형 데이터와 마찬가지로 해당 값을 가리키는 주소가 바뀐다.
728x90
'JavaScript' 카테고리의 다른 글
undefined와 null (0) | 2023.05.05 |
---|---|
Map() 객체 (0) | 2023.05.04 |
불변 객체 (0) | 2023.05.03 |
JavaScript Array.map() 함수 (0) | 2023.05.02 |
데이터 타입이란? (0) | 2023.04.25 |