본 글은 정재남님의 저서 <코어 자바스크립트>를 읽고 정리한 내용입니다.
본 글에서 사용한 메모리 이미지들은 이해를 돕기 위해 메모리를 아주 간략화한 예 입니다.
들어가기 전에
이전 포스팅에서는 기본형과 참조형 데이터에는 어떤 것들이 있고, 차이점에 대해 간단히 살펴보았다. 그 과정에서 기본형 데이터를 할당할 때 메모리에서 일어나는 변화들에 대해서도 알아보았다.
이번 포스팅에서는 참조형 데이터를 깊게 이해 해 보려고 한다.
포인트는 두 가지 이다.
- 참조형 데이터 할당시 일어나는 메모리 변화
- 참조형 변수 복사시 일어나는 메모리 변화
참조형 데이터 할당
01 var obj1 = {
02 a: 1,
03 b: 'bbb'
04 };위 코드를 실행하면 나타나는 메모리 영역의 변화는 아래와 같다.
- 변수 영역의 빈 공간 @102를 확보하고, 그 주소의 이름을 obj1으로 지정
- 임의의 데이터 저장 공간에 데이터를 저장하려고 보니
여러 개의 프로퍼티로 이뤄진데이터 그룹. 이 그룹 내부의 프로퍼티를 저장하기 위해별도의 변수 영역을 마련하고, 그 영역의 시작 주소(@703 ~?)을 @5001에 저장 - @703, @704에 각각 a와 b라는 프로퍼티 이름을 지정
- 데이터 영역에서 숫자 1을 검색. 없으니 @503에 저장하고 이 주소를 @703에 저장
- 데이터 영역에서 문자열 'bbb'를 검색. 없으니 @504에 저장하고 이 주소를 @704에 저장
참조형 데이터가 기본형 데이터와 다른 점은 프로퍼티의 변수를 저장하기 위한 별도의 메모리 공간이 필요하다는 점이다.
참조형 변수 복사
01 var obj1 = {
02 a: 1,
03 b: 'bbb'
04 };
05
06 var obj2 = obj1;위 코드 6번째 줄을 실행한 결과는 아래와 같다.
- 변수 영역에서 임의의 빈 공간 @103을 확보하고, 그 주소의 이름(식별자)를 obj2로 지정한다.
- 그 뒤, 변수 영역에서 obj1에 저장 된 값을 찾아 obj2의 값에 저장한다.
참고로 기본형 데이터도 변수 복사시 참조형 데이터와 같은 동작을 한다.
객체의 프로퍼티 변경
이제 obj2의 프로퍼티를 변경시켜 보자.
01 var obj1 = {
02 a: 1,
03 b: 'bbb'
04 };
05
06 var obj2 = obj1;
07
08 obj2.a = 2;위 코드 8번째 줄을 실행시킨 결과는 아래와 같다.
위 메모리 이미지를 보면 @103의 값이 변경되지 않은 것을 알 수 있다. 기본형 데이터의 경우 이 과정에서 다른 데이터 주소값을 가리키게 된다. 이 점이 기본형 데이터와 참조형 데이터의 가장 큰 차이점이다.
따라서 obj1과 obj2는 여전히 같은 객체를 가리키고 있다. 이를 코드로 나타내면 아래와 같다.
console.log(obj1 === obj2) // true객체 자체를 변경
그럼 내부 프로퍼티가 아닌 객체 자체를 변경시키면 어떻게 될까?
01 var obj1 = {
02 a: 1,
03 b: 'bbb'
04 };
05
06 var obj2 = obj1;
07
08 obj2 = { c: 2, d: 'ddd'};새로운 객체를 생성하면 데이터 영역에 새로운 공간을 잡고 객체를 저장하고 그 주소를 변수 영역의 obj2의 값에 저장한다.
obj1과 obj2의 값이 달라졌다. 흔히 자바스크립트에서 참조형 변수는 가변 값 이라고 한다. 이 때 가변이라는 말은 객체 자체를 변경하는 경우가 아니라 내부 프로퍼티 값을 변경할 때만 성립하는 말이다.
