[JS] 자바스크립트가 데이터를 할당하는 방법 (feat. 불변성, 가변성)

 

도서 코어 자바스크립트를 내용 일부를 정리한 글입니다.

 

자바스크립트의 데이터 할당 과정과 변수의 불변성과 가변성에 대하여

 

---

 

자바스크립트의 타입

자바스크립트의 데이터 타입은 크게 원시값과 객체, 이렇게 두 종류로 나눌수 있습니다.

 

원시 값(Primitive values)

다음과과 같은 종류가 있으며, 불변성을 가집니다.

 

• Number 
• String 
• Boolean 
• Symbol 
• Null
• Undefined 
• BigInt

 

객체(Object)

참조형이라고도 하며, Object 하위 여러 타입이 속합니다. 가변성을 가집니다.

 

• Array
• Function
• RegExp
• Map
• Set
• WeakMap
• WeakSet

 

여기서 말하는 불변성과 가변성이 뭘까요? 아래에서 살펴보겠습니다.

 

---

 

원시 값(Primitive values)의 데이터 할당

예로 name이라는 변수를 선언하고, 'Rimo'라는 문자열을 할당하는 과정을 살펴보겠습니다. 코드를 보면 다음과 같습니다.

let name;
name = 'Rimo';

 

실제 메모리에 어떻게 저장하고 있을까요? 가상의 메모리를 예로 과정을 설명해 보겠습니다. 🤔

*let name = 'Rimo' 처럼 한 줄로 작성해도 내부 과정은 동일합니다!

 

 

 

1. 변수 공간 확보

let name가 실행되면 컴퓨터는 메모리에 데이터를 담을 공간 하나를 확보합니다.

임의로 아래 표에서 @1003번 공간을 확보했다고 해보겠습니다. 

그리고 이 공간의 이름(식별자)를 name이라고 지정합니다. 여기까지가 변수 선언 과정입니다.

이후 사용자 a에 접근하고자 하면 자바스크립트 엔진은 메모리에 name이라는 이름을 가진 주소를 검색해  해당 공간에 담긴 데이터를 반환하게 됩니다. 현재는 값이 할당되지 않았기에 undefined이 반환되겠네요. 

 

 

2. 데이터 저장

자바스크립트 엔진은 'Rimo'라는 문자열을 바로 변수의 값 공간에 저장하지 않습니다. 

 

설명에 앞서 편의를 위해 변수를 저장하는 변수공간과 데이터를 저장하는 데이터 공간으로 메모리를 나누어 보겠습니다.

엔진은 먼저 데이터 영역에 'Rimo'라는 문자열이 저장되어있는지 확인합니다.

 

그리고 'Rimo' 문자열이 없다면, 빈 데이터 영역에 값을 저장합니다. 여기서는 @5004번 공간에 저장했다고 가정해 보겠습니다.

 

3. 식별자 검색

자바스크립트 엔진이 name이라는 이름을 가진 변수 영역에 'Rimo'라는 값을 할당하기 위해,

변수영역에서 name이라는 이름을 가진 변수 영역을 검색합니다. 

 

 

4. 값 할당

앞서 저장한 문자열의 주소 (@5004)를 name이라는 이름을 가진 변수 영역(@1003)에 값으로 대입합니다.

 

 

할당된 데이터를 변경할 경우

name에 'Rimo'가 아니라 다른 문자열을 저장한다면 어떻게 될까요? 

name = 'abc';

 

이번에는 name의 변수공간을 별도로 확보하지 않습니다.

즉, 식별자 name에 할당된 데이터 공간 @1003는 변하지 않습니다.

 

자바스크립트 엔진은 데이터 영역에서 'abc'가 저장되어있는지 확인합니다. 없다면 추가합니다.

여기서는 @5005에 저장을 했다고 가정해 보겠습니다.

 

 

 

그리고 값에 저장된 참조가 변경됩니다. 예시에서는 @5004 → @5005가 되겠네요.

 

 

조금 길었지만 핵심은 자바스크립트는 변수 영역에 데이터를 바로 저장하지 않고,
데이터를 데이터 영역에 별도로 저장한뒤 변수 영역에 데이터 영역의 주소를 저장한다는 점 입니다. 💡

 

이때 말하는 불변성이란 데이터 영역의 데이터는 변하지 않는다는 뜻입니다.

변수에 새로운 값을 할당하면, 새롭게 데이터 영역에 값을 추가하고 이 주소를 할당하게 된다는 것이지

이전 데이터 영역의 내용이 변경되는 것이 아니라는거죠.

 

 

 

