javascript 기본 3 (기본형, 참조형 데이터와 불변성)

 

데이터 타입 📖

자바스크립트에서 값의 타입은 크게 `기본형`, `참조형`으로 구분됩니다.

구분 기준은 값의 저장 방식과 불변성 여부입니다.

 

데이터 타입

 

1. 값의 저장 방식

`기본형` : 값이 담긴 주소값을 바로 복제

`참조형` : 값이 담긴 주소값들로 이뤄진 묶음을 가리키는 주소값을 복제

 

2. 불변성 여부

`기본형` : 불변성을 띔.

`참조형` : 불변성을 띄지 않음.

 

* `불변성을 띈다`라는 말을 이해하기 위해서는 메모리 관점에서 봐야 하기 때문에 잠깐 메모리와 데이터에 대한 배경지식을 알아보도록 하겠습니다!

 

2-1. 메모리와 데이터

비트(bit)

 

컴퓨터가 이해할 수 있는 가장 작은 단위 ex) 0, 1
0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미하고 이 조각들이 모여 메모리가 만들어집니다.

바이트(byte)

 

8비트(bit) = 1바이트(byte)

byte

메모리(memory) : byte 단위로 구성

 

모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해 서로 구분합니다.

 

메모리 저장 방법

 

만약 64비트(bit) 정수를 메모리에 저장한다고 할 때 64비트를 8개의 바이트로 분할하고 각 바이트를 메모리에 저장합니다

 

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

할당 예시✨

/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';

/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';

 

메모리 할당 예시

 

3-1. 값을 바로 변수에 대입하지 않는 이유❓

* 숫자는 항상 8byte로 고정! *

 

1. 자유로운 데이터 변환

 

이미 1002 주소에 할당된 데이터를 변환하려 할 때 더 큰 데이터를 저장하려 한다면 1003 이후부터 저장 된 모든 데이터를 오른쪽으로 다~ 미뤄야 하기 때문에 변수에 대입하지 않습니다!

 

2. 메모리의 효율적 관리

 

ex) 1만개의 변수에 모두 1을 할당해야 한다고 할 때

변수에 바로 대입
변수 영역 : 1만 x 8byte
= 8만 byte

별도로 저장 *이해를 돕고자 2바이트로 가정
변수 영역 : 1만 x 2byte = 2만 byte
데이터 영역 : 1개 x 8byte = 8 byte
= 2만 8바이트

 

이러한 이유 때문에 위 사진과 같이 데이터를 관리합니다.

 

기본형, 참조형 데이터 📖

`변수` : 변수 영역 메모리를 변경할 수 있음

`상수` : 변수 영역 메모리를 변경할 수 없음

 

`불변하다` : 데이터 영역 메모리를 변경할 수 없음

`불변하지 않다` : 데이터 영역 메모리를 변경할 수 있음

 

1. 기본형 데이터

var a = 8;

a = 9;

불변하다

할당 과정✨

1. `a`를 9로 변경

2. 데이터 영역 @5003에 별도로 9가 생깁니다.

3. `a`변수는 @5002 -> @5003으로 바뀝니다.

4. 그래서 "변수 a는 불변하다" 라고 할 수 있습니다.

 

그리고 더 이상 5002는 사용되지 않기 때문에 javscript에 가비지 컬렉터가 메모리 관리를 하게 됩니다!

 

 

2. 참조형 데이터

참조형 데이터는 객체의 변수 영역이 별도로 존재합니다.

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

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

불변하지 않다

할당 과정✨

1. 변경할 값인 숫자 2를 데이터 영역에서 검색합니다.

2. 2가 없기 때문에 데이터영역 @5004에 2를 추가

3. obj1 별도 영역 @5002 -> @5004로 바뀝니다.

4. 데이터 영역은 불변하지만 obj1 별도 영역은 변경이 가능하기 때문에 "불변하지 않다"라고 합니다.

 

 

중첩객체의 할당 📖

객체 안에 또 다른 객체(배열)가 들어가 있는 것

var obj = {
  x: 3,
  arr: [3, 4, 5],
}

// obj.arr[1]의 탐색과정은 어떻게 될까요?

 

중첩객체

 

여기서 참조 카운트가 0인 객체는 더 이상 사용되지 않기 때문에 가비지 컬렉터에 의해 메모리에서 제거됩니다.

 

 

참조 카운트 🔢

객체를 참조하는 변수나 다른 객체의 수를 나타내는 값

 

가비지 컬렉터(GC, Garbage Collector) 🗑️

더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 합니다. 자바스크립트 엔진에서 내부적으로 수행되며, 직접적인 제어를 할 수 없습니다.

 

 

회고 🧐

불변하다라는 말을 메모리 관점에서 봐야 하기 때문에 직접 손으로 써보면서 하지 않으면 머릿속으론 이해하기가 좀 힘들었다. 그리고 가비지 컬렉터에 대해 궁금증이 생겼다. 다음에 가비지 컬렉터에 대한 블로그를 작성해 볼 생각이다.

---

출처 🏷️

https://velog.io/@imjkim49/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85-%EC%A0%95%EB%A6%AC

 

https://namu.wiki/w/%EB%B0%94%EC%9D%B4%ED%8A%B8

 

https://www.iplocation.net/javascript