Callback : Synchronuous(동기) / Asynchronuous(비동기)

Synchronous(동기) Vs Asynchronous(비동기)

1. Callback(콜백 함수) : 함수에 인자로 넘겨주는 함수

콜백함수는 인자로 넘겨주는 함수의 역할에 따라, 동기 또는 비동기로 실행 될 수 있음.

 

2. 콜백 처리 방식에 따른 차이 ( 동기 vs 비동기 )

JavaScript 내부에 있는 함수 -> 콜백을 동기 방식으로 처리

JavaScript 외부에 있는 함수 -> 콜백을 비동기 방식으로 처리 ( 예: 타이머함수(setTimeout), onclick이벤트 )
 ** 타이머는 브라우져에 있는 시간을 가져다 쓰고, Onclick은 Dom에서 가져오므로 둘다 자바스크립트 외부에 있음.

 

3. 콜백 처리 순서

- 동기 방식으로 처리하는 함수

  : Queue에 들어있는 Main함수가 Stack에 들어가고 실행되면,

   콜백함수를 Stack에 쌓음.

   콜백함수가 실행완료되고 사라짐.

 

- 비동기 방식으로 처리하는 함수

  : Queue에 들어있는 Main함수가 Stack에 들어가고 실행되면,

   콜백함수를 Queue에 넣음.
   Queue에 들어간 콜백함수는 Stack에 쌓인 함수들이 다 실행되고 Main함수가 Stack에서 사라진 후에,
   Stack에 들어가서 실행됨.

 

 

 

 

[출처] 코드종 유투브

www.youtube.com/channel/UC9hWQRe4QrUivXN3VO2iuMA