🗂️ 자바스크립트의 변수와 데이터 타입

🤔 변수란 무엇이고 왜 필요한가?

우리는 프로그래밍을 하다가 어떤 값을 재사용해야하는 상황에 직면할 때가 있다. 어떤 값의 재사용을 위해 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수(variable)라는 메커니즘을 제공한다.

변수는 어떤 값을 저장하기 위해 확보한 메모리 공간이다.

---

🗝️ 식별자

아까 변수는 어떤 값을 저장하기 위해 확보한 메모리 공간이라고 했는데, 해당 메모리 공간을 식별하기 위해서는 변수에게 이름을 지어줘야 한다.
변수 이름을 식별자(identifier)라고 하기도 한다. 식별자란 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다. 변수, 함수, 클래스 등의 이름은 모두 식별자다.

---

📝 변수 선언과 할당

let num = 30; 

위 식은 num이라는 변수를 선언하고 30이라는 값을 할당하는 과정이다. var , let, const 예약어를 사용해 변수를 선언할 수 있다.

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계를 거쳐 실행한다

• 선언 단계: 변수 이름을 실행 컨텍스트에 등록한다.

• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다. (var 키워드로 선언한 변수는 선언과 함께 undefined가 할당되었다가 30이 재할당되는데 let, const는 그렇지 않다. 이는 실행 컨텍스트에서 자세히 다룰 예정이다.)

위의 식의 변수가 선언과 할당이 이루어지는 과정을 아래에서 살펴보기로 하자

1. num이라는 이름을 실행 컨텍스트에 등록하고 값을 저장할 메모리 공간을 확보한다. 그리고 그 공간의 이름을 num이라고 지정한다. (여기서는 확보한 메모리 공간의 주소를 0x00000001이라고 하겠다.)

2. undefined가 저장된 메모리 공간을 찾고, 저장되어있지 않을 경우 빈 공간에 (여기서는 0x00000002)에 undefined를 저장한다.

3. num이라고 이름 붙은 메모리 공간 0x00000001이 undefined가 저장된 0x00000002를 가리키게 한다. 이를 통해 num을 호출하면 undefined를 불러올 수 있게 되었다.

4. 30이 저장된 메모리 공간을 찾고, 저장되어있지 않을 경우 빈 공간에 (여기서는 0x00000003)에 30이라는 값을 저장한다.

5. num이라고 이름 붙은 메모리 공간 0x00000001이 30이 저장된 0x00000003를 가리키게 한다. 이를 통해 num을 호출하면 30을 불러올 수 있게 되었다.

정리해보면 이러하다.

데이터/주소	0x00000001	0x00000002	0x00000003
이름	num
값	0x00000002	undefined

⬇️

데이터/주소	0x00000001	0x00000002	0x00000003
이름	num
값	0x00000003	undefined	30

설명할 그림자료가 없다는게 너무 아쉽다...

---

🗂️ 자바스크립트의 데이터 타입

자바스크립트의 모든 값은 데이터 타입을 갖는다.
크게 2가지로 기본형(Primitive Type)과 참조형(Reference Type)이 있다.
(사진출처 : 우아한테크코스)

이 두 가지 데이터 타입을 무엇을 기준으로 나뉘는 걸까?
바로 아래에서 살펴볼 불변성과 가변성이다.

---

🌊 불변성과 가변성

변수와 상수, 불변성과 가변성

먼저 지르고 가자면, 기본형(Primitive Type)은 불변성을 가지고 참조형(Reference Type)은 가변성을 갖는다.

상수와 변수, 불변성과 가변성에 대해서 헷갈리기가 쉬운데 변할 수 있는 주체가 뭐냐에 따라서 상수와 변수, 불변성과 가변성을 나눌 수 있다.

먼저 변수와 값을 나눠서 보자.

let num = 30;

에서 num은 값을 저장하기 위해 확보한 메모리 공간 그 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 그리고 30은 메모리 공간에 저장된 값이다. 변경 불가능하다, 즉 불변성을 가지고 있다는 것은 값(여기서는 30)에 대한 진술이다.

