[JavaScript] 콜 스택과 메모리 힙 :: 데이터의 저장 방식

JavaScript/JavaScript

[JavaScript] 콜 스택과 메모리 힙 :: 데이터의 저장 방식

프라이D 2022. 7. 11. 16:59

[JavaScript] 자바스크립트 엔진과 런타임

자바스크립트 엔진 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다. 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다. 각 브라우저별로 고유한 엔진을 가지

friedegg556.tistory.com

[JavaScript] 실행 컨텍스트와 콜 스택

자바스크립트 코드의 실행 컴파일 완료 후 코드의 실행 준비가 끝나면, 자바스크립트 엔진은 전역 실행 컨텍스트를 생성한다. 여기서 실행 컨텍스트란, 코드가 실행되기 위한 정보를 담고있는

friedegg556.tistory.com

위 게시물의 내용과 같이, 자바스크립트 엔진에는 콜 스택과 메모리 힙이 있다.
콜 스택은 원시타입 데이터의 저장 - 콜 스택 내의 실행 컨텍스트를 통해 저장된다.
메모리 힙은 참조 타입 데이터 (객체) 가 저장된다.
원시 자료형과 참조 자료형은 저장 방식에 따른 데이터의 분류이다.

원시 자료형

참조 타입을 제외한 나머지 자료형 (String, Number, Boolean, undefiend, null, , bigint, symbol)

let a = 'apple';

원시 자료형 혹은 원시 타입 데이터 (primitive data)는 값이 콜 스택에 바로 저장된다. (위 선언문에서는 문자열 'apple')
변수 a 에는 문자열 'apple' 값이 저장된 콜 스택 메모리의 주소 값이 저장된다.
콜 스택 메모리에는 값이, 변수에는 콜 스택 메모리 주소가, 변수는 콜 스택 내의 실행 컨텍스트에 저장된다.
원시 자료형은 한 번에 하나의 데이터만 보관할 수 있다. 그 이유는 크기가 고정되어 있을 때 어느 정도 크기의 데이터가 올지 예상할 수 있기 때문이다. 또 컴퓨터 초창기 기술적 한계로 하나의 정보만을 담고 있었기 때문에 '원시 primitive'라는 이름이 붙었다.

참조 자료형

만약 배열이 스택에 하나씩 저장되어 있다면 어떨까? 만약 아래의 예시와 같이 문자열로 저장되어 있다면 특정 위치에 존재하는 값을 찾고, 추가하고, 변경하고, 삭제하는 것이 힘들었을 것이다.

// 만약 배열을 원시 자료형처럼 저장해야 한다면..
let arr = '1, 2, 3, 4, 5 ...';

배열, 객체 같은 참조 자료형에는 여러개의 데이터가 담기고, 이 데이터들의 크기는 모두 제각각이다. 거기에 추가, 삭제에 따라 데이터의 크기가 달라지기 때문에 이런 타입의 데이터를 고정된 크기를 사용하여 저장하는 것은 비효율적이다.
만약 크기가 고정되어 있고, 그보다 더 큰 데이터를 저장해야 할 상황이 온다면, 하나의 메모리에 일부를 저장하고, 그 나머지를 다른 곳에 저장해야 하는 것이다.
따라서 객체 (객체, 배열, 함수 등) 은 크기가 고정되지 않은 메모리 힙에 저장되고, 그 메모리 힙의 주소가 콜 스택에 저장된다.
값을 읽어올 때, 콜 스택에 있는 메모리 힙의 주소를 참조하여 읽기 때문에 참조 타입 데이터라고 부른다.
원시 자료형과 마찬가지로 변수에는 콜 스택의 주소 값이 담긴다.

값의 복사

원시 자료형

let age = 30;
let oldage = age;
age = 31;

// age === 31
// oldage === 30
// age 변수를 oldage에 할당하고, 원본 age를 변경해도
// 서로 다른 스택에 저장되어 있으므로 영향을 주지 않는다.

참조 자료형

const me = {
age : 26,
firstName : 'hyejung'
};

// 프로퍼티 값 갱신
me.age = 25;
// 프로퍼티 동적 생성
me.lastName = 'park';

// you 에 me를 할당하면, me 객체의 주소 값이 복사된다.
const you = me;
you.age = 26;

// 변경을 해도 같은 값이 나오고, 비교해도 true가 나온다.
// me 와 you 변수 모두 같은 주소를 가리키고 있기 때문이다!
console.log(me)
// {age: 26, firstName: 'hyejung', lastName: 'park'}

console.log(me === you)
// true