백그라운드

타이머를 처리하고 이벤트 리스터를 저장하는 공간입니다. 비동기 함수를 등록한다. 예를 들어 setTimeout 함수는 실행되면 백그라운드에서 시간을 재고 시간이 지나면 콜백 함수를 태스크 큐로 보내게 됩니다. 이벤트 리스너는 추가한 이벤트를 저장했다가 이벤트가 발생하면 콜백 함수를 태스크 큐로 보냅니다. 백그라운드에서는 코드가 실행되지 않고 실행될 콜백 함수들을 태스크 큐로 보냅니다.

태스크 큐

실행되어야 할 콜백 함수들이 줄을 서서 대기하고 있는 공간을 말합니다. 큐의 자료구조처럼 먼저 들어온 함수부터 실행 됩니다. 태스크 큐에서는 함수를 직접 실행하지 않고 호출 스택에서 함수가 호출되어 실행 됩니다. 호출 스택으로 함수를 이동시키는 역할을 하는것이 이벤트 루프 입니다. 호출 스택이 비어있게 되면 이벤트 루프는 태스크 큐에 줄 서 있는 함수들을 순서대로 꺼내 스택으로 옮겨 함수가 실행 되는 것 입니다. 실행이 완료된 함수는 호출 스택에서 빠져 나가고 호출 스택이 비면 다시 이벤트 루프가 태스크 큐에서 함수를 가지고 오는 것 입니다.

대부분의 비동기 코드들이 백그라운드에 저장된다. 어떤 자바스크립트든 처음에 anoaymous 가 실행된다.
코드를 보고 어떤 과정을 거쳐 콘솔에 출력되는지 하나하나의 과정을 적어가며 이벤트루프,호출스택,태스크큐, 백그라운드 과정을 이해 해보는것이 목표입니다.

function aaa() {
     setTimeout( () => {
             console.log(‘d’);
   }, 0);
   console.log(‘c’);
}

setTimeout( () => {
      console.log(‘a’);
      aaa();
}, 0); 


setTimeout( () => {
      aaa();
     console.log(‘b’);
}, 0); 

위의 코드가 어떻게 콘솔까지 출력되는지 적어봅시다.

1. 백그라운드 : 타이머1 - 0초
   태스크 큐 :
   호출스택 : anonymous -> setTimeout
   콘솔 :
   anonymous -> setTimeout 호출 되면서 백그라운드에 타이머1 저장 후 호출스택에서 빠져나감.

2. 백그라운드 : 타이머1 - 0초, 타이머2 - 0초
   태스크 큐 :
   호출스택 : anonymous -> setTimeout
   콘솔 :
   다음 setTimeout 호출 되면서 백그라운드에 타이머2 저장 후 호출스택에서 빠져나감.

3. 백그라운드 : 타이머1 - 0초, 타이머2 - 0초
   태스크 큐 :
   호출스택 : anonymous
   콘솔 :
   코드가 끝났으니 anonymous 도 호출스택을 빠져나감.

4. 백그라운드 :
   태스크 큐 : 타이머1(콜백함수), 타이머2(콜백함수)
   호출스택 :
   콘솔 :
   0초가 지났으니 setTimeout 의 콜백함수들이 태스크 큐로 순서대로 들어감.

   5.백그라운드 :
   태스크 큐 : 타이머2(콜백함수)
   호출스택 : 타이머1(콜백함수),
   콘솔 :
   호출스택이 비어 있으니 이벤트 루프가 태스크 큐에 있던 타이머1(콜백함수)가 이동.

5. 백그라운드 :
   태스크 큐 : 타이머2(콜백함수)
   호출스택 : 타이머1(콜백함수) -> console.log a
   콘솔 :
   호출스택으로 이동한 타이머1(콜백함수) 바로 실행, console.log a 호출

6. 백그라운드 :
   태스크 큐 : 타이머2(콜백함수)
   호출스택 : 타이머1(콜백함수)
   콘솔 : a
   콘솔에 a 가 출력되고 console.log a 는 빠져나감.

7. 백그라운드 :
   태스크 큐 : 타이머2(콜백함수)
   호출스택 : 타이머1(콜백함수) -> aaa 호출
   콘솔 : a
   aaa 함수 호출

