2번의 프로젝트를 하는 동안 정말 JavaScript 기본 개념이 많이 약하다는걸 느꼈다.

하지만 JavaScript는 wecode 첫 달 과정인 레플릿+인강 몇개 만으로는 절대 정리할 수 없는 녀석이다.

그래서 남은 한달의 시간 동안 코어 자바스크립트 라는 책으로 JavaScript에서도 특히 어려웠던 클로저, this 개념등에 대해 공부하기로 했다.

그 중 1강은 가장 중요하고 가장 기본적인 JavaScript의 데이터 타입!!!

사실 데이터 타입에 대해 정리하긴 했지만, 이 책을 읽고나니 저번에 정리했던 내용은 완전 빙산의 일각이란걸 알게 되었다......

그럼 시작쓰!!!!!!!!

---

🌷코어 자바스크립트 뽀개기 시리즈🌷

• 데이터 타입 (상)
• 데이터 타입 (하)

---

   1. 데이터 타입의 종류   

저번에도 정리했지만, 한번 더 정리하고 넘어가자!

JavaScript의 데이터 타입은 기본형(Primitive Type)과 참조형(Reference Type) 두가지로 구분된다.

참조형 데이터를 그냥 Object라고 부르기도 한다. (object 하나밖에 없으니까!)

우리가 흔히 아는 Array, Function과 그 외에 Date, RegExp(정규표현식), Map, weakMap, Set, WeakSet이 모두 Object에 해당한다.

  Map, Set?  
ES6에 새로 추가된 친구들!! Map은 object { } 와 유사하고 Set은 array [ ] 와 유사하다.
자세한건 다음에 Map,Set만 다시 정리할 예정!

흔히, 다른 책이나 인강에서는 기본형은 데이터의 값을 그대로 할당하고, 참조형은 데이터의 값을 참조하고있는 주소를 할당한다는 식으로 설명하는데 이 책에서는 기본형, 참조형 모두 값이 담긴 주솟값을 할당한다고 설명한다.

더 정확히는 기본형은 값이 담긴 주솟값을 바로 할당하고, 참조형은 값이 담긴 주솟값으로 이루어진 묶음을 가리키는 주솟값을 할당한다고 설명한다.

처음엔 이게 대체 뭔말인가 싶었는데.... 책을 공부하고 나서 다시 읽어보니 정말 이 말대로였다!

---

   2. 메모리와 데이터   

:: 패트와 매트 비트와 바이트

기본형 데이터 타입은 불변성(Immutability)을 띈다.

는 것은 우리 모두가 아는 사실이다. 왜? 수많은 JavaScript 튜토리얼과 책에서 이렇게 설명하니까....ㅋㅋㅋㅋㅋ

전공생 분들은 얘 뭐야?ㅋ 하시겠지만, 비전공자 입장에서는 진짜 외계어 그 자체다ㅠㅠ
불변성이라는 말은 정확히 무슨 뜻이고, 어째서 기본형은 변경이 불가능하다는 것일까?

왜냐하면, let a = 10; 이렇게 a 라는 변수를 선언하고, 10 이라는 값을 할당했다가도
필요하다면 a = 20; 으로 자유롭게 값을 재할당 할 수 있는데? 이건 불변성에 어긋나는게 아닐까?

라는 생각... 비전공자라면 한번쯤은 해보셨지요...? 저만 멍청이인거 아니죠ㅠㅠ?

이 불변성이라는 개념에 대해 이해하려면 먼저 메모리와 데이터에 대한 이해가 필요하다!!

컴퓨터는 모든 데이터를 0 또는 1로 바꿔서 기억한다.

이때 이 0 또는 1 로 표현되는 하나의 메모리 조각을 비트(bit) 라고 부른다.

각각의 비트들은 고유한 식별자(unique identifier)를 가지게 되는데, 이 식별자를 통해 비트의 위치를 확인할 수 있다. 이를 메모리 주솟값(memory address) 라고 부른다.

그런데, 비트 하나하나 단위로 위치를 확인하고 연산을 수행하면 몇백 몇천번, 그 이상을 확인해야 할 수도 있고, 굉장히 비효율적이고 검색 시간도 오래 걸린다.

그래서 비트를 한 단위로 묶어야 할 필요성이 생겼는데, 그렇다고 엄청나게 많은 비트를 한번에 묶으면 속도는 빠르겠지만 사용하지 않는 비트들까지 한번에 묶여있기 때문에 낭비되는 비트가 생긴다.

