싱글 스레드, 콜백 함수, 비동기 처리

자바스크립트는 싱글 스레드를 가지는 언어이다

따라서 앞의 작업이 막히면 뒤의 작업도 다 막혀서 실행이 되지 않는다

싱글스레드는 그렇구나... 에서 나아가서 왜 싱글스레드는 그렇게 선형적이고 멈출까?

이유는 자바스크립트 call stack 콜스택 만을 가지고 있기 때문이다

LIFO 인 스택의 성질 때문에 앞에서 막혀버리면 막힌 아래 부분이 그대로 실행을 못하게 되는 것이다

그래서 싱글 스레드인 자바스크립트는 작업이 막히면 다음 작업이 실행되지 않는다

하.지.만! 자바스크립트에는 비동기 처리라는 것이 있는데

선형적인 작업에서 벗어나서 다른 일을 시키고 일단 작업을 진행하고 후에 그 결과 값을 받아서 사용가능하다

이것이 비동기적 함수에는 setTimeout 과 제이쿼리의 ajax 가 있다

이 중 setTimeout 을 살펴보면 비동기 처리를 이해하기가 쉽다

자바스크립트 엔진 내에는 하나의 heap과 stack 만 있다

자바스크립트 외부에는 웹에서 지원하는 Web APIs 가 있는데

자바스크립트에서 인자로 Callback 함수를 넣어서 setTimeout 사용하면

자바스크립트 외부의 Web API 에 callback 함수를 인자로 갖는 setTimeout 을 요청하고,

callstack 내에서는 setTimeout이 완료되어 제거된다

Web API에서는 setTimeout 작업을 완료하고 setTimeout의 인자로 전달받은 callback 함수는

Callback queue 로 넘어가 쌓이게된다.

이때 Event Loop 를 이용하여

1. 자바스크립트 내부의 모든 작업이 끝나서 자바스크립트 내부의 Call Stack 이 비어있는지

2. Callback queue( = Task queue) 에Task(Callback 함수)가 존재하는지

를 판단하여 조건 충족 시 Callback queue의 Call back 함수를

자바스크립트 내부의 Call Stack으로 옮기는 반복 수행을 실행한다

이런 과정을 통해서 자바스크립트 내부의 Call Stack은 하나지만

비동기 처리가 가능한 것이다!

요약 : 자바스크립트 엔진 외부의 Web API와 Callback Queue, Event Loop 를 사용하므로 비동기 처리가 가능하다

아래 그림은 위의 과정을 그림으로 나타낸 것이니 참고하자

시간 지연을 위한 setTimeout 외에도 일정 간격으로 반복실행하기 위한 setInterval 함수도 비동기 처리이며

같은 원리를 통해 작동한다.

setTimeout 과 setInterval 의 경우 사용 후 메모리에 계속 남아있어서 생기는 메모리 누수를 막기 위해

clearTimeout 과 clearInterval 을 통해 이벤트를 해제해주어야 한다

토끼씨