만약에 num이라고 이름 붙인 메모리 공간의 주소를 0x00000000이라고 하고 30이라는 값이 저장된 메모리 공간의 주소를 0x00000001이라고 한다면,

변수냐 상수냐는 num이 가리키고 있던 메모리 공간의 주소를 바꿀 수 있냐 없냐에 따라 num의 변수, 상수가 여부가 나뉜다. 그에 비해 불변성을 가지냐, 가변성을 가지냐는 0x00000001이라는 메모리에 기존 값 대신 새로운 값을 할당할 수 있냐 없냐에 따라 기존 값의 불변성, 가변성이 나뉜다.

기본형 (Primitive Type)

위에서 기본형은 불변성을 가진다고 했다. 30이라는 값은 Number타입이기 때문에 불변성을 가진다. 메모리에 한 번 저장된 기본형 값은 가비지 컬렉션의 대상이 되어 메모리가 해체 되기 전까지 변화될 수 없다. 그러면 불변성을 가진 값을 저장한 변수는 어떻게 재할당을 할까?

let num = 30;
num = 50;

//num :0x00000001
//30 :0x00000002
//50 :0x00000003

변수를 선언하고, 변수에 값을 할당하는 과정을 우리는 위에서 살펴봤으므로 앞부분은 생략하고 설명을 진행하겠다. 첫 번째 줄까지 진행이 되었을 때, num은 0x00000002를 가리키고 있을 것이다. 여기서 num에 새로운 50이라는 값을 할당하면, 0x00000002에 저장된 값 30을 50으로 바꾸지 않고, 새로운 메모리 공간에 50이라는 값을 저장해 num이 0x00000003을 가리키도록 한다.

데이터/주소	0x00000001	0x00000002	0x0000003
이름	num
값	0x00000003	30	50

이때문에 기본형 값이 불변성을 가지고 있다고 말한다.

참조형(Reference Type)

먼저 참조형 값을 변수에 할당하는 과정을 살펴보도록하자. 참조형 값을 변수에 할당하는 과정은 기본형 값을 변수에 할당하는 과정보다 조금 더 복잡하니 이해가 완전히 안 되었다면 완전히 이해하고 오자.

const user = {
  name: 'Harry'
  age: 20
}

1. 메모리의 빈 공간 0x00000001을 확보해 user라는 이름을 붙인다.

2. 임의의 메모리 공간 0x00000002에 데이터를 저장하려고 보니 여러 개의 프로퍼티로 이루어진 데이터 그룹이다. 이 그룹 내부의 프로퍼티들을 저장하기 위한 메모리 공간을 확보하고 (여기서는 0x00000003, 0x00000004) 그 메모리 공간들의 주소를 0x00000002가 가리키도록 한다.

3. 0x00000003, 0x00000004에 각각 name, age라는 이름을 붙인다.

4. Harry라는 값과 20이라는 값이 메모리에 존재하는지 검색하고, 없으면 임의의 메모리 공간 0x00000005, 0x00000006에 값을 저장하고, name, age가 각각의 메모리 공간 주소값을 가리키도록 한다.

정리해보면 이러하다

데이터/주소	0x00000001	0x00000002	0x0000003	0x0000004	0x0000005	0x0000006
이름	user		name	age
값	0x00000002	0x00000003~4	0x00000005	0x00000006	Harry	20

user -> 0x00000002 -> name,age
name -> 0x00000005
age -> 0x00000006

여기서 객체를 수정해도 기본형 값과 달리 새로운 객체를 생성해 user가 가리키도록 하지 않고 user는 그대로 0x00000002를 가리키고 있는 그대로 객체가 수정됩니다. 예시를 들어 살펴보겠다.

알고보니 user에 저장된 Harry의 나이는 23살이었고 20살에서 23살로 수정을 해야하는 상황이 생겼다. 그러기 위해 다음과 같은 과정을 따라간다.

