JavaScript에서의 데이터타입 3 _기본형과 참조형 2
코어 자바스크립트(정재남 저) 책을 기본으로 하여 자바스크립트를 공부하면서 내용을 정리하고자 한다.
01 데이터타입
변수 복사
기본형 데이터와 참조형 데이터의 차이를 본격적으로 알아보자.
기본형 데이터의 변수 복사
: 변수 a를 선언하고 10을 할당하면
1. 먼저 변수 영역의 빈 공간인 @1001을 확보하고 10을 데이터 영역에서 찾는다.
없다면 위와 같이 빈 공간(@5001)에 저장한 후 주소값을 @1001에 저장한다.
: 변수 a를 복사하면
1. 변수 영역의 빈 공간(@1002)을 확보하고 이름을 b로 지정한다.
2. 복사한 변수의 값인 @5001을 가져와 @1002의 값으로 저장한다.
참조형 데이터의 변수 복사
: 변수 obj를 선언하고 프로퍼티들을 할당하면
1. 변수 영역의 빈 공간(@1003)을 확보하고 obj라고 이름을 지정한다.
2. 변수의 값인 데이터 그룹을 담기 위해 데이터 영역에서 빈 공간(@5002)를 확보하고
별도의 변수 영역(@7000 ~ ? )을 생성한 후 그 주소값을 저장한다.
3. @7000에 num, @7001에 str을 각각 이름으로 저장한 후 각각의 프로퍼티의 값을 데이터 영역에서 찾는다.
4. @7000의 값인 10은 저장되어 있는 @5001이 있으므로 그대로 저장한다.
5. @7001인 'String'은 일치하는 데이터가 없으므로 새로운 공간(@5003)을 확보하고 저장한 후
그 주소값을 @7001의 값으로 저장한다.
: 변수 obj를 복사하면
1. 변수 영역에 빈 공간(@5004) 확보하고 obj2라고 지정한다.
2. 복사한 변수 obj를 검색해 값인 @5002를 가져와 @5004의 값으로 저장한다.
변수를 복사하는 과정에서 기본형과 참조형 모두 동일한 값을 복사한다.
변수 복사 후 값을 변경한다면?
기본형 데이터 변수값 재할당
b = 50;
변수 a를 복사한 변수 b의 값을 50으로 재할당하면 데이터 영역에서 50이 없으므로 새로운 공간(@5004)에 저장되고 그 주소값이 변수 b의 새로운 값으로 변경된다.
참조형 데이터의 객체 프로퍼티 값 재할당
그럼, 변수 obj를 복사한 변수 obj2의 프로퍼티 num의 값을 100으로 재할당하면 어떻게 될까?
obj2.num = 100;
obj2의 num의 값으로 재할당된 100은 데이터 영역에 없으므로 새로운 공간(@5005)에 저장되고,
obj2의 값 @5002의 변수 영역에서 식별자 num을 찾아 값을 @5005로 바꿔준다.
참조형 데이터의 경우, 변수가 가지고 있는 값은 데이터 영역의 주소값인데 그 값 자체가 객체의 변수영역의 주소값이다. 객체의 프로퍼티의 값을 변경하면, 복사된 변수의 값 역시 같은 주소값을 가지기에 그 주소값이 가리키는 객체의 변수영역의 값이 변경되며, 따라서 동일하게 값이 변경되는 것이다.
☝🏼 Difference ☝🏼
변수 b (@1002)의 값은 변경되고, 변수 obj2 (@1004)의 값은 변경되지 않는다.
기본형 데이터는 복사한 변수의 값을 변경하면, 바라보는 주소의 값이 변경되기 때문에 서로의 값이 달라진다.
참조형 데이터는 복사한 변수의 값을 변경하면, 바라보는 주소의 값이 같은 주소값이기에 값이 동일하게 변경된다.
- 코드로 보자면 다음과 같다.
💡 NOTICE
엄밀하게 말해서 모든 데이터 타입은 변수에 데이터를 할당하기 위해서는 주소값을 복사해야 한다.
그러하기에 결국 모든 데이터 타입은 참조형 데이터이다.
차이라면 기본형 데이터는 주소값 복사과정이 한 번 이루어지고, 참조형 데이터는 주소값을 복사하는 과정이 한 단계 더 있다고 보면 된다.
그럼, 객체를 통째로 변경하면 어떻게 될까?
객체를 통째로 복사하니 @1004의 값이 @5002에서 @5006으로 변경됨을 알 수 있다.
obj2에 할당된 데이터 자체가 주소값이 완전히 다른 객체이기 때문에 데이터 영역에 새로 저장되고 할당되는 것이다.
결국 참조형 데이터가 가변적이다.라는 말은 객체 내부의 프로퍼티의 값을 변경할 때만 성립한다.
👉🏻 다음 장에서 이어서 설명 👉🏻 Next Page
