데이터타입 심화① | 기본형과 참조형 정리하기

하영·2024년 7월 22일

JavaScript

목록 보기

13/29

js강의를 제공받아서 주말부터 듣기 시작했는데 3주차부터 머리가 터질 것 같다..🤯
그동안 내가 javascript를 이론부터 꼼꼼하게 공부하지 않고 바로 쓸 수 있게끔 겉핥기식으로 공부했구나 싶어서 반성하게 되었다.
나중에 취업하고나서 제대로 된 개념 몰라가지고 민폐 끼치는 것보다 지금이라도 배울 수 있는게 참 다행이다.

데이터 타입 심화

01. 데이터 타입의 종류(기본형과 참조형)

멘붕에 빠지게 한 건 바로 데이터타입의 종류인 기본형과 참조형을 공부하기 시작하면서였다.

자바스크립트에서 값의 타입은 크게 기본형과 참조형으로 구분되는데 이 구분 기준은 값의 저장방식과 불변성 여부이다.

복제방식
- 기본형: 값이 담긴 주소값을 바로 복제
- 참조형: 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
불변성 여부
- 기본형 : 불변성을 띔
- 참조형 : 불변성을 띄지 않음

🔍 여기서 "불변성을 띈다"는 말을 이해하기 위해서 메모리, 데이터에 대한 내용을 이해해야하는데 아래 예시로 정리해보았다.

02. 메모리와 데이터에 관한 배경지식

1. 메모리, 데이터

비트 : 컴퓨터가 이해할 수 있는 가장 작은 단위로 이 조각들이 모여서 메모리를 만든다.
0,1을 가지고 있는 메모리를 구성하기 위한 작은 조각들!
바이트 : 0,1로만 표현되는 비트를 모두 찾기에는 효율적이지 못함
비트 8개 = byte
메모리 : byte단위로 구성
모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해 서로 구분된다.
java, c와 달리 javascript는 메모리 이슈까지 고민하지 않아도 되어 편리하다.

2. 식별자, 변수

var testValue = 3
변수 = 데이터
식별자 = 변수명

03. 기본형 데이터와 참조형 데이터

👩🏻‍💻 다시 한 번 정리하고 가면!

변수: 변수 영역 메모리 변경 ⭕️
상수: 변수 영역 메모리 변경 ❌
불변하다 : 데이터 영역 메모리 변경 ❌
불변하지 않다 : 데이터 영역 메모리 변경 ⭕️

✅ 가변값과 가변성(with 참조형 데이터)

참조형 데이터의 변수 할당 과정

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

위 코드를 가지고 데이터에 저장하는 방식을 표로 직접 정리해보았다.

변수와 데이터마다 주소,데이터가 있고 obj1에 대한 별도 데이터도 따로 준비되어있다.

할당과정

위 코드에서 변수는 obj1 이므로 1001 주소의 데이터 값에 넣어준다.
이 obj1의 데이터를 별도로 관리하기 위한 공간에 obj1의 변수를 담아준다.
obj1의 데이터 값을 5001, 5002에 하나씩 자리를 정해주었다.
3번의 주소(5001,5002)를 참조해서 obj1의 데이터에 넣어준다.
결과적으로 변수 obj1의 데이터 주소는 7103, 7104가 된다.

🔍 참조형데이터가 불변하지 않다(가변하다)라고 하는 이유

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

// 데이터를 변경해봅시다.
obj1.a = 2;

위 코드처럼 a의 데이터를 변경한다고 하면,
변경할 값 숫자 2를 새로운 데이터 영역에 추가하고 obj1 의 주소를 숫자 2가 들어있는 주소로 바꿔준다.
데이터 영역에 저장된 값들은 변한게 없지만(불변값이지만) **obj1의 별도 영역은 변경이 가능하다.
-> 이 때문에 참조형 데이터를 불변하지 않다(=가변하다)** 라고 하는 것이다.

✅ 중첩객체의 할당

객체 안에 객체가 들어있는 중첩객체의 경우는 어떻게 되는지 똑같이 표를 그리면서 정리해보자.

var obj = {
	x: 3,
	arr: [3, 4, 5],
}
//obj.arr[1]의 탐색과정은 어떻게 될까?

방법은 위와 동일한데 알아두어야하는건 중첩객체가 있다면 그 객체를 관리할 데이터영역을 만들어서 관리해준다.
코드에서는 obj1 객체 안에 arr라는 객체가 있으므로, obj1 처럼 arr 객체 데이터를 관리할 영역을 만들어주었다.

✅ 변수복사의 비교, 객체 프로퍼티 변경

// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형

똑같은 과정으로 표를 작성해주었다.

그런데 이제 값 변경 부분에 대해서 표를 작성해보면 문제가 있다는 걸 알게된다.

// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형

// STEP03. 값 변경
b = 15;
obj2.c = 20;

이렇게 된 코드로 표를 작성하면 어떻게 될까?

여기서 문제점이 발생하는데 obj1과 obj2 는 다른 변수임에도 불구하고 주소가 7103부터 가져와서 값이 똑같아진다. (obj1 === obj2이 된다.)

이를 막기 위해서는 아래처럼 만들 수 있다.

//기본형 데이터
var a = 10;
var b = a;

//참조형 데이터
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'aaa'};

할당과정

obj2의 영역을 만들어서 그 안에 변수와 데이터 값을 가져오고
obj1과 obj2의 데이터 주소를 맞게 바꿔준다.
그러면 obj1 은 결과적으로 7103부터 가져온다.
obj2 는 자기 영역에 있는 주소, 즉 8105부터 가져와서 두 객체의 값은 더이상 같지 않게 된다.

04. 참조카운트와 가비지컬렉터(GC, Garbage Collector)

참조카운트는 객체를 참조하는 변수나 다른 객체의 수를 나타내는 값이다.
이건 위에 내용을 살짝 가져와서 설명하면 데이터 값이 바뀌면서 더이상 쓰지 않게 되는 값들이 발생하는데, 이를 '참조카운트가 0이다.' 라고 한다.
이렇듯 더이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 하는 아이가 바로 가비지컬렉터(GC, Garbage Collector) 이다.

➕ 다음에 정리할 내용