1. 23이라는 값을 임의의 메모리 주소 0x00000007에 저장한다.

2. age가 0x00000007을 가리키도록 한다.

데이터/주소	0x00000001	0x00000002	0x00000003	0x00000004	0x00000005	0x00000006	0x00000007
이름	user		name	age
값	0x00000002	0x00000003~4	0x00000005	0x00000007	Harry	20	23

여기서 user가 가리키고 있는 주소는 0x00000002에서 변하지 않았다. 새로운 객체가 만들어진 것이 아니라 기존 객체의 내부의 값만 바뀐것이다.

이때문에 참조형 값은 가변성을 가진다고 하는 것이다. 하지만 이러한 가변성은 객체 내부의 프로퍼티를 수정할 때만 성립하고 참조형 데이터 자체를 변경할 경우에는 성립하지 않는다.

이 부분은 아래 참조에 의한 전달에서 다뤄보도록 하겠다.

---

📋 값에 의한 전달과 참조에 의한 전달

위 제목은 "변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?"에 관한 이야기이다. 먼저 기본형은 값에 의한 전달방식으로, 참조형은 참조에 의한 전달방식으로 전달된다.

사실 자바스크립트에는 값에 의한 전달이라는 용어를 쓰는게 맞지 않을지도 모른다. ECMAScript 사양에도 값에 의한 전달이라는 등장하지 않는다고 한다. 자바스크립트에서는 기본형이든, 참조형이든 변수에는 값이 아니라 메모리 주소가 전달되기 때문이다. 왜냐하면 위에서 살펴봤듯이 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있기 때문이다.

하지만 둘은 구분해 설명하는데에는 이유가 있을 것이다. 이유는 아래에서 살펴보도록 하자.

값에 의한 전달

먼저 두 가지 방식으로 설명할텐데 어느 쪽이 실제 자바스크립트 엔진의 내부 동작과 일치할 지는 알 수 없다.ECMAScript 사양에는 변수를 통해 메모리를 어떻게 관리해야 하는지 명확하게 정의되어 있지 않기 때문에 엔진을 구현하는 제조사에 따라 실제 내부 동작은 미묘한 차이가 있을 수 있다.

일단 값에 의한 전달 방식은 원본이 수정된다고 사본이 수정되지않고, 마찬가지로 사본이 수정된다고 원본이 수정되지도 않는 방식이다.

첫번째 방식

let num = 80;
let copy = num;

num = 100;

데이터/주소	0x00000001	0x00000002	0x00000003
이름	num	copy
값	0x00000003	0x00000003	80

⬇️

데이터/주소	0x00000001	0x00000002	0x00000003	0x00000004
이름	num	copy
값	0x00000004	0x00000003	80	100

첫번째 방식은 copy에 num을 할당하면 두 변수가 같은 주소값을 가리키고 있다가 둘 중 하나에 새로운 값이 할당되면 다른 주소값을 가리키게 되는 방식이다. 같은 주소값을 가리키고 있다 하더라도 서로의 변경은 서로에게 어떠한 영향도 주지 않는다.

두번째 방식

let num = 80;
let copy = num;

num = 100;

데이터/주소	0x00000001	0x00000002	0x00000003	0x00000004
이름	num	copy
값	0x00000003	0x00000004	80	80

⬇️

데이터/주소	0x00000001	0x00000002	0x00000003	0x00000004	0x00000005
이름	num	copy
값	0x00000005	0x00000003	80	80	100

두번째 방식은 num을 copy에 할당할 때 80이라는 값이 새로 메모리에 저장되어 그 메모리의 주소값을 copy가 가리키게 되는 방식이다. MDN의 원시 값 페이지에서는 이 방식으로 설명하고 있다. 위와 마찬가지로 서로의 변경은 서로에게 어떠한 영향도 주지 않는다.

참조에 의한 전달

