[JS] 콜스택

콜스택에 대해 알아보자.

흔히 자바스크립트는 싱글 스레드(single thread)라고 하는 걸 한번쯤은 들어봤을 것이다.

즉, single call stack = 한 번에 한 가지 수행가능한 동기적이라고 할 수 있다!

 

🚩스택

후입선출

즉, 제일 마지막으로 들어온것이 먼저 나간다.

 

🚩큐

선입선출

앞뒤가 열려있어 FIFO라고 하며 먼저 들어온것이 먼저 나간다.

 

콜스택이란 함수 호출을 저장하는 자료구조다.

우선 연두색 부분은 우리가 작성한 JS 파일에서 어느 부분이 실행되고 있는지를 알 수 있는 부분이다.

 

여기서 call이란 함수를 호출하는 것을 의미하는데, 콜을 호출할때마다 스택에 이렇게 차곡차곡 쌓이게 된다.

실제적인 값은 메모리 Heap에 저장되고, 콜스택엔 힙의 주소가 저장이된다.

(그래서 객체를 비교할때는 주소값을 확인하는 것이다.)

 

Wep API는 자바스크립트가 아닌 브라우저에서 제공하는 API로 document, AJAX, setTimeout 등등이 해당된다.

Callback Queue란 콜백함수가 비동기 함수가 실행된 후에 저장되는 곳이다.

 

이때, Event loop는 항상 콜스택,콜백큐를 감시하고 있기에 콜스택이 비어있으면? 

큐에 있던 작업을 꺼내 콜스택에 전달하는 역할을 한다.

 

일단 우선순위를 아는 것이 중요하다.

스택이 큐보다 우선순위가 높다.

 

큐의 우선순위를 높은순으로  살펴보면 

바로 스택에 담기는 동기 실행이 제일 높고 -> 마이크로 테스트큐 -> 애니메이션 프레임 -> 매크로 테스트 큐 

이때 최소지연시간인 setTimeout은 매크로 테스크 큐에 해당하며 제일 우선순위가 낮아

뒤늦게 실행되는 것을 볼 수 있다.

 

아래와 같은 예시코드로 살펴보자!

 

setTimeout(() => {   // 호출이 먼저되지만,web api에서 실행된다. 
  console.log('Timeout')
}, 0)
function A() {
  console.log('1')
  function B() {
    console.log('2')
  }
  A()
}
B()

 

 

제일먼저 호출되는 setTimeout이지만 콜큐로 넘어가서 대기하고 있다가 콜스택이 비워져야 들어갈 수 있기에 

제일 나중에 실행된다.

 

이렇게 출력되는 것을 알 수 있다!

이때,setTimeout은 비동기 함수로써 다른 함수 호출을 막지 않으며 콜백 함수를 받아들인다!