참조형, 기본형
자바스크립트의 데이터 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 분리된다.
📌 기본형 : Number, String, Boolean, null, undefined, Symbol
Primitive Types
let a; a = 10; let b = 'abc'; b = false; let c = b;
변수명 a 에 기본형인 10을 할당하는 과정은 다음과 같다.
1.컴퓨터는 우선 메모리안에 데이터를 담을 공간을 미리 확보한다.
2.확보한 주소값을 변수명 a 와 매칭한다.
3.이후 a에 10을 할당하게 되면 컴퓨터는 변수 a를 찾아서 변수 a와 매칭되어 있는 주소값인 @313번을 읽고 그 주소로 이동해서 그 공간에 10을 집어 넣는다.
👇 let b = abc 도 같은 방식으로 할당된다.👇
👇 b = false; 는 어떻게 처리될까? 👇
1. 변수명들 중에서 b가 있는지 검색 => 없다면 앞서 진행한대로 선언을 한다.
2. 기존b 는 현재 메모리상에 존재하기 때문에 b 가 가리키는 주소(@314)값을 읽어서 해당 주소위치로 이동한 다음 그 자리에 false 를 덮어쓴다.
👇 var c = b; 는 어떻게 처리될까? 👇
1. var c = b; 을 수행하면 먼저 var 키워드가 있으니 선언과정 go!
2. 빈 공간인 315번을 확보하고 그 주소를 변수 c 와 매칭시킨다.
4. 314번으로 이동하여 b값인 false 값을 읽어옵니다.
5. 읽어들인 값 false 를 가지고 c 를 찾아서 c가 가리키는 315번 공간에 false 를 넣게됩니다
이러한 것을 선언과 할당이라고 한다.
선언 과정 : 공간을 확보하고 변수명과 주소를 매칭시키는 과정
할당 과정 : 해당 변수가 가리키는 주소의 공간에 데이터를 저장하는 과정
코드로 살펴보자
a 는 1로 할당되었고 b는 a로 할당했다.
이후 a에 10을 더하면 b는 어떻게 될까?
let a = 1;
let b = a;
a += 10;
console.log(a); // 11
console.log(b); //1console.log(b)가 1인 이유는 b는 a의 값을 복사해서
할당했기 때문에 a 값을 지지고 볶아도 b는 변하지 않는다.
📌 참조형 : 배열(Array), 함수(Function), 정규표현식(RegExp)
References
let obj = { a : 1, b : 'b' }; var obj2 = obj;
👇let obj = { a : 1, b : 'b' }은 참조형인데 어떻게 할당될까?👇
참조형 데이터들은 프로퍼티(property)와 데이터(data), 즉 key : value로 묶인 쌍들로 이루어져 있다.
프로퍼티명은 변수와 비슷한 성질을 지니고 있고 변수명과 실제 데이터는 주소값을 통하여 연결되어 있는데 프로퍼티와 데이터 사이에서도 같은 동작을 한다.
👇기본형 타입과 마찬가지로 메모리 공간을 확보하고 주소를 변수명과 매칭시키는 과정은 동일하다.👇
👇각 프로퍼티명과 value 가 담길 주소를 매칭하기 위해서 공간을 새로 확보한다.
여기선 새로 임의로 1011번에 공간을 확보한다.👇
👇그리고 나서 1012번에 a 프로퍼티의 value 가 담길 공간을 확보하고 확보된 주소를 a 프로퍼티와 매칭시킨다.👇
👇그리고 1013번에 b 프로퍼티의 value 가 담길 공간을 확보하고 그 할당된 주소의 1013번을 b 프로퍼티와 매칭시킨다.👇
👇이제 다시 각각의 주소값마다 기본형 데이터값을 할당한다.
1012번에는 1 을 1013번에는 'b' 가 저장된다.👇
👇이제 413주소를 에 1011번을 매칭하여 obj할당을 마친다.👇
👇let obj2 = obj;은 어떻게 할당될까?👇
obj2 에 기존 obj 를 할당하라고 하면 어떠한 일이 벌어질까?
414번에 공간을 확보하고 obj2 와 매칭시킨 다음 obj 가 가리키고 있는 데이터인 1011번이라고 하는 주소를 obj2 에 할당하게 된다.
이것이 바로 참조가 이루어지는 형식이다.
객체는 어딘가에 따로 저장되어 있는데 그 객체가 저장된 주소만을 복사해 온다.
코드로 살펴보자
obj2.a 는 10으로 할당하였다.
그렇다면 원본 obj.a 도 값이 바뀌였을까??
let obj = { a : 1, b : 'b' };
var obj2 = obj;
obj2.a = 10;
console.log(obj2.a); // 10
console.log(obj.a); // 10console.log(obj.a)가 10으로 바뀐 이유는 obj2 객체가 obj 객체와 다른 새로운 객체를 만든 것이 아니라 본래 obj 가 바라보던 객체를 함께 바라보고 있기 때문이다. 즉, obj === obj2 는 완벽히 동일한 객체를 참조하기 때문에 한곳에서 값을 변경하게 되면 같이 참조하고 있는 곳에서도 값이 변경된다.
중첩된 객체 타입😾
var obj3 = { a : [4, 5, 6] }; obj.a = 'new';
참조형안에 프로퍼티가 또 참조형인경우를 nested, 즉 중첩되어 있다고 표현한다.
👇공간을 확보하고 선언과정은 위에서 살펴본 것과 같이 동일하다.👇**
👇1185번에 a 프로퍼티의 value 를 할당해야 하는데 할당하려고 보니 그 값이 인덱스로 이루어진 value 값들의 집합인 배열이다.
그래서 1326 ~ 1328번까지 공간을 다시 확보하고 1185번에는 확보된 공간의 주소값들로 이루어진 배열이 넣어지게 된다.👇
👇obj.a = 'new'은 어떻게 할당될까?👇
그런데 만약 이 상황에서 'new' 라고 하는 문자열인 기본형 데이터를 obj3.a 에 할당하라고 하면 어떻게 될까?
배열 정보에 있던 자리에 순수 데이터인 new 문장열이 들어옴으로써 1326 ~ 1328번까지 저장되어 있던 데이터들은 링크가 사라진다.
즉, 주소를 참조하고 있는 곳이 어디에도 없게 되게 되는 것이다.
이들은 가비지 콜렉터라고 불리는 메모리 청소기인 청소 대상에서 언젠가 쥐도새도 모르게 사라지게 된다.
가비지 콜렉터 🥷🏽
런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로
수거 대상들을 수거(collecting)한다. 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다.
