callstack

자바스크립트는 최대 한 번에 한 줄의 코드만 실행 - singleStread

let foo = function(){
    console.log('foo')
}

let boo = function(){
    console.log('boo');
}

console.log('start');

setTimeout(()=>{
    boo();
}, 0)

foo();

콘솔예상 

'start'
'boo'
'foo'

실행결과
'start'
'foo'
'boo'

이유는 이벤트 루프, 테스트 큐
이벤트 루프는 자바스크립트의 동시성을 지원해준다
브라우저 환경이나 node.js에 내장되어 있는 기능/javascript기능X


javascript에서 함수를 호출하면 실행컨텍스트가 heap에 있는 객체를 참조해서 콜스텍에 푸시해서 순차적으로 실행한다.
이 때 wepApi, DOMapi, timerFunction과 같은 비동기함수들은 javascript에서 실행하는 것이 아니라 브라우저나 node.js에서 담당한다.
위 비동기 함수들은 이벤트 루프로 인해 콜스택으로 푸시되는 것이 아니라 테스트 큐라는 영영에 일단 저장되고 이벤트루프가 콜스택이 비어있다면 테스트 큐 영역에서 대기하고 있던 함수를 콜스택으로 푸시해서 실행한다.

그래서 start호출 -> 콜스택에 푸쉬 -> 콜스택에서 console.log('start')삭제 -> setTimeout실행 -> 이벤트루프로 인해 boo함수 테스트 큐에 임시 저장 -> foo()호출 -> 콜스택에 푸쉬 후 삭제
-> 콜스택이 비어있으니 이벤트루프가 테스크 큐에 저장되어 있던 boo함수 콜스택에 푸쉬 -> 리턴 후 콜스택에서 삭제