※ 코어 자바스크립트책을 공부하며 정리하는 글입니다.
1-4. 기본형 데이터와 참조형 데이터
1-4-1. 불변값
기본형 데이터인 숫자, 문자열, boolean, null, undefined, Symbol은 모두 불변값이다.
(불변성 여부를 구분할 때의 대상은 데이터 영역 메모리이다.)
왜 그런지 알아보자.
① 변수 a에 숫자 5를 할당
컴퓨터에서는 데이터 영역에서 5를 찾고, 없으면 데이터 공간을 하나 만들어서 저장하고 그 주소를 a에 저장한다.
② 변수 b에 숫자 5를 할당
마찬가지로 컴퓨터에서는 데이터 영역에서 5를 찾는데, 이미 만들어놓은 값이 있으니 그 주소를 재활용한다.
③ 변수 b에 숫자 7을 재할당
변수 b의 값을 7로 바꾸기 위해, 기존의 값 자체를 바꾸는 것이 아니라 데이터 영역에서 7을 찾고 있으면 재활용하고 아니면 새로 만들어서 그 주소를 저장한다.
즉, 변경은 새로 만드는 동작을 통해서만 이뤄지는데, 이것을 불변값의 성질이라고 한다.
1-4-2. 가변값
기본형 데이터는 모두 불변값이라고 하였는데, 그럼 참조형은 모두 가변값일 수도 있다는 생각이 드는데 과연 맞을까?
우선, 참조형 데이터를 변수에 할당하는 과정부터 확인해보자.
① 변수 영역의 빈 공간(@102)를 확보하고 그 주소의 이름을 obj1로 지정한다.
② 데이터 영역에 저장하려고 보니, 여러 개의 프로퍼티로 이루어진 데이터 그룹이기 때문에, 그 프로퍼티들을 저장하기 위한 별도의 변수 영역을 마련하고, 그 영역의 주소(@801~?)를 @501에 저장한다.
③ @801과 @802에 각각 a와 b라는 프로퍼티 값을 지정한다.
④ 데이터 영역에서 숫자 1을 검색하는데 없으니 임의로 @503에 저장 후 이 주소를 @801에 저장한다. 마찬가지로 abc 또한 검색하는데 없으니 임의로 @504에 저장 후 이 주소를 @802에 저장한다.
🧨 기본형 데이터와의 차이점 하나
기본형 데이터와의 차이는 객체의 변수(프로퍼티) 영역이 별도로 존재한다는 점이다.
객체가 별도로 할애한 영역은 변수 영역으로, 데이터 영역은 기존의 메모리 공간을 그대로 활용하고 있다.
데이터 영역에 저장된 값들은 모두 불변값인데, 변수에는 언제든지 다른 값을 대입할 수 있다.
이 부분에서 참조형 데이터는 불변하지 않다라고도 할 수 있는 것이다.
위의 그림을 보면, obj1의 a 프로퍼티에 숫자 2를 할당하려고 한다.
데이터 영역에 숫자 2는 없으므로 빈 공간인 @505에 저장하고, 이 주소를 @801에 저장한다.
즉 아래의 그림과 같은 상황이 일어난다.
자세히 보면, 변수 obj1이 바라보고 있는 주소인 @501은 변화가 없다.
즉, 새로운 객체가 바뀐 것이 아니라 기존의 객체 내부의 값만 바뀐 것이다.
1-4-3. 변수 복사 비교
그럼 기본형 데이터와 참조형 데이터의 차이를 좀 더 본격적으로 확인해보자.
이렇게 복사되었다.
변수 복사 이후 값 변경 결과 비교(1) - 객체의 프로퍼티 변경
복사 후 값을 재할당 해보자.
위의 그림을 보면 기본형 데이터를 복사한 변수 b의 값을 바꾸자 @102의 값이 달라진 방면에
참조형 데이터를 복사한 변수 obj2의 프로퍼티 값을 바꾸자 @104의 값은 달라지지 않았다.
obj1.c의 값도 바뀌는지 궁금해져서 콘솔창을 찍어보았더니 역시나 다음과 같은 결과가 나왔다.
즉 아래와 같다.
a !== b
obj1 === obj2변수 복사 이후 값 변경 결과 비교(2) - 객체 자체 변경
만약에 객체의 프로퍼티가 아니라 객체 자체를 변경한다면 어떤 결과가 나올까?
아래의 이미지를 참고하면, 변수 b와 마찬가지로 obj2도 새로운 객체를 할당함으로써 값이 직접 변경된 것을 알 수 있다.
콘솔 창을 찍어보면 다음과 같은 결과가 나온다.
즉, 참조형 데이터가 '가변값'이라고 설명할 때의 '가변'은 그 내부의 프로퍼티를 변경할 때'만' 성립된다.