그래서 나온 단위가 바로 바이트! (Byte) 8개의 비트를 하나의 바이트로 묶었으며, 가장 앞에 존재하는 비트의 식별자... 즉, 메모리 주솟값을 통해 바이트의 위치를 파악하여 더 빠르고 효율적으로 계산할 수 있다

이에 대해 구글링하다가 재미있는 예시를 발견했는데, 비트를 100원짜리 바이트를 1,000원짜리로 치환해서 생각해보는 것이다.

3,000원 짜리 물건을 사는데 100원짜리 30개로 계산한다면, 100원짜리를 준비해가는 과정부터 30개가 맞는지 세는 과정까지...참 번거롭기 짝이 없다.
이 때, 100원짜리를 10개 단위로 미리 1,000원권으로 바꿔놓고, 1,000원권 3장으로 물건값을 결제하면 금액이 맞는지 계산하는 과정이 훨씬 편리해질 것이다.

또 너무 큰 고액권으로 바꿔놓으면, 예를 들어 5만원권을 준비해간다면?
나머지 거스름돈 47,000원을 계산해야 하기 때문에 이 역시 1,000원권 3장에 비하면 결제 과정이 훨씬 느릴 수 밖에 없다!

오래전에 나온 정적 타입 언어(C, JAVA등)은 각 데이터 타입별로 메모리 영역을 몇바이트, 몇바이트씩 지정해두었지만, 비교적 최근에 나온 JavaScript는 데이터별 메모리 제약에서 상당히 자유롭다.

예를 들어, number 타입의 경우 정수, 소수 구분없이 8바이트로, 메모리가 상당히 낭낭하게 주어진다.

(자바스크립트 사랑해💕)

---

   3. 변수 선언과 데이터 할당   

:: 식별자와 변수

식별자(identifier)는 뭐고 변수(variable) 는 뭘까? 대충 느낌은 알겠는데 설명하라고 하면 입이 안떨어진다.

변수는 말 그대로 변할 수 있는 수이지만, 컴퓨터 용어 에서는 변할 수 있는 데이터를 말한다.
이 책에서는 한단계 더 나아가서, 변수를 변경 가능한 데이터가 담길 수 있는 공간 이라고 설명한다.

그리고 식별자는 어떤 데이터를 식별하는데 사용하는 이름, 즉 변수명을 말한다.

:: 변수 선언

let solmi = 26;

solmi 라는 변수를 선언하고, solmi 에 26 이라는 값을 할당했다! 실제 컴퓨터 내에서는 어떤 일이 일어나게 될까?

프로그래머는 컴퓨터에게 변할 수 있는 데이터를 만들어줘~ 이 데이터의 식별자는 solmi고 값은 26이야~ 라는 명령을 내렸다.

컴퓨터는 우리의 명령을 실행하기 위해 메모리에서 비어있는 공간을 확보하고, 그 공간의 이름을 a라고 지정한다.

26이라는 값은 어떻게 할까? a라는 식별자를 가진 메모리 영역에 값 : 26 이라고 바로 지정할 것 같지만,

실제로는 별도의 메모리 공간을 다시 확보해서 그 공간에 26 을 저장하고, 26이 저장된 메모리의 주소를 이름이 solmi인 변수의 값에 저장한다.

뭔소린지 모르겠으니까 바로 그림 고고=3

책에서는 메모리 영역을 저장되는 데이터의 성질에 따라 변수가 저장되는 변수 영역, 데이터가 저장되는 데이터 영역으로 구분지어서 설명하는데, 이 설명이 이해하기 쉬워서 그대로 사용했다!

정식 명칭이 아니라 코어 자바스크립트 내에서만 사용되는 용어라고 하니 개념만 이해하는 용으로 이해해주세요!

let solmi = 26; 로 변수를 선언하고 값을 할당하면 다음과 같은 순서로 데이터가 저장된다.

1. 변수 영역에 빈 메모리 공간을 확보한다. @1002
2. 확보한 공간에 이름(식별자)를 solmi로 지정한다.
3. 데이터 영역에 빈 메모리 공간을 확보한다. @5003
4. 확보한 공간에 숫자 26을 저장한다.
5. 변수 영역으로 돌아와서 solmi 라는 식별자를 검색한다. @1002
6. 데이터 영역에서 저장했던 26의 주소@5003를 @1002 의 값에 저장한다.

이것이 바로 글 맨 처음에 설명했던, 기본형 데이터 타입도 값을 직접 할당하는게 아닌, 값이 담긴 주솟값을 할당하게 된다는 내용이다.

solmi = 27

