자바스크립트의 데이터 타입은 2가지 종류
- 원시형(number,string,boolean,null,undefined,symbol)
- 참조형(object,array,function,date,regexp,map,weakmap,set,weakset)
원시형과 참조형을 어떤 기준으로 구분하는것일까??
원시형은 할당이나 연산시에 복제되고 참조형은 참조된다고 말을 하지만
엄밀히 말하면 둘 모두 복제를 하지만 원시형은 값이 담긴 주솟값을 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는점
원시형은 불변성??
숫자 10을 담은 변수 a에 다시 숫자 15를 담으면 a의 값은 문제없이 15로 변하는데 불변성이라는것은 무엇일까요??
자바스크립트에서 변수 선언
var a;위와 같이 변수를 선언하게 되면 메모리에 비어있는 공간 하나를 받게됩니다.
그 공간에 대한 식별자를 a로 지정합니다.
a = abc;이후 데이터를 할당하게 되면 메모리에서 a라는 이름을 가진 주소를 검색해 그곳에 데이터가 할당 됩니다.
하지만 실제로 해당 위치에 abc가 직접 저장되는것이 아니라
데이터를 저장하기 위한별도의 메모리 공간을 다시 확보해서 문자열을 저장하고, 그주소를 변수 영역에 저장하는 식으로 이뤄 집니다.
왜? 한단계를 더 거쳐가야 하는 것 일까?
- 데이터 변환을 자유롭게 하기 위함
- 메모리를 더욱 효율적으로 관리하기 위함
만약 미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면
변환한 데이터를 다시 저장하기 위해서는 확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업이 선행되어야합니다!
물론! 해당 공간이 메모리 마지막에 있다면 뒤로 늘리기만 하기 때문에 상관없지만
중간에 있으면 해당 공간을 늘리고 뒤에 저장된 데이터를 뒤로 옮겨야하기 때문에 이동시킨 주소를 각 식별자에 대해 다시 연결해야하는 작업을 해야되는 불상사가 일어납니다!
결국 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는것이 최적!
문자열 abc에 def를 추가한다고 했을때도
이미 abc가 저장된 공간에 abcdef를 넣는것이 아니라
abcdef라는 문자열을 새로 만들어
별도의 공간에 저장하고 그 주소를 변수공간에 연결합니다. 제거도 마찬가지입니다.
불변성
var b = 5;
var c = 5;
b = 7;b 에 숫자 5를 할당합니다.
그러면 컴퓨터는 5가 데이터영역에 있는지 확인하고 없으면 데이터 공간을 하나 만들어서 5를 저장합니다.
그리고 그 주소를 b에 저장합니다
그다음 줄에서는 c를 같은 수인 5를 할당하려고 하는데
컴퓨터는 데이터 영역에서 5를 찾고 이미 만들었으니 그 주소를 재활용합니다.
그다음 변수 b의 값을 7로 바꾸고자 하는데
그러면 기존에 저장된 5 자체를 7로 만드는 것이아니라 기존애 저장했던 7을 찾아서 있으면 재활용하고 없으면 새로 만들어서 b에 저장 합니다.
즉 5와 7을 모두 다른값으로 변경할 수 없습니다!
그래서 값 자체를 다른값으로 변경할 수 없고 변경은 새로 만든 동작을 통해서만 이루어지기 때문에 불변성입니다
가비지 컬렉팅을 당하지 않는한 영원히 변하지 않습니다!
가변성
원시값은 불변값이면 참조값은 가변값인가?
- 기본적인 성질은 가변값인경우가 많지만
설정에 따라 불가능한 경우도 있고 아예 불변값으로 활용하는 방안도 있습니다
참조형 데이터
var obj1 ={
a:1,
b:'bbb'
};- 변수영역의 공간을 확보하고 주소의 이름은
obj1으로 설정 데이터 저장공간에 여러개를 프로퍼티들을 등록해야하니 별도의 변수 영역을 마련하고 그주소를 저장- 각각의 영역의 주소에
a와b라는 프로퍼티 이름을 지정 - 데이터영역에 값이 있는지 확인 후 없으면 추가 있으면 그 주소에 있는값을 사용
위와 같이 형성이 되기 때문에 원시값 데이터와 달리 객체의 변수(프로퍼티) 영역이 별도로 존재한다는 점
즉 원시값과 같이 데이터 영역은 그대로 사용하고
값은 불변의 값이지만 객체의 변수 영역 에는 다른값을 대입할 수 있기 때문에
참조형 데이터는 가변값이다라고 하는것입니다
즉 다음과 같이 적용하게 된다면
var obj1 ={
a:1,
b:'bbb'
};
obj1.a=2 데이터 영역에서 2를 찾게 되고 없다면
새로운 데이터 영역에 2를 저장하고
해당 객체의 변수 영역의 값에 2의 주소를 저장합니다.
즉 새로운 객체가 만들어 진것이 아니라 기존의 객체 내부의 값만 바뀌게 되는것입니다
또한 만약 중첩된 참조일 경우에는 만약 내부 참조가 원시값으로 바뀌게 되어 아무도 참조하지 않는다면 GC로 인해 처리되어집니다.
그렇다면 복사를하게 되면 어떻게 될까??
원시값
var b = 5;
var c = b;
c=10- 변수에 대한 영역을 생성후 식별자를
b로 만듬 - 데이터 영역에
5가있는지 확인 후
있으면 ->5에 대한 주소를 참조하게 만들고
없으면 -> 데이터영역을 만들고5를 넣은다음 그값을 변수에서 참조하게 만듬 - 똑같이 변에 대한 영억을 생성후 식별자를
c로 만듬 b에대해 알아보고 그값을 찾아옴 즉b가 참조하는 주소값을 참조함c = 10
데이터 영역에10이 있는지 찾고
있으면 -> 그것을c가 참조하게 만들고
없으면 -> 새로 데이터영역에 똑같이 생성 후 참조
결론 값이 달라짐
참조값
var obj1 ={
a:1,
b:'bbb'
};
var obj2 = obj1
obj2.a=2 -
변수에 대한 영역 생성후
obj1을 식별자로지정 -
데이터 영역의 빈공간을 확보하고 여러개가 담겨야 하기때문에 별도의 변수 영역을 확보하고 주소 저장
-
각각의 영역에 a와 b를 식별자로 하고 데이터영역에 값이 있는지 보고 똑같이 수행
-
var obj2 =obj1
변수에 대한 영역 생성후 obj2로 지정 -
obj1에 대해 알아보고 그값을 참조함 -
obj2.a=2
데이터 영역에 2가 있는지 확인 후 똑같이 처리 하게 되는데 별도의 변수영역에 2에대한 값을 참조하게 변경결론
같은 값이 참조되게됨
즉 변경되는 메커니즘은 똑같지만 참조형은 한단계 더 거치게 되어 같은값을 참조되게 되고
원시값은 값이 변경되는것 처럼 보이는것!!!!
그래서 기본형은 값을 복사하고 참조형은 주솟값을 복사하는것이 아니라 결국 모두다 주솟값을 참조하는것!
만약 객체의 프로퍼티가 아니라 객체 자체를 변경해버린다면??
- 원시값의 변경과 같이 똑같이 변경됨
- 즉
가변은 객체의 내부의 프로퍼티를 변경할때만 적용된다는 것
객체 끼리 값 비교
const obj1 = { a: 1 };
const obj2 = { a: 1 ,b:1};
console.log(obj1 === obj2) //false
console.log(obj1.a === obj2.a) //true
console.log(obj1.a === obj2.b) //true
이것도 마찬가지로 똑같이 동작해서 다음과같이 나오는 것입니다.
- 변수 영역 생성:
obj1이라는 식별자를 위한 변수를 생성 - 객체 참조 영역 생성: 객체를 저장할 새로운 메모리 공간을 확보하고,
obj1이 이 공간을 참조하게 함 - 객체 내부 프로퍼티 처리: 객체 내부에서
a라는 프로퍼티를 위한 별도의 변수 영역을 생성- 데이터 영역에서 숫자
1이 있는지 확인하고, 없으면 새로 저장 후 참조
- 변수 영역 생성:
obj2라는 식별자를 위한 변수를 생성 - 새로운 객체 참조 영역 생성:
obj1과는 별개로 새로운 객체를 저장할 메모리 공간을 다시 확보하고,obj2가 이 공간을 참조하게 함 ( 이 부분 때문에 false) - 객체 내부 프로퍼티 처리:
a라는 프로퍼티를 위한 별도의 변수 영역을 생성- 데이터 영역에서 숫자
1이 이미 존재하는지 확인하고, 기존의1을 참조 (이것 때문에 true)
