자바스크립트의 참조형 데이터 타입

---

함께 보면 좋은글

• 2020/10/06 - [프로그래밍 언어/Javascript] - 자바스크립트의 기본형 데이터 타입
• 2020/09/02 - [프로그래밍 언어/Javascript] - 자바스크립트의 메모리 관리

---

---

이전에는 기본형 데이터 타입에 대해서 알아보았습니다.

오늘은 자바스크립트가 참조형 데이터를 어떻게 저장하고 사용하는지에 대해서 알아보도록 겠습니다.

 

만약 이전 포스팅인 자바스크립트의 기본형 데이터 타입 포스트를 읽고 오시지 않으셨다면 읽고 오시는것을 추천합니다.

 

자바스크립트의 데이터 타입 (1)

---

참조형 데이터 타입

참조형 데이터는 배열(Array), 함수(Function), Set, Map 등의 데이터 타입을 가지고 있지만

이 데이터 타입들을 까고 까다보면 객체 하나로 귀결됩니다.

 

그래서 참조형 데이터들이 메모리를 사용하는 방식을 보면 거의 비슷합니다.

하지만, 그렇다고 해서 쉬운건 또 아닙니다.

객체 하나로 귀결되는 만큼 내용도 방대하기 때문에 다양하게 알아야 할 것이 많기 때문이죠

 

또한, 참조형 데이터는 기본형 데이터와는 다르게 불변하지 않고 가변적으로 변하는 데이터 입니다.

그래서 더 신경을 많이 써야하고 어디서 어떻게 변할지 모르는 데이터 타입입니다.

 

그렇다면 어떻게 해서 자바스크립트의 참조형 데이터는 가변적인 데이터가 될 수 있었을까요?

그것은 바로 다음 섹션인 참조형 데이터가 어떻게 메모리를 사용하는지에 대해서 알아보도록 하겠습니다.

 

 

---

 

자바스크립트가 참조형 객체를 생성하고 추가 및 변경하는 방법 with 그림

 

// obj 객체 생성 및 초기화
let obj = {
    a: 1,
    b: "test"
};

 

먼저 소스를 통해 알아보도록 하겠습니다.

obj를 생성 후 객체로 초기화 해줍니다.

 

여기서, 객체의 내부는 키와 값으로 이루어져 있는데,

객체의 키를 "a" 와 "b"로 생성하고 각각 1과 "test"라는 기본형 데이터를 저장해 줍니다.

 

그렇다면 자바스크립트는 아래와 같이 메모리를 다루게 됩니다.

 

 

• 자바스크립트는 obj 객체를 301 메모리에 값으로 5001 메모리 주소를 저장합니다.

• 5001 메모리에는 obj가 가지는 임의의 메모리 영역을 저장합니다. 여기선 1040부터 1041이라고 잡겠습니다.

• 1040과 1041에는 각각 a와 b라는 이름을 제공하고 데이터가 저장되어있는 주소인 7001과 1003 주소를 저장합니다.

• 7001에는 숫자형인 1을 저장합니다.

• 기존에 "test"라는 문자열 데이터를 3003에서 사용하고 있었으므로 1041은 따로 메모리를 생성하지 않고 7003을 재사용 합니다.

기본형 데이터와 참조형 데이터의 차이는 각 객체의 요소들의 영역이 따로 존재한다는 것에 차이가 있습니다.

풀어서 설명하자면, 기본형 데이터는 변수 영역 -> 데이터 영역으로 접근한다면

참조형 데이터는 변수영역 -> 요소 데이터 영역 -> 요소 변수 영역 -> 요소 기본형 데이터 영역에 방식으로

이루어져 있다는 뜻입니다.

(물론 여기서 객체안의 객체가 존재하는 등의 depth가 깊어져 간다면 이러한 단계는 더욱더 많아집니다)

 

또한, 참조형 데이터가 가변값인 이유도 이 요소변수영역 존재이기 때문인데,

이 요소 변수영역으로 인해 추가 및 삭제, 업데이트가 가능하기 때문에 참조형 데이터가 가변값이 됩니다.

간단하게 업데이트와 추가를 통해 가변적으로 객체가 변경되는것을 보여드리겠습니다.

 

// 기존 데이터
const test = 2;

// obj 객체 생성 및 초기화
const obj = {
    a: 1,
    b: 2
};

// 객체에 데이터를 변경
obj.b = 56

// 객체에 데이터 추가
obj.c = 2;

console.log(obj)

 

 

 

• obj 객체를 초기화 후 객체를 할당합니다.

• 그 후 obj 객체에 b요소의 값을 변경합니다. (가변적인 부분)

• 또, obj 객체에 c요소를 추가합니다. (가변적인 부분)

위 소스에서 주의깊게 보아야 할 부분은 obj 객체에 b요소를 변경하고 c요소를 추가한 부분입니다.

기본형 데이터의 특징인 불변성은 값을 변경할 때 값이 변경되는게 아닌 변수영역의 메모리가 변경되는것을 말합니다.

하지만 위 코드처럼 b를 변경하고 c를 추가할 때,

obj의 변수영역 값은 변경되지 않은 상태로 데이터가 변경되는 것을 볼 수 있습니다.

이러한 특성 때문에 참조형 데이터를 가변적인 데이터라고 하는것 입니다.

---

 

자바스크립트가 참조형 배열을 생성하는 방법  with 그림

맨 위에 기본형 데이터와 참조형 데이터 도표를 보면,

참조형 데이터에 객체뿐만 아니라 배열 및 다양한 타입들이 존재합니다.

그 중에서 대표적으로 배열이 어떻게 메모리를 사용하는지에 대해서 알아보도록 하겠습니다.

 

const test = 2;

let arr = [1, 2];

 

이러한 코드가 있다고 가정합시다.

그러면 메모리에는 아래 그림과 같이 저장되어 집니다.

 

 

• 메모리에 301주소에 arr 메모리를 할당하고, 5001 주소를 할당합니다.

• 주소 5001번에는 주소 1040번 부터 1041번 까지의 주소값을 할당합니다.

• 주소 1040번의 이름은 0으로 하고 1의 기본형 데이터가 존재하지 않으므로 주소 7001번에 숫자형 데이터 1을 저장합니다.

• 주소 1041번의 이름은 1으로 하고 숫자형 데이터 2가 주소 3003번에서 사용하는 주소 7002번에서 사용하고 있으므로 주소 7002번을 저장합니다.

어때요 위의 객체가 메모리를 사용하는것과 똑같이 사용하죠?

그냥 키값이 0, 1, 2, 3 이런식으로 다를 뿐, 메모리를 사용하는 방식은 똑같습니다.

Set이나 Map같은 데이터 타입도 이와 비슷한 방식으로 메모리를 사용합니다.

 

참고로, 객체에 키값만 0, 1, 2, 3 이런식으로 저장해놓고 배열이라고 우기면 안됩니다.

배열이 메모리를 사용하는 방식이 같을뿐이지, 실제로 까보면 엄연히 다릅니다.

 

---

 

마무리

오늘은 자바스크립트의 참조형 데이터 타입에 대해서 알아보았습니다.

사실 오늘은 그렇게 깊은 내용까지는 들어가지 않았습니다.

추후 포스팅 할 때 깊은내용까지 들어가도록 하겠습니다.

 

만약 포스트에 문제가 있거나 틀린 부분, 잘 이해가 안 되는 부분이 있다면

댓글을 남겨주시기 바랍니다.

감사합니다.