이렇게 solmi 라는 변수에 다른 데이터를 재할당하면 어떻게 될까?

앞서 26이라는 데이터를 저장했던 @5003 의 값을 바꾸는게 아니라, 27이라는 데이터를 새로 만들어서 별도의 공간 @5004 에 저장하고, 바뀐 데이터 영역의 주솟값을 solmi 변수의 값에 재할당한다.

예시에서는 데이터 영역에 값을 바로 추가하는걸로 설명했지만, 사실은 solmi = 27 을 했을때 컴퓨터는 데이터 영역을 쭉 확인하면서 27이라는 값이 저장되어 있는지 확인한다.
예를들어 @5035 이라는 위치에 이미 27 이라는 값이 저장되어 있다면?
@5035 에 저장된 27 이라는 데이터를 재사용하여, @1002 는 이름:solmi 값:@5035 가 됐을 것!

컴퓨터는 왜 변수 영역과 데이터 영역을 구분해서 굳이 데이터 영역의 주솟값을 변수영역에 저장하는 걸까?

• 데이터 변환을 자유롭게 하기 위해!

  예를 들어, Hello, Nice you 라는 문자열을 변수영역의 값에 직접 저장했다고 생각해보자.
  그런데 이 문자열을 Hello, Nice to meet you 라고 바꿔야 한다면?
  
  컴퓨터는 모든 데이터를 0 또는 1로 바꿔서 기억하기 때문에, 처음에 Hello, Nice you 라는 데이터를 저장했을때 이를 011001101110101001110101101010101... 이런식으로 저장했을 것!
  근데 중간에 to meet 이 들어가야 하니까...
  011001101110101001110001000111010101101010101...
  이런식으로 중간에 데이터를 추가해야 한다.
  
  글로 보면 별것 아닌것 같지만, 각 비트는 위치를 나타내는 고유한 식별자를 갖고 있어서 저렇게 뒤로 미뤄지는 데이터들을 옮기고, 옮긴 위치에 맞는 식별자를 다시 연결하고, 기존의 식별자는 다시 새로 추가된 데이터에 연결하고....#@#$#%%^#
  
  컴퓨터 죽는 소리 들린다~!
  그래서 변수와 데이터를 다른 공간에 저장해서, 데이터를 변환할때는 아예 새로운 데이터를 데이터 영역에 추가하고 그 주솟값만 변수 영역의 값에 연결한다.

• 메모리를 더욱 효율적으로 관리하기 위해

  만약 값이 Hello, Nice to meet you 인 변수가 100개 있다면!?
  변수 영역의 값에 Hello, Nice to meet you 를 직접 지정해버리면, 100개의 변수 모두에 값 : Hello, Nice to meet you 라고 지정해줘야 한다.
  예를 들어 Hello, Nice to meet you 라는 문자의 크기가 10 바이트라고 가정하면, 100*100 해서 총 10,000 바이트가 필요하다....
  
  Hello, Nice to meet you 를 별도의 데이터 영역에 한번만 저장하고, 이 주솟값을 100개의 변수의 값으로 지정하면 어떻게 될까? 이 주솟값의 크기가 2바이트라고 가정하면 100*2+10 으로 210 바이트만 필요하다!
  
  이렇게 변수와 데이터를 다른 공간에 저장하면, 중복된 데이터에 대한 메모리 처리를 효율적으로 할 수 있다.

---

   4. 불변값과 가변값   

:: 불변값

드디어 대망의 불변성에 대해 얘기해보자!

변수(variable) var let 과 상수(constant) const 는 변경 가능성 여부에 따라 구분된다.

그래서 흔히 상수 const 는 불변값이라고 생각하는 경우가 많다. 나 또한 그랬고......^p^...

var let vs const 를 결정짓는 변경 가능성 여부란, 한번 데이터 할당이 이뤄진 변수 영역에 다른 데이터를 재할당할 수 있는지 여부를 말한다.

let a = 10;
a = 20; // 200 OK

const b = 10;
b = 20; // ?!?! SyntaxError! 

---

  한 눈에 보는 var, let, const 차이  

가능?	var	const	let
스코프	function	block	block
재선언	O	X	X
재할당	O	X	O
호이스팅	O (function-scope 단위)	O (block-scope 단위)	O (block-scope 단위)

---

불변값을 판단할때의 불변성 여부는 데이터 영역의 메모리를 말한다.
그리고 기본형 데이터 타입(number, string, undefined, null, Symbol)은 모두 불변값이다.

뭔가 감이 오지 않는가!?

let a = 10;
let b = a;
a = a + 5;

