Javascript 호출스택

이 글은 자바스크립트 개발자가 알아야 하는 33가지 개념 중 호출 스택에 관련된 글로 https://velog.io/@jakeseo_me/2019-03-15-2303-%EC%9E%91%EC%84%B1%EB%90%A8-rmjta5a3xh 을 다시 한번 정리한 것입니다!

 

자바스크립트는 하나의 스레드로 단 1개의 동시성만 다루는 언어입니다. 자바스크립트는 힙, 큐와 함께 구성하는 단일 콜스택을 갖습니다. 이것은 V8 내부에 구현되어 있습니다.

1. 콜스택

함수의 호출을 기록하는 자료구조입니다. 만약 우리가 어떤 함수를 실행시킨다면, 우리는 스택 위에 무언가를 올리는 행위(push)를 합니다. 그리고 우리가 함수로부터 반환을 받을 때 우리는 스택의 맨 위를 가져옵니다(pop).

function foo(b){
	var a=5;
    return a*b+10
}

function bar(x){
	var y=3;
    return foo(x*y);
}

console.log(bar(6));

이런 함수를 실행할 때 우리는 main(), console.log(), bar(), foo() 순서대로 콜스택에 올라가게 되고 return a*b+10, foo(x*y), bar(6), marin() 순으로 반환하고 빠지게 됩니다.

가끔 함수를 재귀적으로 여러 번 부르다가 무한 루프에 빠지게 되는데 크롬 브라우저 같은 경우엔 16000 프레임의 제한된 스택을 가지고 있어서 이 범위를 넘어서게 되면 Max Stack Error Reached라는 상태가 되고 실행 중이던 것을 죽인다.

 

2. 힙

오브젝트(객체)들은 힙 내부에 할당됩니다. 힙은 거의 구조화되지 않은 영역의 메모리입니다. 변수와 객체들의 모든 메모리 할당이 여기서 일어나게 됩니다.

 

3. 큐

자바스크립트의 런타임은 메시지 큐를 갖고 있습니다. 메시지 큐는 실행될 콜백 함수나 실행될 메시지들에 대한 리스트입니다. 스택이 충분한 공간을 갖고 있을 때, 메시지는 큐 밖으로 나오게 되고 메시지가 가지고 있던 함수들이 실행됩니다. 만일 한 사용자가 버튼을 눌렀는데 아무런 콜백 함수도 등록되어 있지 않다면 어떠한 메시지도 큐에 들어가지 않을 것입니다

 

4. 이벤트 루프

자바스크립트는 한 번에 한 일만 합니다. 따라서 네트워크 요청이 느리거나 이미지 요청이 느린 경우 비동기 콜백을 이용합니다. 비동기 콜백을 이용한다는 것은 우리가 코드의 일정 부분을 실행시키고 나중에 실행될 콜백 함수를 스택에 넣는 것을 말합니다. (비동기형 콜백으로는 get(). setTimeout(), setInterval(), Promises 등이 있다.) 비동기형 함수들은 동기 함수들과는 다르게 바로 스택의 내부로 push 될 수 없습니다. 비동기형 함수들은 브라우저 내부에 C++로 구현된 웹 API 스레드들을 호출합니다. 만약 현재 실행 중인 코드가 끝난다면 웹 API 중 어느 하나가 콜백을 큐에 넣습니다. 이벤트 루프는 큐 안의 콜백들을 스택이 비었을 때 밀어 넣는 일을 담당합니다.

메시지들은 웹 브라우저에서 언제든 이벤트가 발생했을 때 추가됩니다. 그리고 이벤트들에는 이벤트 리스너가 붙어있습니다. 우리가 만약 웹 브라우저에서 어떤 요소를 클릭했을 때, 클릭 이벤트 핸들러는 큐에 메시지를 추가합니다.