[Non-blocking] JavaScript는 단일쓰레드(하나의 스택)를 사용하면서 논블로킹(비동기실행)이 가능하다.

JavaScript는 개발자가 작성한 코드를 스택에 집어넣고 하나씩 실행하는 "콜스택" 방식으로 실행되는 언어이다.

콜스택은 하나의 함수가 실행을 마치고 스택을 나가야만 다음 함수가 들어와 실행되는 구조다.

 

그런데 JavaScript는 이 스택이 하나인 단일쓰레드를 따르기 때문에, 어떤 함수가 굉장히 무거운 작업(이미지 처리 또는 API Request 등)을 담고 있다면, 그 작업의 처리가 완료되기 전까지 다른 작업을 하지 못하는 동기적(syncronous)실행 언어라고 생각될 수 있지만,

JavaScript에는 Web API와 Queue가 있어서 비동기(asyncronous)실행이 가능하다.

*Syncronous : 선생님에게 전화를 거는 상황 - 선생님이 전화를 받기까지 다른 것을 할 수 없고, 전화 행위 자체에 집중할 수 밖에 없다.

Asyncronous : 선생님에게 질문사항을 문자로 보낸 상황 - 선생님의 답장을 기다리면서 다른 일에도 집중할 수 있다.

 

여기서 Web API란 JavaScript가 아니라 크롬의 V8엔진 같은 브라우저가 제어하는 함수다.(ex. setInterval)

JavaScript 코드가 진행되다가 Web API를 만나면, 브라우저는 setInterval 같이 콜백을 포함하는 고차함수(또는 그에 상당하는 시간 소요를 지닌 함수)를 기존의 스택에서 "마치 그 함수가 처리를 완료한 것처럼" 따로 꺼내온다.

 

그럼 이렇게 따로 분류된 "실제 실행되어야 할 함수(그 결과를 페이지에 렌더링해야 함)"는 서버와의 Request나 setInterval, setTimeOut에 의해 처리를 완료한 후(시간을 소요한 후)에 다시 Queue로 들어간다.

 

Queue로 들어간 "실제 실행되어야 할 함수"는 기존 스택이 비어있을 때에만 꺼내져 실제 페이지에 렌더링된다.

 

그렇게 함으로써 그다음에 진행될 코드가 딜레이없이 계속 진행되고, 브라우저의 freeze를 막을 수 있게 되어, "멀티태스킹"이 가능한 것처럼 보이게 되는 것이다.