메모리 구조 / 변수 생성원리 / 가비지컬렉터

이 글은 카레유님의 글을 참조해서 작성하였습니다.
https://curryyou.tistory.com/

카레유

 

메모리 구조, 데이터 저장/참조 원리

메모리 구조

1. 메모리 구성

컴퓨터 메모리는 1byte(8bit) 크기의 메모리셀 여러개로 구성된다.

 

2. 메모리 셀

각 메모리 셀은 고유한 주소값을 가지며 메모리셀(1byte)단위로 데이터를 저장하고 읽는다.

 

3. CPU와 메모리 역할

CPU는 메모리에 저장된 값을 꺼내와 연산하고 연산 결과를 다시 메모리에 저장한다.

 

4. 데이터 저장 방식

용량이 큰 데이터는 메모리셀(1byte) 여러개를 사용해서 저장한다.

 

5. 데이터 읽기 방식

첫번째 메모리셀의 주소와 메모리셀의 갯수를 파악해 읽는다.

 

---

원시타입 변수 선언

출처 : 카레유 블로그

JS는 변수 선언과 초기화(할당)을 나누어서 수행한다.

var a = 10; 은 let a;와 a=10;으로 나누어서 수행되는 것이다. a변수에 10이 저장된 메모리의 주소값이 할당된다.

number타입(64비트 부동소수점 형식)의 데이터는 8바이트이므로 메모리셀 8개를 사용해서 저장된다.

변수 a에는 첫번째 메모리의 주소가 저장된다.

 

1. 변수 선언

JS는 코드를 실행하기 전에 선언문(변수, 함수, 객체 등)을 스캔한다 (호이스팅).

var a 선언문을 발견하고 a변수를 `실행 컨텍스트`라는 곳에 등록한다.

a에는 undefined를 할당한다. (let과 const는 변수 선언만 함)

 

2. 초기화

스캔작업이 완료된 뒤, 소스코드를 위에서부터 한줄 씩 실행하기 시작한다.

변수 a에 해당 메모리의 주소값을 저장한다.

 

3. 데이터 타입 체크

a=10;을 만나면 10이라는 값이 number타입의 64비트 부동소수점 형식임을 파악한다.

 

4. 새로운 메모리 확보 및 값 할당

number타입 크기인 8바이트의 메모리 공간을 새로 확보하고 10을 저장한다.(실제로는 이진수 8비트씩 8개 바이트로 저장)

** 기존의 메모리공간에 할당된 undefined를 10으로 변경하지 않음!! 새로운 공간 확보!

 

5. 주소값 저장

a변수에 10이 저장된 새로운 메모리의 첫번째 셀 주소값을 저장

---

원시타입 변수 참조

console.log(a); 에서처럼 변수 a를 참조하면 무슨 일이 일어날까?

변수에 저장된 것은 메모리 주소값이지만 변수를 참조하면 주소값이 아니라 주소값이 가리키는 메모리에 할당된 2진수값을 해석한 값이 반환된다.

 

1.주소값 확인

a변수에 저장된 주소값 확인(첫번째 메모리셀의 주소)

 

2.데이터 타입 체크 -> 메모리 크기 파악

number타입이므로 8byte의 메모리 셀이 사용되었음을 파악

 

3. 데이터 읽기

첫번째 주소값에서부터 8byte만큼의 데이터를 읽는다.

 

4. 값의 해석 및 반환

메모리에서 읽어들인 2진수 값을 number 타입의 숫자 10으로 해석하여 반환한다.

** 만약 string타입이라면 문자열로 해석해서 반환한다.

 

---

값의 재할당

값을 재할당하면 기존 메모리에 저장된 값을 변경하는것이 아니라, 새로운 메모리공간을 확보하여 값을 저장하고 a변수에 새로운 메모리주소값을 할당한다.

 

1. 데이터 타입 체크

20은 number타입의 64비트 부동소수점 형식임을 파악

 

2. 새로운 메모리 공간 확보

8바이트(64비트) 메모리 공간을 새로 확보(메모리셀 8개)

 

3. 새로운 값 할당

8바이트의 메모리셀에 20을 할당(2진수로)

 

4. 변수 a의 주소값 변경

a변수에 새로운 메모리의 주소값을 저장

 

5. 기존 값 제거

더 이상 참조되지 않는 기존 값은 `가비지컬렉터`에 의해 메모리에서 해제

 

만약, 이미 20이 저장된 메모리 공간이 있다면?

새로 메모리공간을 확보하지 않고 20이 저장되어 있는 기존 메모리주소값을 변수에 할당한다.

let a = 10;
let b = 20;
a = 20;

위 코드를 실행하면 a와 b에 저장된 값(메모리 주소값)이 동일해진다. 따라서 a와 b에 20이 동일하게 할당된다.

만약 b에 30을 재할당하면 변수 b의 주소값이 가리키는 메모리에 저장된 20을 30으로 교체하는 것이 아닌, 새로운 메모리공간을 확보하여 30을 저장하고 변수 b에 저장된 값(메모리 주소값)을 새로운 값으로 교체한다.

더 이상 참조되지 않는 10은 JS에 의해 적절한 시점에 메모리에서 해제된다.

 

가비지 컬렉터

더 이상 참조되지 않는 값들은 가비지 컬렉터에 의해 적절한 시점에 메모리에서 자동 해제된다.

 

참조)

[자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 (tistory.com)

[자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터