자바스크립트는 데이터를 어떻게 저장할까?

0. 가변값과 불변값 성질, 변수와 상수

⭐️자바스크립트 데이터 타입중 기본형은 모두 불변값 성질을 만족한다.

이 문장을 이해하기 전에 가변값 = 변수, 불변값 = 상수라는 개념으로 오해하면 안된다는게 가장 중요하다.

자바스크립트의 기본형에는 number, string, bool.. 등등이 있다.

그러면 이것들이 불변값이라는건 무슨 소리일까?

코드를 자바스크립트가 해석하고 메모리에 저장하는 과정을 보면 단번에 이해할 수 있다!

---

1. 불변값 이해해보기

자바스크립트는 데이터 영역 메모리와 변수영역 메모리를 따로 관리한다.

따라서 다음과 같은 코드를 실행하면 메모리에서는 다음과 같은 형상이 일어난다.

var a = 'abc'

 

당연히 식별자와 값이 한번에 저장될 줄 알았지만 아니였다

데이터만 들어있는 영역을 따로 만들어 그 주소를 값으로 참조시킨다.

순서을 알아보자면 다음과 같다

1. 변수영역 메모리에 식별자가 a인 메모리 공간을 확보
2. 데이터영역 메모리에 'abc'라는 데이터가 있는지 확인
3. 'abc' 라는 데이터가 없기 때문에 데이터영역 메모리에 'abc'저장
4. 변수 영역에서 a라는 식별자 검색 후 식별자에 대한 값에 문자열의 주소(@5004) 대입

여기서 중요한건 2번 'abc'라는 데이터가 있는지 확인하는 거다.

그렇다면 여기에 var b = 'abc'라는 코드를 추가하면 어떻게 될까?

이미 원하는 데이터가 있기 때문에 'abc'가 담긴 상자를 가르킨다.

때문에 변수 영역 메모리와 데이터 영역 메모리를 분리하면 중복된 데이터에 대한 처리 효율이 높아진다고 볼 수 있다.

그러면 이제 본격적으로 불변성에 대해 알아보자.

var a = 'abc';
a = a + 'def';

console.log(a);

다음의 출력값은 'abcdef'다.

그렇다면 위에 데이터 영역 메모리에서의 'abc'가 'abcdef'로 바뀐것일까?

아니다!

자바스크립트는 무조건 없는 데이터가 있다면 새로 만들어 별도의 메모리 공간에 저장한다.

따라서 메모리를 다음 코드의 메모리를 보면 다음과 같다.

문자열만이 아니라 기본형 타입들은 모두 다음과 같은 원리로 작동한다.

⭐️이러첨 한 번 만든 값은 바꿀 수 없고, 오직 새로 만드는 동작을 통해서만 변경 되기 때문에 불변값의 성질을 가지고 있다고 하는것이다.⭐️

여기서 알아야 할건 변수와 상수를 구분 짓는건 변수 영역 메모리이고
가변성 불변성을 구분 짓는건 데이터 영역 메모리 라는 햇갈리기 쉬운 엄청난 사실이다

---

2. 가변값 이해해 보기

모든 기본형 타입이 불변성이라면 모든 참조형 타입은 가변성일까?

기본적으로는 가변값이지만, 설정에 따라 불변값으로 활용 할 수도 있다.

불변값으로 활용하는 건 나중에 알아보고 가변값에 대해 알아보자.

참조형 데이터인 객체가 저장될때는 다음과 같은 형태로 메모리에 저장된다.

var obj1 = {
	a: 1,
    b: 'bbb',
};

 

기본형 데이터와 차이는 객체 변수 영역이 별도로 존재한다는 점이다.

다음 코드를 보자

var obj1 = {
	a: 1,
    b: 'abc',
};

obj1.a = 2;

코드에 대한 메모리의 변화는 다음과 같다.

가변값과 불변값을 구분하는 부분은 데이터 영역이라는걸 안다.

객체의 값이 변해도 데이터 영역 메모리는 기존의 메모리 공간(@7103 ~ ?)을 그대로 활용하고 있다.

기존의 메모리 공간을 그대로 활용하면서도 그 안의 변수에 다른 값들을 얼마든지 대입할 수 있다.

때문에 참조형 데이터는 가변값이라고 하는것이다.

---

참고자료: [도서] 코어 자바스크립트