순서대로 보자면, a 라는 변수에 숫자 10을 할당한다.

컴퓨터는 데이터 영역을 쭉 확인하고, 10이라는 숫자가 없다면 새로운 공간에 10을 저장하고, 그 주솟값을 a 라는 변수의 값에 할당한다.

그 후, b 라는 변수에 a 변수의 값을 할당한다. 즉, a 변수의 값인 10의 주솟값을 할당한다.

마지막에 a의 값을 a + 5로 변경한다.

console.log(a); // 15
console.log(b); // 10

신기하지 않은가?!?

분명히 a = a + 5 로 a의 값을 바꿨기 때문에, a 자체가 15로 변경되고, 그로 인해 b의 값까지 바뀔 것 같은데!!!

글로만 보면 뭔가 ??? 스럽지만.... 그림으로 보면 바로 이해 간다!

처음에 10이라는 데이터에 해당하는 @5003 주소를 @1002 와 @1003 에 똑같이 할당한다!

그 후 a = a + 5 로 a 변수의 값을 변경한다.

컴퓨터는 연산 후의 결과인 15를 데이터 영역에서 찾는다. 그리고 15라는 숫자가 없기 때문에, 새로운 공간에 15을 저장하고 그 주솟값@5004를 a라는 변수의 값에 재할당한다.

즉, 10(@5003) 과 15(@5004) 는 완전히 별개의 데이터이다.

기존에 저장된 10 자체를 15로 바꾸는게 아니라, 15를 찾아서 있으면 재활용하고 없으면 새로 만든다.

마치 값이 변경되는것처럼 보이지만, 한번 만든 값은 가비지 컬렉팅을 당하지 않는 한 영원히! 절대로! 바뀌지 않는다.

이것이 불변값이며, 기본형 데이터 타입은 모두 불변값이다.

:: 가비지 컬렉팅

한번 만든 값은 가비지 컬렉팅을 당하지 않는 한 영원히! 절대로! 바뀌지 않는다.

그래서 그게 뭐죠....?

JavaScript는 값을 선언할 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다.

프로그래밍 언어에서 메모리는 일정한 생명주기를 가지는데,

1. 필요할 때 할당한다.
2. 사용한다. (읽기, 쓰기)
3. 필요 없어지면 해제한다.

이다. 이 중 1번과 3번의 경우, C언어 등에서는 명시적으로 지정해줘야 하지만, JavaScript 등에서는 암묵적으로 작동한다.

할당된 메모리가 더 이상 필요없다는 사실을, JavaScript는 어떻게 아는걸까?

바로 가비지 컬렉션(GC) 라는 자동 메모리 관리 방법을 사용해서 알 수 있다!!
가비지 컬렉션이란, 가비지 컬렉터들이 메모리 할당을 추적하고, 더이상 필요하지 않음을 판단해서 메모리를 해제하는 프로세스를 말한다.

필요 없는 메모리를 컴퓨터가 멋대로 정하고 멋대로 해제한다니? 우리 프로그램 망하는 소리 들린다~~~
걱정 NONO! 프로그램이 망하지 않도록, 가비지 컬렉션은 메모리를 수거하는 일정한 알고리즘을 정해뒀는데, 이 알고리즘의 핵심 개념이 바로 참조이다.

참고로, 기본형이든 참조형이든 모든 데이터 타입은, 데이터 영역의 어떠한 주솟값을 참조한다.

느낌 RG?? 맨 처음 사용했던 예시를 다시 보자!

solmi 라는 변수의 값으로 @5003 을 할당했다.

이렇게, solmi 라는 메모리를 통해 @5003 라는 메모리에 접근할 수 있다면, @5003 은 solmi 라는 변수에 참조된다고 할 수 있다.

solmi 라는 변수의 값에, @5004 을 할당했다.
마찬가지로 @5004 은 solmi 라는 변수에 참조된다.

그렇다면, @5003 은 어떻게 될까? solmi 라는 변수는 더이상 @5003에 접근할 수 없다.
@5003 은 solmi 에 참조되지 않는다.

@5003 이 다른 어떤 메모리에도 참조되지 않으면?

어떤 다른 메모리도 참조하지 않는 메모리를 가비지라고 부르며, 이런 가비지들을 가비지 컬렉터가 일정 주기마다 수집하고, 할당된 메모리를 해제한다.

:: 가변값

불변값은 OK, 그렇다면 가변값은 뭘까?

기본형 데이터 타입은 모두 불변값이니까.... 자동적으로 참조형 데이터 타입은 가변값이 된다.

