호출스택과 이벤트 루프 정리

일단 자바스크립트에서 모든 함수는 호출 스택(Call Stack)에 등록이 되었다가 다 실행되면 빠져나감

console.trace( )는 호출 순서같은거 보여주는 메서드

a()를 호출해보면

이런식으로 나옴

여기서 헷갈릴만한 점은

functiton a() { } - 이건 선언임!! 이렇게 한다고 함수가 실행되는것은 아님

콜스택은 제일 먼저 들어온게 밑에서부터 쌓이고, 제일 위에 있는게 제일 먼저 나감(들어온 순서랑 반대로 호출됨 - 스택이니깐)

일단 자바스크립트 엔진은 js코드가 실행되는 순간 하나의 함수가 실행된다고 보고, 크롬은 이를 익명(anonymous)라고 표시한다함

과정

1. a() 함수에 도달할때까지, 모든 함수를 무시함

2. a() 함수를 호출함

3. a() 함수를 호출 스택 리스트에 추가함 - 스택 리스트 (a)

4. a() 함수 내부의 모든 코드를 실행함 - b가 있음

5. b() 라는 함수를 호출 스택 리스트에 추가함 - 스택 리스트(a - b)

6. b함수에 있는 모든 코드를 실행함

7. a함수에서 나머지 코드를 실행하고 호출 스택 리스트에서 b는 제거함

8. a함수 모든 코드가 실행되었다면 a를 호출한 라인으로 돌아와(a()한 라인) 그 밑에 코드 실행하면서 a()도 호출 스택 리스트에서 제거함

• *로 표시한 부분에서 만약에 복잡하고 긴 코드가 중간에 끼면 콜백의 콜백의 콜백 갔다가 다시 돌아와서 두번째 라인이 호출되기때문에 굉장히 비효율적일 수 있음. 그래서 자바스크립트 런타임에서는 setTimeout , 이벤트리스너, ajax 같은거가 발견이 되면 바로 Web APIs로 보내서 해당 이벤트가 발생하면 그때 Callback queue에 보내서 여기에서 줄서있다가 콜스택이 비면 그때 이벤트 루프가 콜스택으로 보내줌

• 모든 함수는 다 콜스택에 들어갔다가 실행되면서 나감