[JS] 동기식과 비동기식 (+Call Stack)

 

 

 

1. 동기와 비동기

 

▶ 동기(synchronous)

- 요청과 그 결과가 동시에 발생하는 방식 (=요청 후 결과를 발생해야지만 다음 요청을 받음)

- 요청을 보내면 결과를 받아 그 요청을 끝내야지만 다음 요청을 처리 할 수 있으므로 효율성이 떨어진다.

 

▶ 비동기(Asynchronous)

 - 동기와는 다르게 결과를 기다리지 않고 다음 요청을 처리하는 방법

 - 결과를 기다리지 않고 다음 요청을 처리할 수 있으므로 작업 효율성이 좋다.

 - 먼저 실행된 요청이 끝나기 전에 더 나중에 실행된 요청이 끝날 수 있다.

 

▶ 콜백( Callback)

- 비동기 처리가 끝난 후 처리 결과를 알려주는 함수를 콜백함수라고한다.

 

 

 

 

2. 동기식 싱글스레드 

자바스크립트 실행 엔진(V8)은 하나의 메모리힙과 단일 호출 스택(Call Stack)을 가지고 있다.

 

 즉, 하나의 메인스레드에서 호출되는 함수들이 콜스택에 쌓일것이고, 이 함수들은 LIFO(Last In First Out)방식으로 실행된다. 따라서 구조상 한번에 하나의 함수만 동기적으로 실행이 가능한 싱글스레드(single-Thread) 프로그래밍 언어이다.

 

 일반적으로 자바스크립트 엔진은 독립적으로 실행되지 않고, 웹 브라우저나 Node.js와 같은 멀티스레드 환경에 임베디드되어 실행된다. 따라서 자바스크립트를 Web API, 이벤트루프 등과 분리하여 말하기는 어렵기 때문에 자바스크립트에는 싱글 스레드와 멀티 스레드의 타이밍이 공존한다는 것을 생각할 필요가 있다.

 

 

 

 

3. Call Stack

 

▶ 동기식(synchronous)

 

1) 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓인다.(push)

 

2) 쌓인 반대 순서로 함수가 실행된다.(LIFO)

 

3) 실행이 된 함수는 Call Stack에서 제거된다(pop)

 

 

 

▶ 비동기식(Asynchronous)

 

1) Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API(혹은 백그라운드)로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.

 

2) Web API에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 push 된다.

 

3) Call Stack이 비어있는지 이벤트 루프(Event Loop)가 확인을 하는데 만약 비어있으면, Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.(push)

 

4) Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다. 

 

 

 

 

Example . . .

 

1) function downloadImage() 에서 fetch호출을 찾으면 요청을 보내고 함수의 다음 줄을 실행

 

 

 

 

2) 이미지가 다운로드되면 콜백이 콜백/메시지 queue로 푸시

 

 

 

 

3) 현재 실행 중인 함수가 없으면(call stack 이 비어 있는 경우) call stack으로 푸시되고 콜백을 실행

 

 

 

 

4) setTimeOut도 유사하게 작동한다.

 

 

 

 

 

+)아래 사이트는 Call Stack, Web API, Task Queue, Event Loop 이 어떻게 작동하는지 애니메이션으로 보여준다.

http://latentflip.com/loupe

http://latentflip.com/loupe/

 

 

 

 

 

 

# 참고사이트

https://medium.com/swlh/in-depth-introduction-to-call-stack-in-javascript-a07b8513bcc3

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Introducing