기본형은 무조건 불변값이다! 절.대.불.변.해!
하지만 참조형은 무조건 가변값이진 않다. 설정에 따라 변경 불가능한 경우고 았고, 필요에 따라 불변값으로 만들 수도 있다.

참조형 데이터 타입, 즉 Object 를 하나 만들어보자!

let obj = {
	name: "solmi",
	age: 26
};

컴퓨터에서는 어떤 일이 일어날까?

참조형 데이터 타입을 변수에 할당하면, 다음과 같은 순서로 처리된다.

1. 변수 영역에 빈공간 @1002 을 확보하고, 식별자의 이름을 obj 라고 지정한다.
2. 데이터 영역에 빈공간 @5003 을 확보하고, 데이터를 저장한다.
   이 때, 데이터에 여러 개의 프로퍼티로 이루어진 데이터 그룹이기 때문에 이를 저장하기 위해 별도의 변수 영역을 만든다. (이 변수 영역을 책에서는 임의로 객체 @1002 의 변수 영역이라고 부른다.)
3. 객체 @5003 의 변수 영역의 주소인, @7001 ~ ? 을 @5003 에 저장한다.
4. 객체 @5003 의 변수 영역에 각각 name (@7001) age (@7002) 라는 프로퍼티 이름을 지정한다.
5. 데이터 영역에 'solmi' 라는 값이 없으므로 새로운 데이터 영역 @5004에 저장하고, 이 주소를 @7001 에 저장한다.
   마찬가지로, 26이라는 값을 새로운 데이터 영역 @5005 에 저장하고, 이 주소를 @7002 에 저장한다.

기본형 데이터 타입과의 차이는, 객체의 변수(프로퍼티) 영역이 별도로 존재한다는 점!!

name : 'solmi' 는 string 타입 ⇒ 기본형 데이터 타입 ⇒ 불변값이다.

age: 26 도 number 타입으로 동일하다. 따라서 이 값들은 모두 데이터 영역에 저장되었다.

객체 @5003 의 변수 영역에 이러한 프로퍼티로 이루어진 여러개의 데이터 그룹이 저장되는 것이다.

---

let obj = {
	name: "solmi",
	age: 26
};

obj.age = 27;

obj 의 age 라는 프로퍼티에 27이라는 값을 재할당하면 어떻게 될까?

27이라는 값이 데이터 영역에 없으므로, 새롭게 만들고 그 주소@5006 를 @7002 의 값으로 바꾼다.

하지만, obj 가 바라보고 있는 주소는 @5003 으로 변하지 않았다.

즉, 새로운 객체가 만들어진 것이 아니라 기존 객체의 내부 값만 바뀐 것!!!!

참고로 여기서 @5005 는 더이상 참조되지 않으므로 가비지 컬렉터의 수거 대상이 된다.

:: 중첩 객체

중첩 객체(nested object)란, 참조형 데이터의 프로퍼티에 다시 참조형 데이터를 할당하는 경우를 말한다.

let obj2 = {
	name: 'solmi',
	like: [ game, chicken, alcohol ]
};

어떤 일이 일어날까?!

예시에 오타났다리ㅠㅠ
배열 @5006 의 변수 영역 이 아니라 배열 @5005 의 변수 영역 이다!

헉....뭔가 복잡한데 @_@
그래도, 같은 색깔끼리 차근차근 보면 이해하기 쉽다!

중요한 점은, like 라는 배열 또한 참조형 데이터 타입이므로 각 프로퍼티들을 저장하기 위한 별도의 변수 영역을 가진다.

그림에서는 배열 @5005의 변수 영역 이라고 표현했지만, 배열도 사실은 객체라는 점을 잊으면 안된다.
(객체랑 배열을 따로 두고 생각나면 나중에 겁나 헷갈림 - 경험담)

배열도 객체?
배열은 key값이 숫자이면서, 0부터 시작해서 1..2..3... 으로 순차적으로 늘어나는 객체당!

기본형 데이터 타입과 참조형 데이터 타입의 가장 큰 차이는 변수를 복사할 때 발생하는데,

변수 복사와 참조형 데이터 타입을 불변값으로 사용하는 방법 등은 다음 글에 계속...!

출처 : 코어 자바스크립트 [정재남]

---

개발 왕초보 코린이입니다!
이 내용은 각종 강의&구글링을 통해 배운 내용을 정리하는 것으로, 제가 이해하고 넘어간 개념이 틀렸거나 더 보충할 개념이 있다면 댓글 남겨주시면 정말 감사하겠습니다!!