JS 변수 선언 및 데이터 할당과정 살펴보기
이전에
const와let, 원시형과 참조형에 대해서 간단히 다루었는데, 이번에는 메모리에서 어떻게 이루어지는지 다루면서 참조형 객체에 대해 조금 더 살펴보았다. 강의의 내용을 내 식대로 풀어서 살을 붙이며 설명하다보니 어쩔 수 없이 아주 긴 호흡의 글이 되었다.
일반적인 변수 할당 과정
우리가 변수를 선언해서, 데이터를 저장할 때 let a = 0; 처럼 사용한다. 이때, a 와 0 은 메모리 공간에서 서로 다른 곳에 저장된다.
| 주소 (변수명) | … | 1001 | 1002 | 1003 | … |
|---|---|---|---|---|---|
| 데이터 | a/@5001 | ||||
| 주소 (데이터) | … | 5001 | 5002 | 5003 | … |
| 데이터 | 0 |
위 과정을 이용해, 변수와 상수라는 용어를 비교할 수 있다.
변수 vs 상수
js 에서는 const 가 상수, let 이 변수를 선언하는 방법이라고 할 수 있다.
위 예시에서, a 는 let 으로 선언했다.
따라서, a = 1; 처럼 데이터를 변경하려는 경우에도 문제가 없다.
| 주소 (변수명) | … | 1001 | 1002 | 1003 | … |
|---|---|---|---|---|---|
| 데이터 | a/@5002 | ||||
| 주소 (데이터) | … | 5001 | 5002 | 5003 | … |
| 데이터 | 0 | 1 |
이렇게 바뀔 것이기 때문이다.
참고로, 5001 영역의 값
0이 더 이상 사용되지 않는다면 가비지컬렉터에 의해 제거된다. (가비지 컬렉터가 변수들의 참조 카운트를 확인해 0 일 때는 회수한다고 한다.)
하지만, const a = 0; 처럼 상수로 선언했을 때는 @5001 에서 5002로 변경할 수가 없다.
물론, 참조형 변수는 이와 달리 stack 영역의 값은 변하지 않고 heap 영역에서 변수의 주소를 가지고 있기에 const 로 정의해도 데이터를 바꿀 수 있다. -> 이는 아래에서 자세히 다루어 보자.
불변(immutable) vs 가변(mutable)
1. 불변(immutable)
원시형 데이터와, 참조형 데이터의 차이는 불변하냐 가변하냐의 차이라고 했다.
아래 예시를 살펴보자.
let a = 0; 으로 선언한 뒤, a = 1; 로 값을 변경한 위의 예시를 가져왔다.
| 주소 (변수명) | … | 1001 | 1002 | 1003 | … |
|---|---|---|---|---|---|
| 데이터 | a/@5002 | ||||
| 주소 (데이터) | … | 5001 | 5002 | 5003 | … |
| 데이터 | 0 | 1 |
여기에서, 5001 은 변하지 않고 나중에 가비지 컬렉터에 의해 회수가 된다고 했다.
이런 것을 보고 불변(immutable) 하다고 말하는 것이다.
2. 가변(mutable)
const obj = {a: 0, b: "abc"} 로 정의하면 아래와 같이 저장될 것이다.
| 주소 (변수명) | … | 1001 | 1002 | 1003 | … |
|---|---|---|---|---|---|
| 데이터 | obj/@7001 | ||||
| 주소 (데이터) | … | 5001 | 5002 | 5003 | … |
| 데이터 | 0 | “abc” | |||
| 주소 | … | 7001 | 1002 | 1003 | … |
| 데이터 | a/@5001 | b/@5002 |
이때, obj.a = 1 을 입력해도 문제가 생기지 않는다.
그 과정을 살펴보자.
| 주소 (변수명) | … | 1001 | 1002 | 1003 | … |
|---|---|---|---|---|---|
| 데이터 | obj/@7001 | ||||
| 주소 (데이터) | … | 5001 | 5002 | 5003 | … |
| 데이터 | 0 | “abc” | 1 | ||
| 주소 (참조형) | … | 7001 | 1002 | 1003 | … |
| 데이터 | a/@5003 | b/@5002 |
이렇게 바뀌게 되고, obj 가 가지고 있는 주소 값은 변하지 않았다.
근데, 주소 7001 이 가지고 있는 값은 변했다.
이 차이점을 이해한다면, 원시형 객체는 왜 불변하다고 하는지 참조형 객체는 왜 가변한 것인지 이해하는데 도움이 될 수 있을 것이다.
이번 포스팅에서는, 불변과 가변에 대해서 구분해보는 시간을 가졌다. 다음 포스팅은, 얕은 복사와 깊은 복사에 대해서 다루어보기로 하자.