잠깐!
해당 글은 정재남 님의 '코어자바스크립트' 책을 읽고 공부한 포스팅입니다.
따라서, 챕터의 내용은 상당히 생략되어 있으며, 느낀점과 기억해야 할 것들을 주관을 가득 담아 작성했습니다.
노트가 아닌 관계로 포스팅의 영양가는 거의 없으니, 감안하고 봐주셨으면 좋겠습니다.
Javascript의 데이터 저장
많은 프로그래밍 언어를 배운 것은 아니지만, 진로를 정하기 어려워 일단 배워보려고 약간의 시도는 했었습니다.
Java, C++, Javascript, python, etc... 강의나 책에서 시작으로 꺼내오는 내용은 주로 해당 언어 내에서의 데이터 저장에 대한 이해가 아닐까 싶습니다.
해당 서적도 마찬가지로, Javascript에서 데이터를 어떻게 다루는지부터 시작합니다.
지금은 마냥 새롭다는 느낌만 받고 있는데, 언젠가는 저도 해당 내용에 대한 깊이가 달라질 수 있기를 기원하며 글을 시작해보겠습니다.
먼저, 해당 글의 용어 정리부터 한 번 하고 들어가겠습니다.
- 이름 = 식별자
- 값 = 말 그대로 값입니다. 원시자료형일 수 있고, 혹은 메모리 주소일 수 있습니다.
- 변수 = 이름(식별자)과 값을 가지는 광범위한 개념으로 이해해주시면 됩니다.
- 객체 = 모든 것. 혹은 Object 둘 중 하나로 문맥상 이해해주세요.
변수 선언 방식과 메모리
제가 Javascript에서 주로 사용하는 변수의 선언 타입은 let, const 입니다.
이는 전에 정리했던 변수에 대한 내용에 의해 굳어진 습관인데, 호이스팅이나 TDZ에 대해서는 책의 후반부에서 나올 것 같으니 여기서 생각하지는 않겠습니다.
해당 파트에서는 const 는 변수 영역 내에 값을 저장하고, let과 var의 경우 데이터 영역을 참조하는 방식으로 변수 영역 내에 값을 저장한다. 라는 사실을 알게 되었습니다.
기존에는 왜 let, const 를 사용해야 하는가? 에 대한 글을 뒤적거렸다면, 이제는 근본적인 차이부터 시작하는 학습이라 마냥 좋은 것 같습니다.
아무래도 기본이 가장 중요하다는 생각으로 살아왔는데, 해당 책 또한 그래서 코드의 시작인 선언부터 확실히 넘어가는 것 같습니다.
| 선언 방식 | const | let | var |
|---|---|---|---|
| 메모리의 변수 영역 내 값의 저장 방식 | 값 | 주소 | 주소 |
위 표만 보면 애매할 수 있으니, 책을 읽어보시는걸 추천합니다.
따라서 const의 경우 데이터 영역을 활용하는 방식이 아니기 때문에 값의 재할당이나 수정은 불가능합니다.
그렇다면 데이터 영역을 활용하는 이유는 무엇일까요
데이터 영역
불변성
데이터 영역은 값의 불변성을 지키기 위한 하나의 방식인 것 같습니다.
예를 들어, let a = '김동우;' 와 a = '김동우' + '바보;' 는 같은 변수 a에 할당되지만 서로 전혀 다른 데이터입니다.
이 때, 유사한 데이터라고 해서 컴퓨터가 알아채고 기존 메모리 공간을 일부 확장시켜 덜 낭비한다면 좋겠지만, 그것은 불가능한 일입니다.
그렇기에 해당 과정을 살펴보면
let a = '김동우';
// 변수 영역(주소 - ex:@1002)에 이름 : a, 값 : @5003 으로 저장
// 데이터 영역(주소 - ex: @5003)에 '김동우' 저장
a = a + '바보';
// 변수 영역 @1002 이름 : a 확인 -> 값 : @5003 확인 -> 데이터 영역 @5003 참조
// -> '김동우' 확인 -> 우항 a 값에 '김동우' 할당 -> '바보'와 합연산
// -> 생성된 데이터 '김동우바보' 기존 데이터 영역 내에 없음 확인
// -> 새로운 데이터 영역에 저장 (ex: @5004)
// -> 변수 영역 내 a 값 : @5004 로 변경.
// -> 이후 '김동우' 데이터 사용 여부 없음
// -> Garbage Collector가 데이터 영역 내 '김동우' 삭제의 과정을 거치게 됩니다.
참으로 많은 일이 코드 한 줄에 담겨있지 않습니까?
저는 조금 놀랐던 것 같습니다.
데이터의 불변성을 지키기 위해 해당 프로세스를 거치는 언어라니, 정말 신기합니다.
또한, 데이터 영역 내에 '김동우'와 '김동우바보' 데이터를 분리해서 저장했기 때문에 두 데이터가 메모리 공간을 얼마나 차지하든 기존 공간의 확장을 논할 필요 없습니다.
거기다 메모리 낭비를 줄이는 방법 중 하나인 Garbage Collection 이라는 방식 덕분에 사용하지 않는 데이터 영역 내 데이터들은 청소됩니다.
한 행의 코드가 컴퓨터에게 시키는 일이 이렇게나 많다는 점도 새삼 대단합니다.
이후 나오는 것은 가변값인데, 이는 조금 복잡하니 길게 설명하지는 않겠습니다.
가변값
우리가 흔히 사용하던 Object는 데이터 영역 말고도 다른 영역을 하나 더 사용합니다.
그리고 변수 영역의 값에 데이터 영역의 주소를 할당하는데, 이 때 데이터 영역 주소 또한 프로퍼티 영역이라는 새로운 주소를 값으로 할당받습니다.
즉,
Object
let obj = {
a : 123,
b : 'hello'
};
| 주소 | @1004 | @5005 | @7108 | @7109 | @5031 | @5032 |
|---|---|---|---|---|---|---|
| 이름 : obj 값: @5005 | 값 : @7108 ~ ? | 이름 : a 값 : @5031 | 이름 : b 값 : @5032 | 123 | 'hello' |
와 같이 메모리를 사용합니다.
이를 다시 나누어보면,
- 변수 영역
| 주소 | ... | @1004 | ... |
|---|---|---|---|
| 이름 | obj | ||
| 값 | @5005 |
- 데이터 영역
| 주소 | ... | @5005 | ... | @5031 | @5032 |
|---|---|---|---|---|---|
| 값 | @7108 ~ ? | 123 | 'hello' |
- 프로퍼티 영역
| 주소 | ... | @7108 | @7109 | ... |
|---|---|---|---|---|
| 이름 | a | b | ||
| 값 | @5031 | @5032 |
로 나누어서 생각할 수 있습니다.
중요한 점은 데이터의 값이 위치한 영역은 불변값을 저장하는 데이터 영역이고, 프로퍼티 영역 내의 프로퍼티(변수)들은 임의의 불변값을 마음대로 할당하거나, 이름을 바꾸는 데 있어 제한이 없기 때문에 가변값이 된다는 점입니다.
그리고 해당 구조로 데이터를 보관할 때, 참조를 중첩하기 때문에 중첩 객체라고 칭하고 있습니다.
정리해보자면,
- 불변값인 Primitive type의 자료들은 데이터 영역에 위치한다.
- 프로퍼티 영역 내 변수의 값으로는 무엇이든 올 수 있다.
- 혹은 프로터피 영역 내 변수의 값이 참조하는 모든 주소를 거치면 데이터 영역에 위치한 데이터가 나온다.
3번의 경우 객체 내 배열이 존재할 때, 혹은 그보다 더 복잡한 구조체일 때 끝에는 결국 데이터 영역에 존재하는 불변값이라는 뜻이기도 합니다.
뭔가 장황하네요...
결국 끝에 가면 모든 객체 내부 변수, 프로퍼티들의 값은 데이터 영역에 위치한다고 볼 수 있겠습니다.
배열의 경우에도 마찬가지로 데이터 영역에 위치하는 값을 참조합니다.
다만 인덱스라는 이름(식별자)으로 해당 값의 주소를 참조하는 영역의 주소를 빨리 알아내는 방식이 아닌가 짐작하고 있습니다. 아직은 배열 파트가 아니니까요.
배열도 결국은 이름: index , 값 : @주소 의 형태로 데이터를 저장합니다.
장황하지만 어려운 개념이 아니기에 이 또한 책을 한 번 보시는걸 추천드리겠습니다.
마치며
뭔가 이런 저런 얘기들이 참 많았던 것 같습니다.
이번 글은 사실상 시리즈의 첫 걸음마를 떼는 글인데, 앞으로도 이런 방식으로 이어서 나가지 않을까 생각합니다.
글 사이에 계속 느낀점을 써보려고 했는데, 마냥 신기하다는 말이 잦아서 최대한 추려내게 되었습니다.
배우는 것은 언제나 신기하고, 즐거운 일이니까요.
스포일러를 좀 써놓자면, 다음 포스팅은 '복사'에 대한 내용일겁니다.
복사는 제가 기존에 궁금했던 내용도 있고, 코드 예시가 많아 조금 더 정리해보고 올릴 수 있도록 하겠습니다.
예를 들면, 객체 자료 내부 배열에 대한 forEach(), map()이 예시로 등장할 확률이 큽니다.
기존에 정리했던 자료를 잘 취합한 다음, 글로 찾아뵙겠습니다.
부족한 글 읽어주셔서 감사합니다.
