자바스크립트 메모리 구조 - 콜 스택, 메모리 힙

😎Javascript] 자바스크립트 메모리 구조 - 콜 스택, 메모리 힙

메모리 (RAM) - Random Access Memory
기본적으로 컴퓨터의 데이터를 저장하고 처리하는 역할을 하며
데이터 처리 속도가 빠르지만 컴퓨터 또는 해당 프로그램이 종료되면 저장된 데이터가 모두 사라진다

✅  콜 스택, 메모리 힙이란?

1. 콜스택(Call Stack)

원시타입 데이터가 저장된다(string, number, boolean, null, undefined, bigint, symbol)

실행컨텍스트(Execution Context)를 통해 아래 작업들을 제어한다

1. 변수 식별자(이름) 저장
2. 스코프 체인 및 this 관리
3. 코드 실행 순서 관리 등을 수행

2. 메모리 힙(Memory Heap)

참조타입 데이터가 저장된다 (원시타입을 제외한 타입 - 배열, 객체, 함수, Date, RegExp 등)

 

✅  콜 스택, 메모리 힙의 데이터 구조

콜스택에는 원시타입 데이터가 저장되고 메모리 힙에는 참조타입 데이터가 저장된다

1. 원시타입 데이터 (파란 a)

- 해당 변수가 가지고 있는 10이라는 값(number) 자체는 원시타입이므로 콜스택에 저장된다
- 변수 a에는 10이 저장된 콜스택 메모리의 주소 값이 저장된다
*변수 식별자 a 자체는 콜스택 상의 '실행컨텍스트(Execution Context)의 렉시컬 환경(Lexical Environment)'이라는 곳에 저장된다

2. 참조타입 데이터 (빨간 b, c, d)

- 배열, 객체, 함수는 참조타입이므로 메모리 힙에 저장된다
- 참조타입 데이터가 저장된 메모리 힙의 주소는 콜스택에 각각 저장된다
- 메모리 힙의 주소 값이 저장된 콜스택 주소 값은 해당 변수에 각각 저장된다
*마찬가지로, 변수 식별자 b, c, d 이름 자체는 콜스택 상의 '실행컨텍스트(Execution Context)의 렉시컬 환경(Lexical Environment)'에 저장된다

 

✅  콜 스택, 메모리 힙의 데이터 관리

원시타입

1. 원시타입 변수 생성

원시타입 데이터는 콜스택에 각각 저장되고 데이터 값이 저장된 콜스택의 주소는 해당 변수에 각각 저장된다
변수 a, b 식별자 자체는 실행컨텍스트의 렉시컬 환경에 저장된다

 

2. 원시타입 재할당 - Case1

변수 a에 새로운 값 20(number)을 재할당하면 변수 a는 본인 메모리에 저장된 값을 변경하는 것이 아니라
기존에 20이라는 값을 저장하고 있는 메모리 주소의 값으로 교체하고 a와 b는 동일한 주소 값을 갖게 된다

 

3. 원시타입 재할당 - Case2

변수 b에 새로운 값 30(number)을 재할당하면 본인의 주소 값이 가리키는 메모리에 저장된 20이라는 값을 30으로 변경하는 것이 아니라 새로운 메모리를 확보해서 30을 저장하고, 해당 메모리 주소 값을 기존 b에 저장된 주소 값과 교체한다

 

4. 가비지 컬렉터

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

가비지 컬렉터
사용처가 없어진 객체가 차지하는 메모리를 자동으로 해제하는 자바스크립트의 내장된 기능

 

참조타입

1. 참조타입 변수 생성

변수 a와 b에 할당하는 배열과 같은 참조타입 데이터는 메모리 힙에 저장되고

메모리 힙의 주소 값은 콜 스택에 저장되며, a와 b에는 해당 콜스택의 주소 값이 각각 저장된다

a는 const로, b는 let으로 선언되었다

 

2. 참조타입 데이터의 값 변경

변수에 값을 재할당한게 아니라 변수에 저장된 데이터를 수정했다는 것이 중요하다

메모리 힙에 저장된 배열의 값을 변경하게 되면 해당 메모리 힙의 주소는 그대로다

즉, 콜스택에 저장된 메모리 힙의 주소는 변경되지 않으며 변수 a와 b에 저장된 주소 값도 변하지 않는다

 

3. 참조타입 재할당

1) let으로 선언된 참조타입의 재할당

let으로 선언되었던 b에 새로운 값(배열)을 재할당하면 메모리 힙에 새로운 주소가 확보되고 새로운 값이 저장된다
그리고 콜스택에 저장되었던 기존 메모리 힙의 주소 값의 변경이 필요해진다
이때 콜스택에 저장되었던 메모리 힙의 주소 값을 바꾸는게 아니라 새로운 메모리를 확보해서 방금 전에 새로 생성된 메모리 힙의 주소 값을 저장한다 따라서 변수 b에 저장되는 콜스택의 주소 값도 변경된다

참조타입은 동일한 구성의 데이터를 재할당하더라도 매번 새 메모리를 확보하여 새 객체를 생성한다

 

2) const로 선언된 참조타입의 재할당

const로 선언되었던 a에 다른 배열 값을 재할당하면 에러가 출력된다
다른 배열 값을 재할당할 경우 메모리 힙에 새로운 공간을 확보하여 해당 값을 저장하고 콜스택에서도 새로운 메모리를 확보해서 해당 메모리 힙의 주소 값을 저장해야하는데, 결과적으로 const로 선언되었던 a에 저장된 콜스택의 주소 값도 변경이 필요하게 된다
하지만 const로 선언된 변수는 본인에게 할당된 콜스택 주소 값의 변경을 허용하지 않기 때문에 이 코드는 실행이 불가능하다

즉, const는 본인이 참조하고 있는 메모리 힙 값의 변경이 불가능한 것이 아니라
본인에게 저장된 콜스택 주소 값의 변경이 불가능한 것이다
따라서 const로 선언할 변수는 초기 값의 할당이 반드시 필요하다

 

💡 동일한 구성의 참조타입 데이터 비교

const personA = {
  name: 'person',
  age: '20'
}

const personB = {
  name: 'person',
  age: '20'
}

const numberA = [1, 2, 3]
const numberB = [1, 2, 3]

객체, 배열과 같은 참조타입 데이터는 내부 요소가 동적으로 변경될 수 있기 때문에

동일한 구성의 객체를 생성하더라도 메모리 힙에 각각 별도의 메모리 공간을 확보하여 저장한다

따라서 personA !== personB , numberA !== numberB가 된다

 

 

 

 

 

 

참고

아래 블로그의 자료를 활용했습니다

https://curryyou.tistory.com/276

 

그외 참고

https://developer.mozilla.org/ko/docs/Glossary/Primitive

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_management

https://charming-kyu.tistory.com/19