카테고리 없음

[Javascript] Primitive(Value) vs Object(Reference)

chaenii 2024. 1. 24. 21:21

Javascript에서 변수를 선언하고 정의했을 때, 메모리에 어떻게 저장되는지 알아보자.

 

메모리 구조

프로그램이 실행되기 위해서는 먼저 프로그램이 메모리에 로드(load)되어야 한다.

프로그램은 운영체제가 제공하는 메모리 공간에 저장되어 사용된다.

 

메모리 공간은 다음의 그림과 같이, 코드 영역, 데이터 영역, 힙 영역, 스택 영역으로 나뉜다.

 

코드 영역 

- 실행할 프로그램의 코드가 저장되는 영역이다.

- CPU는 코드 영역에 저장된 명령어를 하나씩 가져가서 처리한다.

 

데이터 영역

- 프로그램의 전역 변수와 정적 변수가 저장되는 영역이다.

- 프로그램의 시작과 함께 할당되며, 프로그램 종료 시 소멸된다.

 

스택 영역 (정적 메모리 할당)

- 함수의 호출과 관계되는 지역 변수와 매개변수가 저장되는 영역이다.

- 함수의 호출과 함께 할당되며, 함수 호출이 완료되면 소멸된다.

- 컴파일 타임에 크기를 알고 있는 데이터이다.

- 메모리의 높은 주소에서 낮은 주소의 방향으로 할당된다.

 

힙 영역 (동적 메모리 할당)

- 사용자가 직접 관리할 수 있는 메모리 영역이다.

- 메모리 공간이 동적으로 할당되고 해제된다.

- 메모리의 낮은 주소에서 높은 주소의 방향으로 할당된다.

 

 

메모리의 힙과 스택

 

스택은 자바스크립트가 정적 데이터를 저장하는데 사용되는 자료구조이다.

정적데이터는 크기가 고정되어있기 때문에 JS 엔진은 각 값에 대해 고정된 크기의 메모리를 사전에 할당한다.

자바스크립트에서는 원시 값(string, number, undefined, null 등)과 객체 및 함수를 가리키는 참조가 해당된다.

 

은 자바스크립트가 객체와 함수를 저장하는 데이터를 저장하는 자료구조이다.

고정된 크기가 아니기 때문에 동적 메모리 할당이라고 한다.

 

Javascript의 참조

다음의 코드를 순차적으로 읽어보자.

 

1) let a = 1

- 정적 데이터 (number)이므로 stack area 저장한다.

 

2) let b = a

- 정적 데이터 (number)이므로 stack area 저장한다.

 

3) let arr1 = [1]

- 동적 데이터 (array)이다.

- stack area에 실제 배열 내의 값을 담은 heap area 주소 값을 value로 저장한다.

- heap area에 실제 배열 값이 저장된다.

 

4) a = 2

- 자바스크립트는 동적타입언어이므로, 같은 변수명으로 변수를 선언하면, 메모리에서 아예 새로운 주소로 재할당한다.

 

5) arr1.push(2)

- push로 arr1 배열에 값 2를 추가한다.

- 배열의 주소 자체는 변경되지 않는다.

 

6) arr2 = [1, 2]

- arr2 배열의 주소 값이 변경되므로, stack area에 저장된 값이 바뀐다. (&201 -> &202)

- 기존에는 arr1, arr2가 같은 heap 영역을 참조하고 있었지만, 현재는 아니다.

 

 

동적 타입 언어인 Javascript에서 원시 값과 객체 및 함수의 값이 메모리에 어떻게 할당되는지 알아보았다.
다음으로는 메모리를 효율적으로 사용하도록 도와주는 가비지 컬렉터에 대해서 알아보고자 한다.

Reference

메모리 구조

데이터 저장 참조 원리

JS의 메모리 관리

 

반응형