8. 백그라운드 : 타이머3- 0초
   태스크 큐 : 타이머2(콜백함수)
   호출스택 : 타이머1(콜백함수) -> aaa 호출 -> setTimeout
   콘솔 : a
   setTimeout 호출, 백그라운드에 타이머3 저장

9. 백그라운드 :
   태스크 큐 : 타이머2(콜백함수), 타이머3(콜백함수)
   호출스택 : 타이머1(콜백함수) -> aaa 호출 -> console.log c
   콘솔 : a
   setTimeout 빠져 나가고 타이머3(콜백함수) 태스크 큐로 이동, console.log c 호출

10. 백그라운드 :
    태스크 큐 : 타이머2(콜백함수), 타이머3(콜백함수)
    호출스택 : 타이머1(콜백함수) -> aaa 호출
    콘솔 : a c
    콘솔에 c 출력, console.log c 탈출

11. 백그라운드 :
    태스크 큐 : 타이머2(콜백함수), 타이머3(콜백함수)
    호출스택 :
    콘솔 : a c
    aaa 함수 탈출, 타이머1(콜백함수) 탈출

12. 백그라운드 :
    태스크 큐 : 타이머3(콜백함수)
    호출스택 : 타이머2(콜백함수)
    콘솔 : a c
    타이머2(콜백함수) 를 호출스택이 비어 있으니 이벤트 루프가 호출스택으로 이동시키고 실행

13. 백그라운드 :
    태스크 큐 : 타이머3(콜백함수)
    호출스택 : 타이머2(콜백함수) -> aaa 호출
    콘솔 : a c
    aaa 호출

14. 백그라운드 : 타이머4 - 0초
    태스크 큐 : 타이머3(콜백함수)
    호출스택 : 타이머2(콜백함수) -> aaa 호출 -> setTimeout
    콘솔 : a c
    setTimeout 호출, 백그라운드에 타이머4 저장

15. 백그라운드 :
    태스크 큐 : 타이머3(콜백함수), 타이머4(콜백함수)
    호출스택 : 타이머2(콜백함수) -> aaa 호출 -> console.log c
    콘솔 : a c
    setTimeout 빠져 나가고, 타이머4(콜백함수) 태스크 큐로 이동 console.log c 호출

16. 백그라운드 : 타이머4 - 0초
    태스크 큐 : 타이머3(콜백함수)
    호출스택 : 타이머2(콜백함수) -> aaa 호출
    콘솔 : a c c
    콘솔에 c 출력, console.log c 탈출

17. 백그라운드 :
    태스크 큐 : 타이머3(콜백함수), 타이머4(콜백함수)
    호출스택 : 타이머2(콜백함수) -> console.log b
    콘솔 : a c c
    aaa 함수 탈출, console.log b 호출

18. 백그라운드 :
    태스크 큐 : 타이머3(콜백함수), 타이머4(콜백함수)
    호출스택 :
    콘솔 : a c c b
    콘솔에 b 출력, console.log b 탈출, 타이머2(콜백함수) 탈출

19. 백그라운드 :
    태스크 큐 : 타이머4(콜백함수)
    호출스택 : 타이머3(콜백함수)
    콘솔 : a c c b
    타이머3(콜백함수) 를 호출스택이 비어 있으니 이벤트 루프가 호출스택으로 이동시키고 실행

20. 백그라운드 :
    태스크 큐 : 타이머4(콜백함수)
    호출스택 : 타이머3(콜백함수) -> console.log d
    콘솔 : a c c b
    console.log d 호출

    20. 백그라운드 :
        태스크 큐 : 타이머4(콜백함수)
        호출스택 :
        콘솔 : a c c b d
        콘솔에 d 출력, console.log d 탈출, 타이머3(콜백함수) 탈출

21. 백그라운드 :
    태스크 큐 :
    호출스택 : 타이머4(콜백함수)
    콘솔 : a c c b d
    타이머4(콜백함수) 를 호출스택이 비어 있으니 이벤트 루프가 호출스택으로 이동시키고 실행

22. 백그라운드 :
    태스크 큐 :
    호출스택 : 타이머4(콜백함수) -> console.log d
    콘솔 : a c c b d
    console.log d 호출

23. 백그라운드 :
    태스크 큐 :
    호출스택 :
    콘솔 : a c c b d d
    콘솔에 d 출력, console.log d 탈출, 타이머4(콜백함수) 탈출
    위의 과정으로 콘솔에 a c c b d d 가 출력 됩니다.