1. JS의 데이터 타입

리액트를 들쑤시다가 자바스크립트 개념을 제대로 다져야 뭐라도 할 수 있겠구나 싶어서 개발하던 것들 모두 잠시 내려 놓고, 차근차근 짚어보기로 했다.

자료는 인프런 유료 강의 "코어 자바스크립트"를 참고했다 갓성비 ^ㅡ^

데이터 타입은 크게 두 가지로 나뉜다

자바스크립트의 데이터 타입은 Primitive Type 기본형과 Reference Type 참조형으로 구분할 수 있다.

Primitive Type에는 Number, String, Boolean, null, undefined가 있다. ES6부터는 Symbol도 추가되었다.

Reference Type은 Function, Array 등의 Object 객체가 해당된다.


그럼 내가 에디터에 변수를 선언하면 컴퓨터는 어떻게 처리할까?

let x;
.
.
.
x = 123;

기본형인 Number 타입의 변수 x를 선언했다.
메모리는 이 데이터가 담길 공간을 확보하고, 그 공간의 이름(key)에 변수 이름을, 값(value)에 변수 값을 저장한다. 아직 x의 값을 지정해주지 않았으니 임의의 공간 1번에 이름: x 만 저장했다고 해보자.
코드가 진행되는 도중 x에 123을 할당하는 내용을 만났다. 이 때 바로 공간 1번에 123이 들어가지 못한다. 다른 임의의 공간 1001번에 123을 저장해 준다. 이제 1001번에 123이 있다는 정보를 갖고 메모리 안에서 x을 찾아 다니고, 공간 1번의 식별자가 x이므로 비어있던 값에 1001번 주소를 입력한다. 123 자체를 값에 넣는 것이 아니라, 123이 들어있는 다른 공간의 주소가 값이 되는 것이다.

전혀 간단하지 않다. 내 맥북 구데기인 줄만 알았는데 열일하고 있었구나

아니 메모리 공간 하나에는 값이 하나밖에 못 들어가는 걸로 알고 있는데, 그럼 값이 여러 개인 객체는 어떻게 저장함?

const human = {
	age: 22,
    isHungry: true
};

age 와 isHungry 값을 갖는 human 객체를 만들어 보았다. 나 대학 와서 아무것도 못하고 군대 끌려왔는데 왜 22살이냐?

일단 임의로 공간 2번에 이름: human 을 저장하고, 값을 넣어야 한다.
공간 1002번에 값을 저장해 주려고 했는데, 이 객체는 값이 2개라 1002번에 다 넣을 수가 없다. 그래서 1002번에 "2001번부터 어디까지일지는 모르겠는데 거기가 human 객체의 프로퍼티야~" 라고 지정해 주겠다.
이제 2001번부터 프로퍼티를 하나씩 넣어주자.
공간 2001번에는 이름: age 값: @3001 을 저장했다. 이는 3001번 주소에 age의 값이 존재한다는 뜻이므로, 3001번 공간에 가면 22라는 값이 있다. (3001번도 임의로 설정했다) 공간 2002번에는 이름: isHungry 값: @3002 를 저장했다. 똑같은 맥락으로 3002번 공간에는 true가 있다.
이제 객체의 프로퍼티가 모두 저장됐으니 2001번, 2002번 주소를 담은 1002번을 공간 2번의 값으로 지정해 준다. 이제 2번에는 이름: human 값: @1002 가 들어있게 된 것이다.

정리해 보자면

2번 -> 이름: human 값: @1002
1002번 -> @2001 ~ @2002
2001번 -> 이름: age 값: @3001
2002번 -> 이름: isHungry 값: @3002
3001번 -> 22
3002번 -> true

기본형과 달리 참조형은 값을 할당할 때 한 단계가 더 생긴 셈이다.

왜 값을 직접 저장하지 않고 따로 빼고 그 주소를 넣을까?

물론 한 공간에 값을 바로 저장하는 방법이 주소를 저장하는 것보다 빠르다. 하지만 나중에 사용자의 명령에 의해 어떤 비교가 실행될 때, 직접 저장은 소모되는 비용이 있어 비효율적이라고 한다.

const a = "abcdefg";
const b = "abcdefg";
const c = "abcdefg";

변수 a, b, c에 "abcdefg"를 저장한다고 가정해 보자.
먼저 직접 저장 방식은

1번 -> 이름: a 값: "abcdefg"
2번 -> 이름: b 값: "abcdefg"
3번 -> 이름: c 값: "abcdefg"

이고, 주소 저장 방식은

1번 -> 이름: a 값: @1001
2번 -> 이름: b 값: @1001
3번 -> 이름: c 값: @1001
1001번 -> "abcdefg"

이 되겠다. 직접 저장 방식은 x3 이지만 주소 저장은 +3 이라는 이점이 있고, 직접 저장과 달리 주소 저장은 "abcdefg" 가 메모리 상에 1개만 존재한다. 이런 점들 때문에 주소 저장 방식을 사용하고, 기본형 데이터 타입을 불변형이라고 부를 수 있는 것이다.

데이터 타입에 대해 알아 보았다. 힘들다. 힘들지만 굉장히 중요한 내용이라는 게 와닿는다.

그리고 내가 공부하는 것들을 어딘가에 기록하는 게 참 좋은 습관이라고 생각한다. 까먹으면 다시 들여다볼 수도 있고, 꾸준히 모으다 보면 이것도 하나의 포트폴리오가 되지 않을까 ?.?

오늘은 음주단속 근무가 있으니 그만 끝내고 누워서 유튜브 볼 거다. 요새 브이로그가 자꾸자꾸 알고리즘에 뜨는데, 내가 보는 브이로그는 딱 두 개다.
자취의 꽃은 요리인데, 모두의 로망을 실현한 분이 계셨다. 릿쭈 님이라고 이 분 영상 보고 있으면 힐링돼서 좋다. 나도 빨리 다시 자취방 가서 알찬 생활을 보내고 싶다
또 한 분은 개발자 쟈미 님이다. 카카오 개발자로 근무 중이시라는데, 너무너무 존경스럽기도 하고 멋있기도 해서 보고 있다. 키보드 ASMR 영상도 몇 개 있어서 요새는 그거 들으면서 코딩하고 있다. 이 분 덕에 나도 바밀로 키보드 지르기로 마음먹었다 ㅋ ㅡ ㅋ 빨리 영상 올려 주세요 현기증 난단 말이에요