왜 호출 "스택", 콜백 "큐"일까?

 

🍎 소개

---

과거에 작성한 브라우저 구조/동작 원리 포스팅을 정리하다가, 분리할 수 있는 주제를 발견하였고, 요즘 왜?라는 질문을 던지고 대답하는 연습을 하고 있기에 간단히 정리해 보았다.

 

 

🍎 호출 스택, 콜백 큐가 각각의 자료형을 사용하는 이유?

---

• 왜 호출 스택에서 스택 자료형이 사용될까요?

아래 예제의 내부 동작 과정을 런타임 환경의 각 장치가 각각의 자료구조를 사용하는 이유와 대입해 설명해 보겠다.

function level1(){
    console.log(1) // -- (4)
}

function level2(){
    level1() // -- (2)
    console.log(2) // -- (3)
}

function welcome(){
    console.log("welcome!")
}

level2() // -- (0)
welcome() // -- (1)

// 1
// 2
// welcome!

자바스크립트는 동기적으로 작동하기 때문에 (0) 번 코드가 모두 실행된 후에 (1) 번 코드가 실행된다.

(0) 번 코드가 실행되면서 인터프리터는 함수 level2와 그 실행 문맥을 호출스택에 추가하고, (2) 번 함수가 실행 문맥에 담기고, (2) 번과 (3) 번 코드는 동시에 처리될 수 없기에 (2) 번이 끝나기 전까지 (3) 로그문은 실행되지 않는다. (2) 코드가 실행되면서 level() 함수와 그 내부 실행문 log(1)이 차례대로 스택에 쌓이게 되고, 가장 마지막 들어온 log(1)부터 처리된다.

이렇게 자바스크립트 태스크는 가장 내부에 있는 실행문이 종료되어야 차례대로 그 외부를 감싸던 실행문이 종료되는 재귀적인 형태를 띤다. 그렇기에 가장 마지막 들어온 실행문을 가장 먼저 처리해 주기 위하여 First In Last Out 특성을 가진 스택 자료형이 채택된 것이다 땅땅

 

 

• 그렇다면 콜백 큐는...?

콜백 큐는 (사실 언급하기도 민망할 정도로 사용 이유가 명확하지만) Web Api가 콜백 함수를 반환한 순서대로 처리하기 위해 First In First Out 특성을 가진 큐 자료형이 사용되었습니다 땅땅땅

function cb1(){
    console.log(1)
}

function cb2(){
    console.log(2)
}

function cb3(){
    console.log(3)
}

setTimeout(cb1, 0) 
setTimeout(cb2, 0)
setTimeout(cb3, 0)

// 1
// 2
// 3