22.06.27 TIL Call Stack

Javascript는 단일 스레드 단일 동시(싱글스레드) 언어입니다. 이 말은 결국 한번에 하나의 싱글 콜 스택만을 가지고 있다는 말입니다.

즉, 한 번에 하나의 작업 또는 한 번에 코드 조각을 처리할 수 있습니다.  

힙, 큐와 같은 다른 부분과 함께 Javascript 동시성 모델을 구성 하는 단일 호출 스택 이 있습니다(V8 내부에서 구현됨). 

 

1. 콜스택

기본적으로 우리가 있는 프로그램에서 함수 호출을 기록하는 데이터 구조입니다. 실행할 함수를 호출하면, 스택에 무언가를 push하고 함수에서 돌아올 때 스택의 맨 위에서 pop합니다.

 

 

스택은 쌓아 올리는 것입니다. 

자바스크립트 함수를 그 스택 위에 올리고, 함수를 다 실행하면 제거합니다.

스택을 다 처리하면 ? 실행시킬 것이 없어집니다. 

 

리스트가 존재합니다. 함수는 리스트에 추가되고, 실행이 완료되면 함수는 리스트에서 제거 됩니다.

 

 

위의 그림에서 살펴보면, 파일을 실행하면서 먼저 모든 실행이 시작될 메인 함수를 찾습니다. 위의 그림의 경우 스택으로 push되는 console.log(bar(6))에서 시작합니다. 

 

그 위에 있는 다음 프레임은 인수가 있는 함수 막대이며 다시 foo함수를 호추라여 다시 push 됩니다. 

스택의 맨 위에 있고 즉시 반환되므로 스택에서 pop됩니다. 유사하게 막대가 pop되고, 마지막으로 콘솔문이 출력을 인쇄하여 팝 아웃됩니다. 

이 모든 것이 한번에 하나씩 발생합니다.

 

위의 그림을 통해 알 수 있는 것은 빨간색 오류 스택 추적입니다. 기본적으로 호출 스택의 현재 상태를 나타내며 함수에서 스택과 마찬가지로 위에서 아래로 실패한 위치를 나타냅니다.

 

2. 힙

객체는 메모리의 대부분 구조화되지 않은 영역인 힙에 할당됩니다. 변수와 객체에 대한 모든 메모리 할당은 여기 힙에서 발생합니다.

 

3. 큐

자바스크립트 런타임에는 처리할 메시지 목록과 실행할 관련 콜백 함수인 메시지 대기열이 포함되어 있습니다. 

스택에 충분한 용량이 있으면 메시지가 대기열에서 꺼내어 관련 함수 호출로 구성되어 처리됩니다.

스택이 다시 비게 되면 메시지 처리가 종료됩니다. 기본적으로 이러한 메시지는 콜백 기능이 제공된 경우 외부 비동기 이벤트에 대한 응답으로 대기열에 추가됩니다. 

(ex) 사용자가 버튼을 클릭 => 콜백기능이 제공되지 않음 => 메시지가 대기열에 추가되지 않음.

 

 

4.  이벤트 루프

 

이벤트 루프란 콜백이벤트 큐에서 하나씩 꺼내서 동작하는 루프를 말합니다.

이벤트 루프 역할은 콜스택과 테스크 큐를 주시하는 것입니다.

스택이 비어있으면, 큐의 첫번째 콜백을 스택에 쌓아 효과적으로 실행할 수 있게 해줍니다. 

자바스크립트 동작과정

자바스크립트는 싱글 스레드 기반 언어이기 때문에 한번에 하나씩 작업을 진행합니다. 

오잉 ? 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있음을 알 수 있습니다 !!!

 

🐢 자바스크립트 동작 과정 그림에서 각 요소의 역할은 무엇일까요 ?

자바스크립트는 이벤트 루프를 이용하여 비동시 방식으로 동시성을 지원합니다.

(자바스크립트 엔진에서 제공되는 것은 아니고 브라우저나 node.js에서 지원됩니다.) 

 

이벤트 루프에서는 이벤트 발생시 호출되는 콜백 함수들을 테스크 큐에 전달하고 , 테스크 큐에 담겨있는 콜백 함수들을 콜스택에 넘겨줍니다. 

 

이벤트 루프가 테스크 큐에서 콜스택으로 콜백함수를 넘겨주는 작업은 콜스택에 샇여있는 함수가 없을 때만 수행됩니다.

 

테스크 큐에서는 web api에서 비동기 작업들이 실행된 후 호출되는 콜백 함수들이 기다리는 공간입니다. (테스크 큐는 하나의 큐로 이루어지지 않았고 마이크로테스크 큐, 애니메이션 프레임 등 여러개의 큐로 이루어져 있습니다.)

 

web api는 브라우저에서 자체 지원하는 api로 DOM 이벤트, Ajax, setTimeout등의 비동기 작업등을 수행할 수 있도록 api를 지원합니다.

 

🐢 런타임 환경에서 어떻게 비동기 코드가 실행되는 걸까요 ????

 

자바스크립트 코드들이 실행될 때, web api가 지원하는 비동기 작업을 수행하는 코드가 실행된다고 생각해봅시다.

 

1. 코드가 호출 스택에 쌓인 후 실행되면 자바스크립트 엔진은 비동기 작업을 web api에게 위임합니다.

2. web api는 해당 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해서 테스크 큐에 넘겨주게 됩니다. 

3. 이벤트 루프는 콜스택에 쌓여있는 함수가 없을 때, 테스크 큐에서 대기하고 있던 콜백 함수를 콜스택으로 넘겨줍니다.

4. 콜스택에 쌓인 콜백함수가 실행되고 콜스택에서 제거 됩니다.

 

참고 : https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec