[JS] 콜 스택과 메모리 힙

우리가 평소에 자바스크립트에서 선언하는 변수, 상수, 배열, 객체들은 어디에 저장될까?

 

콜 스택, 메모리 힙이란?

자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어 있다.

자바 스크립트는 단일 스레드 언어로 Call Stack도 하나이다.

즉 하나씩 콜스택이 처리한다는 의미이다.

 

콜 스택(Call Stack)이란

원시 타입(숫자, 문자열 등) 데이터가 저장된다.

실행 콘텍스트를 통해

 

1) 변수 이름 저장,

2) 스코프 체인 및 this 관리,

3) 코드 실행 순서 관리 등을 수행,

 

원시타입

콜스택 메모리에는 단순 변수와 같은 원시 타입 데이터가 저장되는데, 자바스크립트에서 원시타입이란

string, number, boolean, null, undefined을 말한다.

const a = 'Hello World';

 

변수 a는 콜스택 영역에 있는 a의 주소를 읽고, 그 콜스택 영역에 그대로 'Hello World'라는 값 자체가 저장되어 있다.

원시타입은 콜스택 영역에 바로 저장된다.

메모리 힙(Memory Heap)

참조 타입(객체, 배열 등) 데이터가 저장된다.

메모리 할당이 일어나는 곳.

 

참조 타입

객테와 배열 같은  참조타입 데이터는 힙 영역에 저장되고, 자바스크립트에서 참조타입은

Array. Object, Function 등이 있다.

const b = [1,2,3];
const c = {id:"이정우",pw:123};
const d = function() {console.log("하이")};

 

참조타입 변수들도 원시타입과 마찬가지로 콜스택에 각각의 주소를 읽고 있는데, b를 예로 들어보겠다. 변수 b의 콜스택 값에는 [1,2,3]이라는 배열이 바로 들어있는 게 아닌 메모리 Heap안에 저장된 [1,2,3]의 주소가 들어있다. 다른 블로그에서 쉬운 예시를 발견해 적어보겠다.

그분은 Heap을 '빌라'라고 표현하고 b의 콜스택 주소를 살펴보니 "Heap빌라의 201호로 가라"라는 데이터가 있고 실제 Heap빌라 201호에는 [1,2,3]이라는 데이터가 있다. 라고 생각하면 이해하기 더 쉬울 것이다

이해를 돕기위한 사진

const /  let

let과 const의 차이는 변수인지 상수인지의 차이인건 대부분 개발하는 사람이라면 알 것이다.

const obj = {
	id: '차은우',
    tall: '185'
};

obj.id = '송강';
console.log(obj); // ???

 

위의 코드를 실행했을 때 콘솔에는 어떻게 나올까?

 

답은 id가 송강으로 바뀌어서 나온다. const로 선언된 obj의 데이터가 변경되었는데도 왜 에러가 발생하지 않고 정상적으로 작동하는 것일까? 그 이유는 변경 유무는 데이터의 값이 아니라, 콜 스택의 값을 기준으로 판단하기 때문이다.

그렇기 때문에 원시타입의 데이터나 힙영역의 주소는 변경할 수 없지만, 실제 참조되고 있는 값은 바뀔 수 있다.

 

가비지 컬렉션

그럼 만약, 변수 a가 let으로 선언되었다고 가정해 보자.

let a = 'Hello World';
a = 'This is yoy';

 

그럼 더 이상 콜스택에 남아있던 원시타입 데이터인 'Hello World'는 사용되지 않으므로, 가비지 컬렉터가 삭제시킨다.

이와 같은 맥락으로 로컬 스코프를 떠난 후 해당 스코프의 변수가 외부 스코프에서 참조되지 않을 때도 나중에 메모리에서 해제된다.

우리말이 잘 이해가 가지 않았지만 코드를 보고 금세 이해해 버렸다!!

function foo() {
    var localVar = "I'm a local variable!";
    return localVar;
}

function bar() {
    var result = foo();
    console.log(result); 

}

bar();

 

foo함수가 실행되면 lovalVar라는 변수가 생성된다. 그러나 foo함수가 종료되면 localVar에 대한 참조가 사라지고 이후 실행되는

bar함수에서 localVar에 더 이상 접근 할 수 없다. 이 시점에서 localVar는 더이상 칠요하지 않은 상태가 되기 때문에 가비지 컬렉터에 의해 삭제된다.