콜스택 / 메모리힙 구조, 데이터저장 / 참조 원리

이 글은 카레유님의 글을 보고 공부한 내용을 작성하였습니다
[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 (tistory.com)

콜스택, 메모리힙이란?

JS는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다.

JS의 콜스택과 메모리 힙

1. 콜스택(Call stack)

• 원시타입 데이터가 저장된다.
• 실행컨텍스트(Execution Context)를 통해 1)변수 식별자(이름) 저장 2) 스코프 체인 및 this관리 3)코드 실행 순서관리 등을 수행

2. 메모리힙

• 참조타입 데이터가 저장된다
• 힙은 용량이 유연하게 늘어날 수 있다.

 

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

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

• 10이라는 값은 원시타입이므로 콜스택에 저장된다
• 변수 a에는 10이 저장된 콜스택 메모리의 주소값이 저장된다
• ** 변수 식별자 a 자체는 콜스택 상의 '실행 컨텍스트'의 '렉시컬 환경' 이라는 곳에 저장된다.

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

• 객체, 배열, 함수 등은 참조타입 데이터이므로 메모리 힙에 저장된다.
• 참조타입 데이터가 저장된 메모리힙의 주소값은 콜스택에 저장된다.
• 메모리힙의 주소값이 저장된 콜스택의 주소값은 각각 변수 b, c, d에 저장된다.
• ** 변수 식별자 b, c, d는 콜스택 상의 '실행 컨텍스트'의 '렉시컬 환경' 이라는 곳에 저장된다.

 

원시타입의 변수 데이터

1. 원시타입 변수 생성

원시타입 데이터 값은 콜스택에 저장되고 데이터값이 저장된 콜스택의 주소값은 변수 a, b에 각각 저장된다.

** 변수 a, b 식별자 자체는 실행컨텍스트의 렉시컬환경에 저장된다.

 

2. 원시타입 재할당 -1

변수 a에 20을 재할당하면 현재 메모리에 있는 값을 변경하는게 아닌 기존에 20을 저장하고 있는 메모리의 주소값으로 교체한다. a에 저장된 주소값은 20을 가리키도고 있던 b에 저장된 주소값과 동일해진다.

 

3. 원시타입 재할당 -2

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

 

4. 가비티 컬렉터

 

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

 

참조타입의 변수 데이터

1. 참조타입 변수 생성

참초타입 데이터는 메모리 힙에 저장된다.

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

 

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

**변수에 값을 재할당하는것이 아닌 변수에 저장된 주소값에 있는 데이터는 수정하는 것이다!

메모리힙에 저장된 배열의 값을 변경하더라도 배열이 저장된 메모리힙의 주소는 그대로이다!

즉, 콜스택에 저장된 메모리힙의 주소는 변경되지 않는다.

따라서 변수 a와 b에 저장된 주소값도 변하지 않는다. a와 b변수의 입장에서는 변한게 없는 것이다.

 

3. 참조타입 재할당

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

let으로 선언된 b에 새로운 배열을 할당하고 있다. 이 경우에는 메모리 힙에 새로운 공간이 확보되고 새로운 배열이 저장된다.

콜스택에 저장되는 메모리힙의 주소값도 새로운 주소값이 저장된다.

이때 콜스택도 기존에 저장되어 있던 주소값을 바꾸는게 아니라 새로운 메모리 공간을 확보해서 새로운 메모리힙의 주소값을 저장한다.

따라서 b에 저장되는 콜스택의 주소값도 변경된다.

** 참조타입은 동일한 구성의 객체를 생성하더라도 매번 새 메모리를 확보하여 새 객체를 생성한다!

 

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

 

const로 선언된 a에 다른 배열을 할당하려고 하면 에러가 발생한다.

메모리힙에 새로운 공간을 확보해 다른 배열을 저장하면 콜스택에서도 새로운 메모리를 확보해서 해당 메모리힙의 주소를 저장해야 하는데, 이는 결과적으로 const로 선언된 a에 저장된 콜스택의 주소값도 변경하게 만든다.

 

const로 선언된 변수는 본인에게 할당된 콜스택 주소값은 변경을 허용하지 않는다.

** 따라서 const로 선언하는 변수는 반드시 초기값을 할당하면서 선언해야한다.

 

4. 동일한 구성의 참조타입 데이터

 

참조타입 데이터는 동적으로 내부 요소가 변경될 수 있으므로 동일한 요소의 객체를 생성하더라도 메모리힙에 각각 별도의 메모리 공간을 확보하여 저장된다.

따라서 me !== you 이다.

 

참조)

[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 (tistory.com)

[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리