변수(variable) VS 상수(constant)
바꿀수 있으면 변수, 바꿀수 없으면 상수
하지만 불변값과 상수는 같은 개념이 아니다.
변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리 이다.
한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재 할당할수 있는지 여부 => 변수 or 상수
불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 의 메모리이다
✔️ 기본형 데이터인 숫자, 문자열, boolean, null, undefined, Symbol은 모두 불변값이다.
var obj = {
a : 1,
b : 'bbb'
};
"bbb"
역시 마찬가지.✔️ 기본형 데이터와의 차이는 '객체의 변수(프로퍼티) 영역'이 별도로 존재한다는 점이다.
var obj1 = {
a : 1,
b : 'bbb'
};
obj1.a = 2; // obj1의 a의 프로퍼티를 재 할당 해보자.
var obj1 = {
x : 3,
arr : [3,4,5] //새로운 참조형 데이터 할당.
};
obj.arr[1]을 찾아가는 과정을 설명해보자!
- 최상단 주소에서 타고 타고 들어간다.
var obj1 = {
x : 3,
arr : [3,4,5]
};
obj1.arr = 'str'; // 새로운 문자열 할당 한다면?!
'str'
이 있는지 검사하고, 그 데이터 영역(@5006)주소를 기존 arr이 있던(@7104)에 저장합니다.가비지 컬렉터는 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거 합니다. 수거된 메모리는 다시 새로운 값을 할당 할 수 있는 빈 공간이 됩니다.
var a = 10;
var b = a; // 기본형 복사
var obj1 = {c : 10, d : 'ddd'};
var obj2 = obj1; // 참조형 복사
1. 참조형 데이터 저장
1. 변수 영역의 빈 공간 (@1003)을 확보하고 식별자를 obj1로 지정합니다.
2. 데이터 영역의 빈 공간 (@5002)을 확보하고 데이터 그룹이 담겨야 하기때문에 (@5002)의 변수 영역을 따로 생성한다.
3. (@5002)의 변수영역의 주소(@7103, @7104)을 확보하여 데이터 영역의 주소(@5002)에 (@7103,@7104)를 저장합니다.
4. (@7103)에는 식별자 c를, (@7104)에는 식별자 d를 입력한 다음, c에 대입할 값 10을 데이터 영역에서 검사합니다.
5. 데이터 영역(@5001)에 이미 10이 저장되있으므로 이 주소(@5001)을 (@7103)에 연결합니다.
6. d에 대입할 문자열 "ddd"가 데이터 영역에 없으므로, (@5003)에 빈 공간을 만들어 "ddd"를 저장한후 (@7104)영역에 연결합니다.
2. 참조형 데이터 복사
1. 변수 영역의 빈 공간 (@1004)를 확보하고 식별자를 obj2로 지정합니다.
2. 이제 식별자 obj1을 검색해(@1003) 그 해당하는 값인 (@5002)를 들고 (@1004)주소에 대입합니다.
변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점이 동일합니다.
var a = 10;
var b = a; // 기본형 복사
var obj1 = {c : 10, d : 'ddd'};
var obj2 = obj1; // 참조형 복사
b = 15;
obj2.c = 20;
결론 : 변수 a와 b는 서로 다른 주소(@5001), (@5004)를 바라보게 되었지만,
변수 obj1과 obj2는 여전히 같은 객체(@5002)를 바라보고 있다.a !== b obj1 === obj2
💡 추가로 자바스크립트의 어떤 데이터 타입이던 변수에 할당하기 위해서는 주소값을 복사해야하기 때문에, 모든 데이터 타입은 참조형 데이터일 수 밖에 없다. (기본형도 결국 주솟값을 참조한다!)
💡 기본형 데이터와 참조형 데이터의 가장 큰 차이점
- 기본형 데이터는 주소 값을 복사하는 과정이 한 번만 이루어지고, 참조형은 한 단계를 더 거치게 된다.
- 참조형 데이터가 '가변값'이라고 설명할 때의 '가변'은 참조형 데이터 자체를 변경할 경우가 아니라 그 내부 프로퍼티를 변경할 때만 성립한다.
var a = 10;
var b = a; // 기본형 복사
var obj1 = {c : 10, d : 'ddd'};
var obj2 = obj1; // 참조형 복사
b = 15;
obj2 = { c : 20, d: 'ddd' }; // 객체 자체를 변경
이렇게 내부 프로퍼티가 아닌 객체 자체를 변경하게 되면 메모리 영역의 새로운 객체가 저장되고 그 새로운 주소를 변수 obj2에 저장한다.