참치코더의 꿈 메모장

자바스크립트 동기 함수 / 비동기 함수 비교 및 과정 본문

Javascript

자바스크립트 동기 함수 / 비동기 함수 비교 및 과정

참치깡 2025. 4. 24. 22:04
728x90

 

동기함수

 

- 거의 모든 함수는 동기함수이다. 모든 자바스크립트 머신에는 해당 함수를 실행시켜주는 호출스택이 있는데 말 그대로

  스택의 역할 함수 내부에 있는 코드가 실행중일때 열려있는 함수는 호출스택에 쌓이게 된다. 

   -> 다중 함수 일경우 function1 실행중에 function2가 실행된다면 아래와 같이 FIFO구조로 저장이 된다.

 

- 자료구조인 스택의 역할처럼 종료되면 위에서 부터 하나씩 순차적으로 종료가 된다.

 

...
...
function2
function1

                호출 스택

 

 

비동기 함수

 

- 비동기 함수는 동기함수와 달리 내가 코드를 작성한 순서대로 실행이 되는 것이 아닌 시스템이 의도하는 대로

  움직이는 함수라고 할 수 있다.

 

- 일단 비동기 함수가 실행이 되면 실행할 때 접근함수는 그대로 호출스택에 쌓이지만 접근함수 내부에 있는 콜백함수가

  백그라운드 공간에 같이 순차적으로 쌓이게 된다. 

 

- 순차적으로 동기함수 및 접근함수가 호출스택에서 종료가 되고, 백그라운드에 있던 콜백함수는 테스크 큐라는

  공간으로 이동이 진행된다.(CPU가 M/M에서 자원가져오는 거랑 비슷한 원리인 듯(?))

 

- 테스크 큐 사이랑 호출스택 사이에는 이벤트 루프라는 기능(알고리즘)이 존재하는데 이벤트 루프가 호출 스택이 비었다라고

  판단이 되면,  콜백함수를 호출 스택에 올리고 순차적으로 실행이 된다.

 

- 이것이 비동기 함수의 원리이다.

비동기함수 동작 원리

 

 

 

맛있었던 간장치킨 ㅎㅎ

 

728x90
Comments