참조에 의한 전달방식은 원본이 수정되면 사본도 수정되고, 마찬가지로 사본이 수정되면 원본도 수정되는 방식이다. 위에서 말했지만 참조형이 이러한 방식으로 전달된다. 사실 위에서 불변성과 가변성을 유의깊게 봤다면 느낌이 좀 올 것이다.

const user = {
  name: 'Harry'
  age: 20
}
const copy = user;

user.age = 23;

데이터/주소	0x00000001	0x00000002	0x0000003	0x0000004	0x0000005	0x0000006	0x00000007
이름	user	copy		name	age
값	0x00000003	0x00000003	0x00000004~5	0x00000006	0x00000007	Harry	20

⬇️

데이터/주소	0x00000001	0x00000002	0x0000003	0x0000004	0x0000005	0x0000006	0x00000007	0x0000008
이름	user	copy		name	age
값	0x00000003	0x00000003	0x00000004~5	0x00000006	0x00000008	Harry	20	23

위 그림을 보면 알겠지만 user를 copy에 할당하게 되면 두 변수는 동일한 주소값을 가리키게 된다. 위에서 불변성과 가변성을 살펴보아서 알겠지만 객체 내부의 프로퍼티를 수정해도 객체가 새로 생성되어 새로운 주소값을 가리키게 되는 것이 아니기 때문에

console.log(copy.age); //23
console.log(user.age); //23

위와 같이 원본과 사본이 함께 수정된다. 여기서 위에서 뿌려놓은 떡밥을 수거하고 가자면 (불변성과 가변성 참조형 부분 마지막 참조) 객체 내부의 프로퍼티를 수정하는 것이 아닌 새로운 객체를 할당하면 원본과 사본이 함께 수정되지않는다.

let user = {
  name: 'Harry'
}
let copy = user;

copy = {
  name: 'Hyeok'
}

데이터/주소	0x00000001	0x00000002	0x0000003	0x0000004	0x0000005
이름	user	copy		name
값	0x00000003	0x00000003	0x00000004	0x00000005	Harry

⬇️

데이터/주소	0x00000001	0x00000002	0x0000003	0x0000004	0x0000005	0x00000006	0x00000007	0x0000008
이름	user	copy		name			name
값	0x00000003	0x00000006	0x00000004	0x00000005	Harry	0x00000007	0x00000008	Hyeok

위와 같이 새로운 객체를 할당하게 되면 위에서 말했던 것처럼 가변성은 객체 자체가 아닌 내부 프로퍼티를 수정할 때 성립하기 때문에, 가리키는 주소값이 달라지게 된다.

console.log(copy.name); //Hyeok
console.log(user.name); //Harry

당연한 결과로 두 객체는 전혀 다른 객체가 된다.

---

🎛️ 데이터 타입의 필요성

(실수로 안 쓰고 올려서 나중에 추가 예정)

---

🧐 정리

• 변수는 어떤 값을 저장하기 위해 확보한 메모리 공간이다.
• 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다.
  • 둘을 잘 구별하지 않기 때문에 변수를 어떤 값을 저장하기 위해 학보한 메모리 공간 또는 그 메모리 공간에 붙인 이름으로 얘기하기도 한다.
• 자바스크립트의 데이터 타입은 기본형과 참조형이 존재한다.
  • 기본형의 특징 - 불변성, 값에 의한 전달
  • 참조형의 특징 - 가변성, 참조에 의한 전달
• 자바스크립트의 데이터 타입이 필요한 이유는 아래와 같다.
  • 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
  • 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
  • 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

---

📖 참고자료

• 코어 자바스크립트

  • 1. 데이터 타입 (1p~34p)

• 모던 자바스크립트 Deep Dive

  • 4. 변수 (34p~47p)
  • 6. 데이터 타입 (59p~73p)
  • 11. 원시 값과 객체의 비교 (137p~153p)

• 우테코 프론트엔드JS 레벨1 - 2022

  • 온보딩 🗂️ JavaScript Data Type 문서