기본형과 참조형의 차이

> 기본형과 참조형 구분 기준이 뭐지..?! 🤨

JS의 데이터 타입에는 기본형과 참조형이 있다는 것은 다들 아실겁니다.
그런데 어떤 기준으로 나뉘는지 정확히 이해하는 것은 어려워요..

깊게 들여다 보지 않으면 기본형은 불변값, 참조형은 가변값이라고 그냥 외워버리기 쉽죠. 단순히 이렇게 알고 있는 것은 정확하지 않은 개념일 뿐만 아니라, JS 본질을 알지 못하고 나중에 고생할 수도 있습니다.

그럼 정확히 기본형과 참조형의 차이를 살펴보겠습니다.

불변값과 기본값

선행지식은 불변값과 기본값입니다.

• 불변값: 메모리의 값을 저장할 때 데이터의 영역은 지워지지 않는다. 이것을 불변값이라고 한다.'

• 가변값: 메모리의 값을 저장할 때 변수 영역의 데이터는 바뀔 수 있다. 이것을 가변값이라고 한다.

기본형 데이터의 할당

=> 기본형 데이터는 모두 불변값입니다. (숫자, 문자열, boolean, null, undefined, Symbol ...)

이전 글에 컴퓨터의 메모리는 값을 변수 영역과 메모리 영역을 나누어 저장한다고 했는데요. 그것을 표로 이해 해보겠습니다.

let a;
a = 123;

컴퓨터의 메모리 저장방식

변수 영역

주소	・・・	1002	1003	1004	1005	・・・
데이터			이름: a 값: @5004

데이터 영역

주소	・・・	5002	5003	5004	5005	・・・
데이터				123

1. 위와 같이 변수 a를 선언했을 때,
   컴퓨터는 a라는 식별자를 남는 주소에 할당합니다.
   123이라는 값 또한 데이터 영역의 남는 주소에 할당합니다.
2. 변수 영역의 값에는 데이터 영역의 주소를 대입하여 참조합니다.

이 상황에서 데이터 영역의 값은 변하지 않는 불변값입니다.
새로운 값을 할당하려고 한다면 데이터 영역 5004 이외의 주소에서 새로운 값 입력후 주소를 변수 영역의 값으로 대치하죠.
=> 데이터 값 변경 없이주소만 바뀌는 겁니다.

참조형 데이터의 할당

=> 참조형 데이터는 기본형과는 다르게 조금 다른 방식으로 메모리의 저장됩니다.

let obj1 = {
	name: Elon Musk
    age: 50
};

변수 영역

주소	・・・	1002	1003	1004	1005	・・・
데이터			이름: obj1 값: @5004

데이터 영역

주소	5001	5002	5003	5004	5005	・・・
데이터	@7103			Elon Musk	50

객체 obj1의 변수 영역

주소	・・・	7103	7104	7105	7106	7107
데이터		이름: name 값: @5004	이름: age 값: @5005

위와 같이 나타낼 수 있습니다.
객체의 변수 영역이 따로 존재하게 되죠.
데이터 영역은 불변하고 변수 영역은 가변합니다.

만약 객체 obj의 age 값을 변경하려고 한다면, 객체의 변수영역의 주소값만 변경되는 것이죠.
=> 이렇게 변수 영역이 변하게 되어 참조 데이터는 가변값이라고 하는 것입니다.

오늘은 기본형과 참조형 데이터 타입이 구분되는 기준에 대해서 정리해봤습니다.
왜 이런 것 까지 알아야하지..? 라는 생각이 들 수도 있지만 더 나은 개발자가 되기 위해 기본원리를 깨우치는 것은 중요합니다.

어렵지만 반복해서 들여다보고 공부하다 보면 어렵지 않게 느껴질 때가 올 것입니다. 그때가 한층 더 성장하는 순간이 되겠죠..!

모두 열공합시다! ✍️