이런 방식은 데이터 변환을 자유롭게 할 수 있게 함과 동시에  메모리를 더욱 효율적으로 관리할 수 있도록 도와줍니다. ✌️

 

예를 들어 변수 100개에 숫자 5를 저장한다고 해볼까요. 

변수에  데이터까지 저장한다면 같은 숫자 5를 100번 저장해야 할 겁니다. 

하지만 위처럼 주소를 저장하게 되면 하나의 데이터 공간에 5를 저장해두고 참조하게 하면 되겠죠.

 

물론 5와 같이 숫자라면 충분히 가능하지 않을까 싶지만,

문자열 같이 데이터의 크기가 들쭉날쭉 한 경우라면 변수 공간 확보에 더욱 어려움이 많겠죠?

 

 

---

 

객체(Object)의 데이터 할당

 

이어서 객체의 데이터 할당도 살펴보겠습니다.

let obj = {
  name: 'Rimo',
  age: 24,
}

 

객체 obj를 선언하는 코드 입니다. obj는 프로퍼티로 name과 age를 가집니다.

 

 

1. 변수 공간 확보

변수 영역을 확보하고 이름을 obj로 지정합니다. 여기서는 @1002번 을 확보했다고 가정해보겠습니다.

 

2. 프로퍼티 변수 공간 할당

데이터를 저장하기 위해 @5002번 메모리에 접근했습니다.  이때 데이터가 여러개의 프로퍼티로 이루어져 있는것을 확인합니다.

 

 

각각의 프로퍼티에 대한 변수 영역의 빈공간을 확보해 이름을 name과 age로 지정합니다. 

여기서는 @1003번과 @1004번에 저장했다고 가정해 보겠습니다.

 

3. 데이터 할당

문자열과 숫자 'Rimo'와 24가 저장되어있는지 확인하고, 없다면 새로운 데이터 영역에 저장합니다.

24는 @5004번에 'Rimo'는 @5005번에 저장한다고 가정하겠습니다. 

 

 

따라서 age는 데이터 영역 @5004번를 참조하고, name는 데이터 영역 @5005를 참조하게 됩니다.

 

 

4. 프로퍼티 데이터 할당

프로퍼티의 변수 영역 주소들을 데이터 영역  @5002번에 저장합니다.

 

 

5. 변수 데이터 할당

obj 변수영역에 프로퍼티 주소가 저장된 데이터 영역 @5001번을 저장합니다.

 

 

프로퍼티에 할당된 데이터를 변경할 경우

age 프로퍼티의 값을 바꾸는 코드를 추가해 보았습니다. 동일하게 내부 동작을 살펴보겠습니다.

let obj = {
  name: 'Rimo',
  age: 24,
}

obj.age = 20

 

 

먼저 자바스크립트 엔진은 데이터 영역에서 숫자 20이 저장되어있는지 확인합니다. 없다면 새롭게 저장합니다.

여기서는 @5003번에 저장해보도록 하겠습니다.

 

 

그리고 age를 이름으로 가진 프로퍼티 변수영역에 주소를 저장합니다.

 

객체와 원시값의 차이는 '프로퍼티의 변수 영역'이 별도로 존재한다는 점입니다.

 

데이터 영역에 저장된 값은 모두 불변값입니다.

그러나 변수영역에는 다른 값을 얼마든지 대입할 수 있습니다. 이 때문에 객체의 가변성이 나타나게 됩니다.

 

위 예시에서 변수 obj이 바라보고 있는 주소는 @5002번으로 변하지 않았습니다.

그럼에도 age 프로퍼티의 값은 20으로 바뀌었죠.

해당 과정에서 '새로운 객체'가 만들어진 것이 아닌, 기존의 객체 내부의 값만 바뀐 것이기 때문에 가변성을 가진다고 하는 겁니다.

 

 

 

정리

자바스크립트의 데이터 타입은 원시값과 객체가 있으며, 이들은 내부적으로 데이터를 할당하는 과정에 차이가 있습니다.

 

원시값은 불변성을 가집니다.

불변성은 변수나 데이터가 한 번 설정되었다면 그 값이 변경되지 않는것을 뜻합니다. 값을 변경하려면 새로운 값을 만들어야 합니다.

 

객체는 가변성을 가질 수 있습니다. 가변성은 변수나 데이터의 값이 변경될 수 있는 것을 뜻합니다. 변수나 데이터를 변경할 때 해당 변수나 데이터가 가리키는 메모리 위치의 내용이 변경됩니다. ⭐

 

 

 

감사합니다.

 

---

 

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.